Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Css overflow and clear issues i need help.

Cabbit

Cabbit

macrumors 68020
Original poster
Jan 30, 2006
2,128
1
Scotland
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.
 
M

memco

macrumors 6502
May 1, 2008
259
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>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom