Results 1 to 5 of 5

Thread: CSS padding or margin problems

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

    Question CSS padding or margin problems

    If you look at this site I made, you will see all the text is right on the edge of the containers. I want to have a 10px on the left and right of the text within the white container to the blue outside.


    Here is my CSS:
    Code:
    html,body {
        padding:0;
        margin:0;
        height:100%;
        background-color:#003366;
        background-position:center top;             /* this positioning has been modified */
     }
    #mainPicture {
      height:250px;
      width:960px;
      margin:auto;
      background-image:url(images/GreekBackground2.gif);      
     }
    #container {
        position:relative;
        width:960px;
        margin:auto;
        font-family: andalus; 
        color:#003366;
        background-color:#FFFFFF;
     }
    
    div.one {  
          width:960px; 
          margin:auto;
          padding:10px;  
          height:100%;
     }
    div.one a:link  { 
    color :#00008B;
    text-decoration:underline;
    }
    div.one a:visited {
    color: #FF0000;
    text-decoration : underline; 
    }
    
    div.one a:hover  {
    color: #FFFFFF;
    background-color: #8B0000;
    text-decoration: underline;
    }
    
    div.one a:active  {
    color : #FF0033; 
    background-color: #FFFFFF;
    text-decoration: underline;
    }
    
    
    #nav1 {
    	background: transparent url(images/greek-key-BG.jpg) repeat-x scroll left top;
            height:40px;
    	margin:0 auto ;
    	width:960px;	
    	text-align:center;
    }
    
    
    #nav1 ul {
    	display:table;
    	margin:0 auto;
    	padding:0;
    	list-style-type:none;
    	position:relative;
    	height:40px;
    	text-transform:uppercase;
    	font-size:13px;
    	font-family:Arial,sans-serif;
    }
    
    
    #nav1 ul li {
    	display:block;
    	float:left;
    	margin:0;
    	padding:0;
    	background:transparent url("images/hmenu.jpg") repeat-x top left;
    
    }
    
    
    #nav1 ul li a {
    	display:block;
    	float:left;
    	color:#ffffff;
    	text-decoration:none;
    	padding:0px 20px ;
    	line-height:40px;
    	font-weight:bold;
    }
    
    
    #nav1 ul li a:hover {
    	color:#ffffff;
    	background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
    }
    
    iframe {padding: 20px; border:none; float: right;}
    
    table a {
        font-size:16px;
        color:#000066;
        text-decoration:underline;
     }
    table a:hover {
        font-size:16px;
        color:#fff;
        background-color:#8B0000;
     }
    
    #footer {
        background: transparent url(images/greek-key-BG.jpg) repeat-x scroll left top;
            height:40px;
    	width:950px;	
    	text-align:center;
     }
    
    #footer a:link  { 
    color : #FF0000;
    text-decoration:underline;
    }
    
    #footer a:visited {
    color: #FF0000;
    text-decoration : underline; 
    }
    
    #footer a:hover  {
    color: #FFFFFF;
    background-color: #8B0000;
    text-decoration: underline;
    }
    
    #footer a:active  {
    color : #FF0033; 
    background-color: #FFFFFF;
    text-decoration: underline;
    }
    #Copyright { 
          margin: 0 auto;
          width: 960px;
          color: #FFFFFF;
    }
    The HTML is in the post below. The page text is all within <div class="one">
    Last edited by mlegg; 05-02-2012 at 12:46 PM.

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

    Default

    Code:
    <!DOCTYPE html>
    <meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>
    <body>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
      <meta name="language" content="english">
      <meta http-equiv="Content-Style-Type" content="text/css">
      <meta name="google-site-verification" content=
      "I4Ask6VXiDmcOHZoEGhMNu7K7mGb4VG28ZHmOGPF7SE">
    
    <meta name="Description" content="Three fun-filled days in Portsmouth NH as the magic of Greece comes to town. The "Glendi" or party will begin on Friday, July 13th with authentic Greek food. We will offer live Greek music from the band orfeas and continual music by DJ Meleti. In addition to the food, there will be booths that will offer imported jewelry, arts and crafts from Greece. A children's play area will ensure the entire family enjoys their virtual visit to this ancient land.">
    <meta name="Keywords" content=" st. nicholas greek orthodox church, nicholas in greek, greek cuisine, st. nicholas greek orthodox cathedral, charleston food and wine, greek orthodox archdiocese, goarch.org, greek food festivals, st nicholas greek festival, greek food festival, wine events, orthodox christianity, food and wine events, wine tasting events, greek orthodox calendar, dallas greek festival, greek festival st. louis, st nick gift ideas, st nicholas greek orthodox, what to do in portsmouth nh, wine and food events, greek for church, greek orthodox religion, food and wine festival 2012, nicholas greek, st nicholas greek, st louis greek, festival seacoast online calendar, portsmouth events, orthodox music, greek orthodox christian, greek orthodox churches, greek orthodox music, greek orthodox christianity, greek festival st louis mo, greek dates, seacoast nh events, st nick gifts, greek orthodox icon, annunciation  ,greek orthodox wine event, orthodox greek food and wine festivals, 2012 food and wine event, church in greek, greek orthodox church ann arbor, famous greek foods, portsmouth high, charleston wine festival, live music in portsmouth nh, activities in portsmouth nh, greek orthodox faith, greek orthodox festival st nicholas, orthodox greek nicholas, food and wine tasting, food and wine shows, food and wine events 2012, moving to portsmouth nh, portsmouth nh food music festival july, portsmouth nh classifieds, greek food items, live music in nh, festival this weekend, festival of food, eastern orthodox music, greek orthodox religious items, glendi festival, music festival, vendors, where is portsmouth nh, portsmouth activities, saint nicholas orthodox, becoming greek orthodox, greek church, music, music festival dates,  greek orthodox bishop, orthodox children festival in july, greek orthodox food events in portsmouth, greek orthodox festivals, dates in greek, eastern orthodox new year, greek orthodox schools, food in portsmouth, music festival in july, beer, weekend wine activities, the greek orthodox, on line events, greek orthodox community, orthodox music  ">
    
    
    <title>Greek Festival Portsmouth</title>
      <link rel="stylesheet" type="text/css" href="styles.css" /><!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6styles.css">
    <![endif]-->
      
    <style type="text/css">
    #wrap {
       width:960px;
       margin:0 auto;
    }
    #left_col {
       float:left;
       width:460px;
    }
    #right_col {
       float:right;
       width:500px;
    }
    </style>
      <style type="text/css">
    /*<![CDATA[*/
      li.c1 {border:none}
      /*]]>*/
      </style>
      <style type="text/css">
    
        <style type="text/css">
    /*<![CDATA[*/
      div.c1 {clear:both}
      /*]]>*/
      </style>
    
    
    
    
    </head>
    <body>
      <div id="mainPicture"></div>
          <div id="container">
          <div id="nav1">
          <ul>
            <li id="current" class="c1"><a href="index.html">Home</a></li>
            <li><a href="involved.html">Get Involved</a></li>
            <li><a href="menu.html">Menu</a></li>
            <li><a href="events.html">Schedule of Events</a></li>
            <li><a href="sponsors.html">Sponsors</a></li>
            <li><a href="contact.html">Contact &amp; Directions</a></li>    
      </ul>
        </div>
        <div class="one">
          <h1 style="text-align:center">The 2012 Festival Dates are July 13th, July 14th and July 15th.</h1>
           <p style="text-align:center">The families of St. Nicholas Greek Orthodox Church are proud to bring to the Greater Portsmouth Seacoast are the 36th Greek Festival.</p> 
    
    <p>The St Nicholas Greek Festival over the past 40 years proves itself over and over again as a a fun event for all ages. This years’ Greek Festival year promises to be another great event. The families of the St Nicholas Greek Orthodox Church in Portsmouth, NH get together in June and early July preparing many of the menu items. So come join us for fresh Lamb skewers, Moussaka, a Gyro or a fresh piece of Baklava. All of the food and pastries at the St Nicholas Greek Festival, taste just like your YiaYia’s (Grandmother) recipes.
    </p>
    
    <h2>New for 2012</h2>
    <p><strong>Festival Express</strong> Enjoy our new take out menu<br> 
    If you are looking for a quick dinner on Friday or food for the beach all three days come to our new express line near the entrance.</p>
    <div id="wrap">
        <div id="left_col">
            <p>Hours: Friday 12noon to 11PM<br>
                  Saturday 11AM to 11PM<br>
                  Sunday 12noon to 3PM</p>
    <p>Voluntary admission: $3.00 (children under 12 are FREE)</p>
    <p>Music provided by DJ Meleti all weekend</p>
    <p>Live Music – Friday and Saturday at 7PM by orfeas</p>
    <p>Greek Dancing Exhibitions by our Greek School Students Friday and Saturday at 6PM</p>
    <p>Vendors Welcome - <a href="signup.html">Click here for more information.</a> 
    </div>
        <div id="right_col">
           <object width="480" height="360"><param name="movie" value="http://www.youtube.com/v/4i3gocNI-6Q?version=3&amp;hl=en_US&amp;rel=0;&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4i3gocNI-6Q?version=3&amp;hl=en_US&amp;rel=0;&autoplay=1" type="application/x-shockwave-flash" width="480" height="360" allowscriptaccess="always" allowfullscreen="true"></object>
        </div>
    </div>
    
    <div style="clear:both;"><br>
    
    <p><b>Directions:</b> From Portsmouth Rotary, take Rte 1 bypass, then left at 3rd traffic light (Greenleaf Ave). Follow signs to Festival at Andrew Jarvis Drive next to Portsmouth High School. <a href="contact.html">View a map here.</a></p>
    <p>Add us on <a href="http://www.facebook.com/event.php?eid=210109069003368" target="_blank">
    <img src="images/Facebook.gif" width="120" height="30" border="0" alt="Facebook" />
    </a></p>
    
    <h3 style="text-align:center">Want to support the Greek festival? <a href="signup.html">Become a vendor or a sponsor</a> and join our fundraising campaign.</h3>
           <div id="footer">
                      </div>
          </div><!--end #container -->
    </div>  </div>   
    </body>
    <div id="Copyright"><p style="text-align:center">Copyright &copy; PortsmouthGreekFestival.com</p></div><br>
        </html>
    Last edited by mlegg; 05-02-2012 at 12:45 PM.

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there mlegg,

    you page has 99 Errors and 10 warnings.

    You really should get into the habit of checking your code at regular intervals during it's construction.

    As for your CSS problem this....
    Code:
    
    div.one {  
          width:960px; 
          margin:auto;
          padding:10px;  
          height:100%;
     }
    
    ...should be...
    Code:
    
    div.one {  
          width:940px; 
          padding:10px;  
          height:100%;
     }
    
    coothead

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

    Default

    Thanks, and I thought I did the validation with the main page. I changed my code on all pages to validate now.

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    No problem, you're very welcome.

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
  •