Css overflow and clear issues i need help.

Discussion in 'Web Design and Development' started by Cabbit, Sep 29, 2009.

  1. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    Hello long time no see. I have started rewriting my site css and html to be much cleaner and scale nicely however i have a stumbling block in my road that i can not seem to resolve though i did before with many many lines of css that it was shoe horned to work before.

    Under "<!-- Navigation --><div id="navigation_main">" there is a element selected now this element has a bottom border from the base.css file that sets it to over lap the item below it so it appears as if these elements are the same uniform colour as demonstrated on the old clunky version here. However on this new version it fails to overlap and it also seems to be merged with another element at the end.

    Sorry i can't access my ftp to upload a demonstration just now but all the code is below. I have tried googling for a solution of course and most are pointing to using a clear both which i believe i did before though this is no longer working as a solution.

    UPDATE: Its looking much more how i imagined it now.
    link

    Finishing up and making it work with internet exploder next i guess.
     
  2. memco macrumors 6502

    Joined:
    May 1, 2008
    #2
    You were missing a border-bottom declaration on the #navigation li.selected a:hover. In addition I added a float:left and width:100% to the #navigation main div so that it fills the width of the wrapper and holds all of the floated children inside. Also, make sure you validate as you go: I found some doubled semi-colons and a double </a> in there.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Kittenbunny CMS</title>
        
        <link rev="made" href="mailto:abcomforts.com" />
        <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
        <link rev="start" href="./" title="Home Page" />
        
        <!-- CSS -->
        <style type="text/css" media="all">
          @import "reset.css";
        </style>
        <style type="text/css" media="all">
          /*
    	Base Styles
    	*/
    	* { 
    		margin: 0; 
    		padding: 0;
    		font-size: 1em;
    		font-weight: normal;
    	}
    	html {
    		margin: 0;
    		padding: 0;
    	}
    	body {
    		color: #333333; 
    		background-color: #aabbcc;
    		margin: 0; 
    		padding: 0;
    		font: 62.5% "Lucida Grande", verdana, arial, helvetica, sans-serif;
    	}
    
    	h1, h2, h3 {
    		margin: 0;
    		padding: 0;
    		font: 2.8em "Lucida Grande", verdana, arial, helvetica, sans-serif;
    		font-weight: normal;
    		color: #fff;
    	}
    
    	h1 {
    		font: 4em/2em "Lucida Grande", Lucida, Verdana, sans-serif;
    		text-align: left;
    		color: #000;
    		text-indent: 1em;
    	}
    
    	/* Main Layout */
    
    	#wrapper {
    		clear: both;
    		width: 96em; 
    		margin: 0 auto;
    		padding: 0;
    		border: 0.1em solid #666;
    		border-top: none;
    	}
    
    	#login_bar {
    		clear: both; 
    		overflow: hidden;
    		margin: 0 0;
    		padding: 0;
    		background-color: #b2ccff;
    		border-bottom: 0.1em solid #666;
    	}
    
    	#header {
    		margin: 0 0;
    		min-height: 1em;
    		padding: 0;
    		background-color: #fff;
    		border-bottom: 0.1em solid #666;
    	}
    
    	#navigation_main {
    		width : 100%;
    		float : left;
    		margin: 0 0;
    		padding: 0;
    		background-color: #fff;
    		border-bottom: 0.1em solid #666;
    	}
    
    	#content_highlight {
    		clear: both;
    		border-top: 0.1em solid #666;
    		margin: 0 0;
    		min-height: 1em;
    		padding: 0;
    		background-color: #b2ccff;
    		border-bottom: 0.1em solid #666;
    	}
    
    	#content_main {
    		margin: 0 0;
    		min-height: 1em;
    		padding: 0;
    		background-color: #aaa;;
    		border-bottom: 0.1em solid #666;
    	}
    
    	#sub_navigation {
    		margin: 0 0;
    		min-height: 1em;
    		padding: 0;
    		background-color: #fff;
    		border-bottom: 0.1em solid #666;	
    	}
    
    	#footer {
    		margin: 0 0;
    		min-height: 1em;
    		padding: 0;
    		background-color: #b2ccff;
    	}
    
    	/* Top Level */
    
    	/* Login/Account Bar */
    	#login_bar ul
    	{
    		float: right;
    		list-style: none;
    		padding: 0;
    		margin: 0;
    	}
    
    	#login_bar li
    	{
    		float: left;
    		margin: 0 0.1em 0.1em 0em;
    	}
    
    	#login_bar li a
    	{
    		background-color: #ccc;	
    		height: 2em;
    		line-height: 2em;
    		float: left;
    		width: 9em;
    		display: block;
    		border: 0.1em solid #666;
    		border-top: none;
    		color: #0d2474;
    		text-decoration: none;
    		text-align: center;
    	}
    
    	/* Navigation Main */
    
    	#navigation_main ul
    	{
    		list-style: none;
    		padding: 0;
    		margin: 0;
    	}
    
    	#navigation_main li
    	{
    		font-size: 1.5em;
    		float: left;
    	}
    
    	#navigation_main li a
    	{
    		background-color: #fff;	
    		line-height: 1.5em;
    		float: left;
    		display: block;
    		color: #000;
    		padding: 0.6em 1em;
    		border-left: 0.1em solid #fff; 
    		border-right: 0.1em solid #fff;
    		text-decoration: none;
    		text-align: center;
    	}
    	#navigation_main li a:hover
    	{
    		background-color: #b2ccff;	
    		border-left: 0.1em solid #666; 
    		border-right: 0.1em solid #666;
    		text-decoration: none;
    		text-align: center;
    		border-bottom: 0.2em solid #b2ccff;
    	}
    
    	/* Only for home link */
    	#navigation_main li.home a 
    	{
    		border-right: 0.1em solid #fff;
    		border-left: none;
    	}
    	#navigation_main li.home a:hover
    	{
    		background-color: #b2ccff;	
    		border-right: 0.1em solid #666;
    		border-left: none;
    		text-decoration: none;
    		text-align: center;
    	}
    
    	/* Selected link */
    	#navigation_main li.selected a 
    	{
    		background-color: #b2ccff;
    		border-right: 0.1em solid #666;
    		border-bottom: 0.2em solid #b2ccff;
    		border-left: none;
    	}
    	#navigation_main .selected a:hover
    	{
    		background-color: #b2ccff;	
    		border-right: 0.1em solid #666;
    		border-left: none;
    		text-decoration: none;
    		text-align: center;
    	}
        </style>
                
        <meta name="revision" content="" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="revision" content="" />
        		
    	</head>
    	<body>
    		<!-- Wrapper -->
    		<div id="wrapper">
    		
    			<!-- Login/Account -->
    			<div id="login_bar">
    				<ul>
    					<li><a href="/register">Register</a></li>
    					<li><a href="/login">Login</a></li>
    				</ul>
    			</div>
    			
    			<!-- Header -->
    			<div id="header">
    				<h1>Kittenbunny CMS</h1>
    			</div>
    			
    			<!-- Navigation -->
    			<div id="navigation_main">
    				<ul>
    					<li class="selected"><a href="/">Home</a></li> <!-- Remember to set style to home -->
    					<li class=""><a href="/blog">Blogs</a></li>
    					<li class=""><a href="/forum">Forum</a></li>
    					<li class=""><a href="/stories">Stories</a></li>
    					<li class=""><a href="/news">News</a></li>
    					<li class=""><a href="/gallery">Gallery</a></li>
    					<li class=""><a href="/profiles">Profiles</a></li>
    					<li class=""><a href="/reviews">Reviews</a></li>
    					<li class=""><a href="/shop">Shop</a></li>
    					<li class=""><a href="/Chat">Chat</a></li>
    				</ul>
    			</div>
    
    			
    			<!-- Content Highlight -->
    			<div id="content_highlight">
    			
    			</div>
    			
    			<!-- Content Main -->
    			<div id="content_main">
    			
    			</div>
    			
    			<!-- Sub Navigation -->
    			<div id="sub_navigation">
    			
    			</div>
    			
    			<!-- Footer -->
    			<div id="footer">
    			
    			</div>
    			
    		<!-- End Container -->
    		</div>
    	</body>
    </html>
    
     

Share This Page