CSS layout coming good but still problems

**homeboy** · Jun 14, 2005, 23:28

Hello,

Can you please look at the css code and see if there is stuff that needs to to be remove or put into a another location?

I am trying to have a padding of 10px all around but it is not doing it.
My footer is not being centered.
Also, as you can see the text is not overflowing under the grey box on the left side?

How can I fix all of that?

Here is the url: http://members.cox.net/19kash88/sd/index.html

Here is the css url: http://members.cox.net/19kash88/sd/css/sd.css

Thanks

**-Ox** · Jun 15, 2005, 00:35

Hi there.

This is the quick way to fix the footer problem, not sure if its 100% the correct way.

Sorry, I cant go through all the code, perhaps this evening, as I am very busy at the moment, hope this helps in some way?

HTML Code:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Saint Demiana Coptic Orthodox Church in San Diego, California</title>
  <link href="css/sd.css" rel="stylesheet" type="text/css">
  <style type="text/css">
  body {
  	font-family:Verdana, Arial, Helvetica, sans-serif;
  	font-size:12px;
  	margin:0px auto 0px auto;
  	background-image:url(../media/images/bg/bg.jpg);
  	background-repeat:repeat;
  	background-attachment: fixed;
  
  }
  
  p {
  	margin: .625em 0 1.5em;
  	line-height: 14px;
  	text-
  }
  
  
  #container {
  	width: 770px;
  	padding: 10px;
  	margin: 0 auto;
  	background-image:url(../media/images/bg/contentbg.gif);
  	background-repeat:repeat-y;
  	
  }
  
  #mainnav {
  	text-align:right;
  	padding-top:1px;
  	padding-right: 10px;
  	padding-bottom:10px;
  
  	
  }
  
  #navlist li {
  	 display: inline;
  	 list-style-type: none;
  	 padding-right: 10px;
  	 padding-top:10px;
  
  }
  
  ul#navlist a:link, ul#navlist a:visited{
  	 text-decoration:underline;
  	 color: #990000;
  
  }
  
  ul#navlist a:hover, ul#navlist a:active{
  	 text-decoration: none;
  	 color: #74150a;
  
  }
  
  .header {
  	background-image:url(../media/header/header.jpg);
  	background-repeat:no-repeat;
  	background-position:center;
  	height:125px;
  	width: 740px;
  	padding:5px;
  	
  }
  
  #websitenews {
  	background-image:url(../media/header/websitenews.jpg);
  	background-repeat:no-repeat;
  	float:right;
  	height:50px;
  	width:500px;
  	padding-right:20px;
  	margin-top:10px;
  	padding-left:20px;
  	padding-bottom:1px;
  	
  }
  
  #content {
  	width:500px;
  	padding-right:20px;
  	padding-left:20px;
  	line-height:1px;
  	clear: right;
  	float: left;
  	margin: 15px 0 0;
  	overflow: hidden;
  	
  }
  #clear {
  	clear:both;
  }
  
  #sidenav {
  	margin-left:10px;
  	margin-top:10px;
  	width:200px;
  	height:500px;
  	background-color:#f1f1f1;
      float: left;
  	border: 1px dotted black;
  	clear: left;
  }
  
  #footer {
  	font-size: 10px;
  	height: 50px;
  	padding-right:10px;
  	padding-left:10px;
  	margin: 10px auto 10px auto;
  	border-top:1px solid black;
  	vertical-align: bottom;
  	width: 720px;
  	color: #333300;
  	text-align: center;
  	line-height: 25px;
  	background: #e4e4d8;
      clear: both;
  }
  
  
  </style>
  
  </head>
  
  <body>
  	
  <div id="container">
  		
  		  <div id="mainnav">
  
  				<ul id="navlist">
 		 		<li><a href="#">articles</a></li>
 		 		<li><a href="#">church schedule</a></li>
 		 		<li><a href="#">forums</a></li>
 		 		<li><a href="#">our priest</a></li>
 		 		<li><a href="#">presentations</a></li>
  
 		 		<li><a href="#">contact us</a></li>
  				</ul>
  		  </div>
  		
  		<div class="header">header</div>
  		
  		<div id="clear"></div>
  		
  		<div id="websitenews">website news</div>
  		
  		<div id="sidenav">
  		side nav
  		</div>
  		<div id="content">
 		 <p>&quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; </p>
  
    </div>
  
  <div id="footer">footer</div>
  		
  		 
  			
  </div>
  	
  </body>
  </html>

I moved your <div id="sidenav"> above content, and float them both left, that seems to put the footer in the correct place.

Cheers
Ox

The SitePoint Forums have moved.

User Tag List

Thread: CSS layout coming good but still problems

Thread Tools

Display

CSS layout coming good but still problems

Bookmarks

Bookmarks

Posting Permissions