SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS layout coming good but still problems

    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

  2. #2
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net


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
  •