SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: CSS Issues

  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Issues

    Hi all!

    I was coding a site for my upcoming project however when I put in a image based menu using code I've used on other project and have never experienced issues with, and it totally destroyed my current layout I was on. It's online at HERE. As you can see everything else works except there's a extremly large amount of whitespace between the header and the main content... What is cuasing that? Thanks!


    Theros
    Last edited by Theros; Oct 7, 2006 at 11:35.

  2. #2
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    end div </div> in the wrong place

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>12345 12345 12345 12345 12345</title>
    <style type="text/css">
    .clearfix:after { /*Footer Stick Code*/
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    }
    .clearfix {
    	display:inline-block;
    }
    /* mac hide \*/
    	* html .clearfix {height: 1%;}
    	 .clearfix {display: block;}
    /* End hide */
     
    *{margin:0;padding:0}
    html,body{
    height:100%
    }
    .wra{background:#fff;
    }
    * html .wra{
    height:100%;
    }
    head+body .wra{
    min-height:100%;
    } /*End Footer Stick Code*/
    
    body {
    background:#FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    
    p,h3{
    font-size: 11px;
    color: #fff;
    }
    
    #header {
    height:130px;
    background:#000 repeat-x;
    position:relative;
    }
    
    .header-logo,#title h3,#content,#footer p{width:760px;margin:0 auto;}
    
    .header-logo {padding:20px 0 0 20px;}
    
    /*Menu Code Begin*/
    	
    #nav {
    position:absolute;
    bottom:0px;
    right:150px;
    list-style:none;
    background:#ccffcc;
    }
    	
    #nav li{display:inline;}
    	
    #nav a{
    float:left;
    height:30px;
    width:60px;
    text-decoration:none;
    }
          
    #nav a:hover, #nav a.selected {background-position: -60px 0; }
    #nav a:active { background-position: 0 0; }
    #thome a  { background: url(images/menu/home.jpg) top left no-repeat; }
    #tabout a { background: url(images/menu/about.jpg) top left no-repeat; }
    #tarchives a { background: url(images/menu/archives.jpg) top left no-repeat;   }
    
    /*End Menu Code*/
    
    #title {
    height: 30px;
    background: url(images/title.jpg) repeat-x;
    }
    
    #title h3{padding:10px 0 0 20px;}
    
    #content{
    background:#FFF;
    padding-bottom:71px;
    }
    
    .post{
    padding:10px;
    width:235px;
    float:left;
    }
    
    #footer{
    background: url(images/footer.jpg) repeat-x;
    height:50px;
    margin-top:-50px;
    clear:both;
    }
    
    #footer p {padding:20px 0 0 20px;}
    </style>
    </head>
    <body>
    
    <div class="wra fc">
    
    <div id="header">
    
    <div class="header-logo"><img src="images/logo.jpg" alt="Small Blogs Network" title="Small Blogs Network" /></div>
    
    <ul id="nav" class="fc">
    <li id="thome"><a href="index-2.html" class="selected">&nbsp;</a></li>
    <li id="tabout"><a href="bio.html">&nbsp;&nbsp;</a></li>
    <li id="tarchives"><a href="work.html">&nbsp;&nbsp;&nbsp;</a></li>
    </ul>
    
    </div>
    
    <div id="title">
    <h3>Want to submit a site?  Email me at submit [at] smallblogsnetwork.com</h3>
    </div>
    
    <div id="content">
    <div class="post"><img src="images/blogs/featured.jpg" alt="" /></div>
    <div class="post"><img src="images/blogs/showcase.jpg" alt="" /></div>
    </div>
    
    </div>
    
    <div id="footer">
    <p>Copyright &copy; 2006 Small Blogs Network</p>
    </div>
    
    </body>
    </html>

    Thanks a lot! I hate it when something small like this happens and it breaks everything

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you got the Tidy HTML extension for Firefox? Very handy for situations like the one you experienced.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    Have you got the Tidy HTML extension for Firefox? Very handy for situations like the one you experienced.
    Thanks, looks handy. Currently I use the Web Devleper Toolbar for Firefox... It works wonders!


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
  •