Results 1 to 2 of 2

Thread: padding issue

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    347
    Thanks
    49
    Thanked 8 Times in 8 Posts

    Question padding issue

    I made this site. The text is at the very edge of the <div class="one">. I thought I had the padding setup correctly but alas something went wrong. How do I fix it?
    CSS
    Code:
    html,body {
        padding:0;
        margin:0;
        height:100%;
        background-image:url(images/ckbk2.gif);
        background-position:center top;             /* this positioning has been modified */
     }
    #mainPicture {
      height:200px;
      width:960px;
      background-image:url(images/CookieJar-logo2.jpg);      
     }
    
    #container {
        position:relative;
        width:960px;
        padding: 0;    
        min-height:100%;
        margin:auto;
        font-family: sans-serif;color:navy;
        background-color:#fff;
     }
    
    
    
    #pcm{display:none;}
    ul.pureCssMenu ul{display:none}
    ul.pureCssMenu li:hover>ul{display:block}
    ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
    ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
    ul.pureCssMenu,ul.pureCssMenu ul {
    	margin:0px;
    	list-style:none;
    	padding:0px 2px 2px 0px;
    	background-color:#3193DE;
    	background-repeat:repeat;
    	border-color:#AAAAAA;
    	border-width:1px;
    	border-style:solid;
    }
    ul.pureCssMenu {
            width:656px;
            padding-left:300px;
    }
    ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    	display:block;
    	zoom:1;
    	float: left;
    }
    ul.pureCssMenu ul{
    	width:164.85px;
            z-index: 10;
    }
    ul.pureCssMenu li{
    	display:block;
    	margin:2px 5px 0px 2px;
    	font-size:0px;
    }
    ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
    outline-style:none;
    }
    ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    	display:block;
    	vertical-align:middle;
    	background-color:#3193DE;
    	border-width:0px;
    	border-color:#6655ff;
    	border-style:solid;
    	text-align:left;
    	text-decoration:none;
    	padding:4px;
    	_padding-left:0;
    	font:16px Georgia;
    	color: #FFFFFF;
    	text-decoration:none;
    	cursor:default;
    }
    ul.pureCssMenu span{
    	overflow:hidden;
    }
    ul.pureCssMenu li {
    	float:left;
    }
    ul.pureCssMenu ul li {
    	float:none;
    }
    ul.pureCssMenu ul a {
    	text-align:left;
    	white-space:nowrap;
    }
    ul.pureCssMenu li.sep{
    	text-align:center;
    	padding:0px;
    	line-height:0;
    	height:100%;
    }
    ul.pureCssMenu li.sep span{
    	float:none;	padding-right:0;
    	width:5;
    	height:16;
    	display:inline-block;
    	background-color:#AAAAAA;	background-image:none;}
    ul.pureCssMenu ul li.sep span{
    	width:80%;
    	height:3;
    }
    ul.pureCssMenu li:hover{
    	position:relative;
    }
    ul.pureCssMenu li:hover>a{
    	background-color:#FFFFFF;
    	border-color:#665500;
    	border-style:solid;
    	font:16px Georgia;
    	color: #003366;
    	text-decoration:none;
    }
    ul.pureCssMenu li a:hover{
    	position:relative;
    	background-color:#FFFFFF;
    	border-color:#665500;
    	border-style:solid;
    	font:16px Georgia;
    	color: #003366;
    	text-decoration:none;
    }
    ul.pureCssMenu li.dis a {
    	color: #AAAAAA !important;
    }
    ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
    height:16px;
    }
    ul.pureCssMenu ul img {width:16px;
    height:16px;
    }
    ul.pureCssMenu img.over{display:none}
    ul.pureCssMenu li.dis a:hover img.over{display:none !important}
    ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
    ul.pureCssMenu li:hover > a img.def  {display:none}
    ul.pureCssMenu li:hover > a img.over {display:inline}
    ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
    ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
    ul.pureCssMenu a:hover ul{display:block}
    ul.pureCssMenu span{
    	display:block;
    	background-image:url(./images/arrv_anim_1.gif);
    	background-position:right center;
    	background-repeat: no-repeat;
       padding-right:11px;}
    ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_anim_1o.gif);
    }
    ul.pureCssMenu a:hover span{	_background-image:url(./images/arrv_anim_1o.gif)}
    ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)}
    ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arr_double_1o.gif);}
    ul.pureCssMenu table a:hover span{background-image:url(./images/arr_double_1o.gif)}
    
    
    #div.one {  
          padding: 15px;  
          min-height:100%;
    } 
    #div.one a:link  { 
    color :#3193DE;
    text-decoration:underline;
    }
    
    #div.one a:visited {
    color: #3193DE;
    text-decoration:underline;
    }
    
    #div.one a:hover  {
    color: #FFFFFF;
    background-color: #3193DE;
    text-decoration:underline;
    }
    
    #div.one a:active  {
    color : #3193DE; 
    background-color: #FFFFFF;
    text-decoration:underline;
    }
    
    #footer {
        position:absolute;
        width:100%;
        left:0;
        bottom:0;
        padding:5px 0;
        font-family:sans-serif;
        font-size:15px;
        text-align:center;
        color: #FFFFFF;
        background-color:#3193DE;
     }
    #footer a:link  { 
    color : #FFFFFF;
    text-decoration:underline;
    }
    
    #footer a:visited {
    color: #FFFFFF;
    text-decoration : underline; 
    }
    
    #footer a:hover  {
    color: #3193DE;
    background-color: #FFFFFF;
    text-decoration: underline;
    }
    
    #footer a:active  {
    color : #990000; 
    background-color: #FFFFFF;
    text-decoration: underline;
    }
    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta name="keywords" content="The Cookie Jar, Dover, NH, Lisa Ciccotelli, fresh baked cookies, cookies, fresh baked, chocolate chip, ">
    <meta name="description" content="The Cookie Jar is the vision of Lisa Ciccotelli to bring fresh baked cookies to the world's cookie lovers. The Cookie Jar is based out of Dover, NH and sold throughout the local seacoast area.">
    
    <title>TheCookieJar.com</title>
    <link rel="stylesheet" type="text/css" href="cookiejar.css"><!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6styles.css">
    <![endif]-->
    
    <style type="text/css">
     li.c1 {border:none}
    </style>
    <!-- Start visuallightbox.com HEAD section -->
     <link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
     <link rel="stylesheet" href="engine/css/vlightbox2.css" type="text/css" />
    <link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
    <script src="engine/js/jquery.min.js" type="text/javascript"></script>
    		<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
    		<script src="engine/js/vlbdata.js" type="text/javascript"></script>
    
    <!-- End visuallightbox.com HEAD section -->
    
    </head>
    <body>
    <div id="container">
    <div id="mainPicture"></div>
    <!-- Start PureCSSMenu.com MENU -->
    <ul class="pureCssMenu pureCssMenum">
    	<li class="pureCssMenui"><a class="pureCssMenui" href="index.html">Home</a></li>
    	<li class="pureCssMenui"><a class="pureCssMenui" href="products.html">Cookies</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="about.html">Our Story</a></li>
    	<li class="pureCssMenui"><a class="pureCssMenui" href="testimonials.html">Testimonials</a></li>
           <li class="pureCssMenui"><a class="pureCssMenui" href="contact.html">Contact</a></li>
           </ul>
    <!-- End PureCSSMenu.com MENU -->
    <div class="one"><br>
    <p>I remember coming home after school each day to the smell of homemade treats... warm and cozy, delicious treats baking in the oven... and I wanted to carry on that tradition with my children.</p>
    
    <p>In our family, Pa always says "no M-Os" (no Missed Opportunities).  This was the opportunity that I didn't want to miss... to share my homemade chocolate chip cookies with everyone.  This recipe took years to perfect... made with all fresh ingredients and baked fresh every day.  Our goal is to bake each cookie with a gooey, fudgey center, and the perfect crispiness on the edges.</p> 
    
    <p>Need just a taste?<br>
    Try the Minis or a bag of Samplers... and they're perfect for sharing!</p> 
    
    <div style="clear:both">
    <div id="footer">Copyright &copy; The Cookie Jar, Dover, NH / <a href="mailto:Lisa@thecookiejarnh.com">Lisa@thecookiejarNH.com</a></div>
    </div>
    <!--end #container --></div>
    
    </body>
    </html>
    Last edited by mlegg; 07-01-2011 at 11:09 PM. Reason: wrong code

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Code:
    #div.one {  
          padding: 15px;  
          min-height:100%;
    }
    You're targeting an element with the id of "div" and the class of "one" (no such element exists). You probably meant:
    Code:
    div.one {  
          padding: 15px;  
          min-height:100%;
    }
    , but, since there are no other elements with the "one" class, you could probably reduce that to just " .one ".

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •