CSS - Navigation Bar Text Jump

Hi

I am having problems when using relative divs in CSS

the items on the right keep jumping down to the next line.

i have included an image of what it looks like, i wanted to make it so that the items on the right were aligned with those on the left. the left always stays fixed width but the right is dyamic depending on content.

any suggestions?

Cheers

PS the code is as follows

html, body{
margin:0;
padding:0;
}

#topleft {
position: relative;
width: 180px;
left: 12px;
height: 23px;
z-index: 1;
vertical-align: middle;
background-color: red;
}

#topright {
position: relative;
left: 192px;
height: 23px;
z-index: 2;
vertical-align: middle;
background-color: green;
}
#topleftwhite {
width: 180px;
position: relative;
left: 12px;
height: 23px;
z-index: 3;
vertical-align: middle;
background-color: blue;
}

#toprightblue {
position: relative;
left: 192px;
height: 23px;
z-index: 4;
vertical-align: middle;
background-color: orange;
}

#leftmenu {
position: relative;
left: 12px;
width: 180px;
height: 23px;
z-index: 5;
vertical-align: middle;
background-color: pink;
}

#rightcontent {
position: relative;
left: 192px;
height: 23px;
z-index: 6;
vertical-align: middle;
background-color: yellow;
}

#whitebottomleft {
position: relative;
width: 180px;
left: 12px;
height: 23px;
z-index: 7;
vertical-align: middle;
background-color: gray;
}

#bluerightbottom {
position: relative;
left: 192px;
height: 23px;
z-index: 8;
vertical-align: middle;
background-color: black;
}

#blueleftbottom {
position: relative;
width: 180px;
left: 12px;
height: 23px;
z-index: 9;
vertical-align: middle;
background-color: #FF33FF;

}

#whiterightbottom {
position: relative;
left: 192px;
height: 23px;
z-index: 10;
vertical-align: middle;
background-color: #996600;
}


HTML

<div id="topleft">topleft</div>
<div id="topright">middletop</div>
<div id="topleftwhite">tleftcorner</div>
<div id="toprightblue">bluetop</div>
<div id="leftmenu">menu</div>
<div id="rightcontent"> content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </div>
<div id="whitebottomleft">bleftcorner</div>
<div id="bluerightbottom">bluebottom</div>
<div id="blueleftbottom">bottomleft</div>
<div id="whiterightbottom">middlebottom</div>

Hey!
I got some issues in IE8 (not checked IE7,6)
When I press the "send" button and the form validates, the bottom 2 labels and a checkbox move down about 15px. I think it has to do with my positioning of the calendar icons above and the error messages, havent been able to fix it tho.
http://www.borgweb.se/cvh/boka_rum.php is the address.
The site is in swedish so bare with me, I think you will understand what I mean once you submit the form.
If I then press ctrl-a or select everything with the mouse, the labels go back to their original position.
Any ideas of what can sort this is welcome!
Thanks!

Hello,
I'm trying to make a autostrech page with CSS. I'm having a problem where a DIV jumps down a line instead of compressing.

Here is a link to the problem page:
http://www.nexpost.net/community/te...rall_header.htm

Try resizeing it in your browser. Has anyone had a similar problem? Any fixes? Thanks for any help.

When I switch between pages with images on them, everything is fine.
When I switch between pages without images on them, everything is fine.
But when I switch to or from a page with a picture on it to or from a page without a picture on it, the page jumps sideways a bit.

Most ppl probably wouldn't even notice this, but I find it really annoying and want a good way to get rid of this.

I'm using a centered fixed width css style so I have no idea how this could be happening.

I'll just add the css if needed:

(Any random advice or advice on how to make buttons without photoshop would be awesome too!)

Code:

body {
	background: #FFFF96;
	font-family: Verdana;
	font-size: 14px;
}

td {
	background: #FFFF96;
	font-family: Verdana;
	font-size: 14px;
}

a {
	text-decoration: underline;
	font-family: Verdana;
	font-size: 14px;
}

a:link {
	color:#2828FF;
}

a:visited {
	color:#2828FF;
}

a:hover {
	color:#AFAFFF;
}

a:active {
	color:#AFAFFF;
}

img {
	border: none;
}

#wrapper {
	width: 950px;
	margin-left: auto;
	margin-right: auto;
} 

#title {
	width: 100%;
	font-size: 27px;
	font-style: italic;
	background-image: url("images/bgwinterowl.gif")
}

#links {
	width: 100%;
	padding: 15px;
}

#body1 {
  border: 4 double;
	border-color: red;
	background: #FFFFF0;
	width: 100%;
	text-align: left;
	padding: 15px;
}

#body2 {
	background: #FFFFF0;
	text-align: left;
	padding: 15px 15px 15px 100px;
	width: 500px;
}

Please go to www dot boatgofast dot com in IE8

Keeping mouse off the screen page area, refresh the screen.

Then notice when moving mouse over the screen look how the navigation "jumps" to the left one time.

It does not do this in FF or Chrome and is driving me crazy.

Thanks for any help.

Tom

This one is kicking my ***, if it were up to me i'd leave it as is, but it's not so here we go:

http://www.beverley.com/kennettwip/

the two divs on the right will occasioanally "jump" a few pixels in to the left when reloading the page in IE7 (try it a few times) plus the 2px border on the right is sometimes 3px. It will not do it over the LAN which might mean it's a cache/fetch issue (bottom contents image of the buildings perhaps?!). But because i can't recreate it locally debugging it is a pain.

Any help would be muchly appreciated but in the mean time i'm going to attempt to insert random empty divs and carriage returns to see what happens!

Please go to www dot boatgofaster dot com

If you move your mouse over the page the menu bar jumps to the left about 10 px. Doesn't matter where you move the mouse, the menu jumps. You might need to refresh the screen a couple times to see it.

Would appreciate any help.

Tom

I have a nice little vertical navigation block that I would like to use in multiple pages within the same website. I would like to use the nav block without repeating the code, but I can't figure out how to do it. I have put the code in navigation.htm. What do I do next?

Hello,

I'm new to the forum and not very good with CSS yet. I'm slowly moving from tables to CSS. I set up a sample page to describe the problem I'm having but the forum won't allow me to post the URL here.

I have a vertical CSS "LI" navigation section in the left hand sidebar of this web page and it works perfectly in every Mac browser I try it on (very latest Mac versions of Opera, Firefox, Safari, Chrome, Camino, Omniweb, etc.). There's a white, 1-pixel horizontal spacer/separator line between each link in the left sidebar which is supposed to be 220 pixels wide. It is 220 pixels wide on all the Mac browsers I try it on but for some reason, as soon as I try the web page in IE 7 or IE 8, the white horizontal 1-pixel divider line is shorter and ends up being only 195 pixels wide and throws the whole, nice and "even" look off. I don't understand where the 25 pixels are disappearing to in IE 7 and IE 8.

Can anyone offer any insight as to what the fix may be or what I've done wrong? Below is the code I've used to create the navigation.

Thanks so much.

HTML Code:

Code:

<div id="navcontainer">
	<ul id="navlist">
		<li id="active"><a href="#" id="current">Home</A></li>
		<li><a href="#">On To Page 2</A></li>
		<li><a href="#">On To Page 3</A></li>
		<li><a href="#">On To Page 4</A></li>
		<li><a href="#">On To Page 5</A></li>
	</ul>
</div>

CSS Code:

Code:

#navlist  {
	padding-left: 25px;
	margin-left: 0;
	width: 220px;
}
#navlist li  {
	list-style: none;
	margin: 0;
	padding: 0.25em;
	border-top: 1px solid white;
}
#navlist li a  {
	background: transparent url(../images/list_off.gif) left center no-repeat;
	padding-left: 15px;
	text-align: left;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #277eb1;
	text-decoration: none;
	line-height: 30px;
}
#navcontainer ul li a:hover  {
	background: transparent url(../images/list_on.gif) left center no-repeat;
	color: #da251c;
}
#navcontainer ul li a#current  {
	background: transparent url(../images/list_active.gif) left center no-repeat;
	color: #999999;
}

Hello.

So I'm trying to make my html more semantic, so I'm trying to avoid divs and spans as much as possible. I'm trying to make an unordered list navigation, but it shows up really choppy in IE7. However, the moment I change it from <ul id="navigation"> to <div id="navigation">, it works perfectly. Just for semantics sake I'd like to see if I could keep the ul working. Here's the html code, it validates xhtml strict so you don't have to worry about that.

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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link href="css/global.css" rel="stylesheet" type="text/css" /> 
<title>Eagle Steel Buildings</title> 
</head> 
<body> 
 
<div id="wrapper"> 
<img id="banner" src="images/global/banner.jpg" alt="Eagle Steel Building"/> 
	
	<ul id="navigation"> 
		<li><a href="" class="selected">Home</a></li>		
		<li><a href="">About Us</a></li> 
		<li><a href="">Our Work</a></li> 
		<li><a href="">Free Quote</a></li> 
		<li><a href="">Contact Us</a></li> 
	</ul> 
	
	<h1>Steel Building Construction</h1> 
	
	<h2>Lorem Ipsum</h2> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> 
		
	<h2>Lorem Ipsum</h2> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> 
		
	<h2>Lorem Ipsum</h2> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p>		
 
 
<form id="quoteform" action="quote_home.php" method="post"> 
	<fieldset>
		<label for="name">Name</label><input type="text" name="name" id="name" /> 
		<label for="date">Date</label><input type="text" name="date" id="date" /> 
		<label for="phone">Phone</label><input type="text" name="phone" id="phone" /> 
		<label for="email">Email</label><input type="text" name="email" id="email" /> 
		<label for="location_zip_code">Location Zip Code</label><input type="text" name="location_zip_code" id="location_zip_code" /> 
		<label for="width">Width</label><input type="text" name="width" id="width" /> 
		<label for="length">Length</label><input type="text" name="length" id="length" /> 
		<label for="sidewall_height">Sidewall Height</label><input type="text" name="sidewall_height" id="sidewall_height" /> 	
	</fieldset>
</form> 
 
 
	
	
 
	</div> 
	
</body> 
</html> 

And here's the CSS, also validated.

Code:

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, textarea
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* Begin Page Styles */

.btest{border:1px solid #FFFFFF;}

body {
background: #CCCCCC URL('../images/global/steelbg.jpg') top left;
margin: 0px;
padding: 0px;}

#wrapper{
margin: 0px auto;
width: 1010px; 
height: 1000px;
background: URL('../images/global/wrappershadow.png') repeat-y;}

	#banner{
	display: block;
	margin: 0px auto;
	width: 1000px;
	height: 250px;
	}
	
	#navigation{
	display: block;
	margin: -2px auto 0px;
	width: 1000px;
	height: 38px;
	list-style-type:none;
	background: #000000 URL('../images/global/navbg.png') no-repeat;} 
		
	
	#navigation a{
	float: left;
	height: 39px;
	line-height: 2.3em; 
	margin-top:3px;

	padding-left: 13px;
	padding-right: 13px; 


	font-size: 1.0em;
	font-family: Verdana, serif;
	text-decoration: none;
	font-weight: bold;
	color: #CCCCCC;

	text-align: center;}
	
	
	#navigation a:hover, #navigation a.selected{
	text-decoration: underline;}
	
	#navigation a.selected{
	color: #ff0000;}
	

I have not finished styling the rest of the page, I am only concerned with the navigation right now.

I appreciate your time and effort!

Hey guys I am currently having an issue with a CSS Navigation. I was wondering if anyone was available to help me out.

http://schoolwide.sgajewski.com/menu/

I am currently having an issue with IE 7. It seems to be working in every other browser but the second level of the navigation is offset lower in IE7. The spacing starts off 1 pixel two low and progressively the gap gets wider.

Code:

ul.vertical, ul.vertical li {
	margin:0;
	padding:0;
	list-style-type:none;
	font-size:100%;
	}

ul.vertical {
	position:absolute;
	z-index:1000;
	cursor:default;
	width:180px;
	left:1em;
	top:4.05em;
	}

ul.vertical li {
	position:relative;
	text-align:left;
	cursor:pointer;
	cursor:hand;
	width:180px;
	margin:-1px 0 0 0;
	padding-bottom:0px!important;
	padding-bottom:1px;
	float:left;
	clear:both;
	top:0;
	left:0;
	}

ul.vertical ul {
	z-index:1020;
	cursor:default;
	position:absolute;
	width:197px;
	margin:0 0 0 179px;
	top:-100em;
	left:-1px;
	padding:1px 0 0 0;
	height:0px;
	overflow:hidden;
	}
	
ul.vertical ul li {
	width:197px;
	
	}

ul.vertical ul ul {
	margin: 0 0 0 179px;
	}

@media Screen, Projection { 
	ul.vertical li:hover > ul { top:0; height:auto; overflow:visible; }
	}

ul.vertical a, ul.vertical a:visited {
	display:block;
	cursor:pointer;
	cursor:hand;
	background:url(images/bg.jpg);
	padding:5px 7px;
	font:normal normal bold 0.7em tahoma, verdana, sans-serif;
	color:#008000;
	text-decoration:none;
	letter-spacing:1px;
	}
	
ul.vertical a:hover, ul.vertical a:focus, ul.vertical a.rollover, ul.vertical a.rollover:visited {
	background:url(images/bg_over.jpg);
	color:#806020;
	}

ul.vertical .outtop {background:url(images/bg_over_top.jpg);}
ul.vertical .outbg {background:url(images/bg_over_mid.jpg);}
ul.vertical .outbot {background:url(images/bg_over_bot.jpg);}

ul.vertical ul a,
ul.vertical ul a:hover,
ul.vertical ul a:visited,
ul.vertical ul a:active
ul.vertical ul a:hover, 
ul.vertical ul a:focus, 
ul.vertical ul a.rollover, 
ul.vertical ul a.rollover:visited

{
background-image:none;
}

@media screen, projection {
	* html ul.vertical li {
		display:inline; 
		f\loat:left; 
		background:#ffffff; 
		}
	}
* html ul.vertical li { position:static; }
* html ul.vertical a { position:relative; }
ul[class^="vertical"] ul { display:none; }
ul[class^="vertical"] ul { displa\y:block; }

Any help on why this is offset in IE7 would be great. Thanks in advance.

I'm pretty new to CSS, but I've managed to put together a website based from a psd, that validates and everything has gone well.

My menu, however, is pretty shoddy. I have everything positioned the way I want it, but what I want to do is convert the lists inside from dropping down to being horizontal parallell to the nav bar itself.

From:
--- --- --- ---
|
|
To:
_ _ _
--- --- --- ---



The site is here. Ignore the issues with the absolute positioning; its because of the ads at the top, and it doesn't affect the nav bar.


I am desperatefor some help, it is ridiculous to figure out. Anyone who can help me, I would be crazy grateful. Thanks,

Tom

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
	<style type="text/css">
/*BEGINNING OF CSS*/

body{
	padding: 0px;
	background-color: #000000;
	font-family: Verdana;
	color: #FFFFFF;
	text-align: center;
	}
	
	
div.container	{
	margin: 0 auto;
	padding: 0px;
	width: 1024px;
	text-align: left;
	}

div.left {
	float: left;
}

div.right {
	float: right;
}
	
div.logo {
	margin: 0 auto;
	background-position: top center;
	text-align: center;
	}
	
div.header {
	text-align: center;
	padding-top: 0px;
}

div.navigation	{
	background-color: #000000; 
	background-image: url(http://i39.tinypic.com/igm16v.jpg);
	overflow: auto;
}

div.content	{
	background-color: #000000;
	background-image: url(http://i39.tinypic.com/2ce2qus.jpg);
	overflow: auto;
	height: 525px;
	margin: 0 auto;
}

div.footer	{
	background-color: transparent;
	background-image: url(http://i39.tinypic.com/2vjsbrp.jpg);
	overflow: auto;
	height: 290px;
	padding: 0px;
	margin: 0 auto;
}
	
p.head	{
	text-align: left;
	font-size: 24px;
	}
	
p.content	{
	position: relative;
	font-size: 12px;
}

a.main	{
	text-decoration: none;
	font-size: 18px;
	padding: 8px;
	color: #FFFFFF;
	background-color: transparent;
	}
	
a.sub	{
	font-size: 16px;
	line-height: 150%;
	text-align: left;
	text-decoration: none;
	color: #999999;
	background-color: transparent;
	}
	
a.plain	{
	text-decoration: none;
	font-size: 12px;
	color: #FFFFFF;
	background-color: transparent;
	}
	
a.plainfoot	{
	text-decoration: none;
	font-size: 12px;
	color: #959595;
	opacity: 90%;
	background-color: transparent;
	border-bottom: 1px solid #0d0f10;
	opacity: 100%;
	}
	
#nav, #nav ul {
	margin: 0 auto;
	padding: 0px;
	list-style: none;
}

#nav a.main {
	display: block;
	margin-left: 5px;
}

#nav a.sub {
	display: block;
	width: 150px;
	margin-left: 5px;
}


#nav li {
	float: left;
	width: 5em;
}
#nav li ul {
	position: absolute;
	width: 1em;
	left: -999em;
}

#nav li:hover ul {
	left: auto;
}

#nav li ul {
	position: absolute;
	padding: 7px;
	width: 1em;
	left: -999em;
}

#nav li:hover ul {
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	font-family: lucida grand;
}

h1.footer	{
	position: relative;
	font-size: 18px;
	color: #123712;
	margin-bottom: 0%;
	margin-left: 50px;
}

p.footer	{
	font-size: 12px;
	color: #909090;
	margin-left: 50px;
	max-width: 200px;
	text-decoration: none;
}

h1.main	{
	font-size: 28px;
	font-weight: 200;
	margin-left: 140px;
	padding: 0;
	text-shadow: #959595;
}

p.content	{
	font-size: 12px;
	color: #FFFFFF;
	line-height: 130%;
	margin-left: 140px;
	max-width: 450px;
	text-decoration: none;
	
}

div.date	{
	background-color: transparent;
	background-image: url(http://i39.tinypic.com/xnc3de.jpg);
	background-repeat: no-repeat;
	padding: 0px;
	margin-top: 17px;
	margin-left: 0px;
}

h1.main2	{
	font-size: 28px;
	font-weight: 200;
	margin-left: 140px;
	text-shadow: #959595;
}

p.content2	{
	font-size: 12px;
	line-height: 130%;
	margin-left: 140px;
	max-width: 450px;
	text-decoration: none;
}

div.date2	{
	background-color: transparent;
	background-image: url(http://i39.tinypic.com/xnc3de.jpg);
	background-repeat: no-repeat;
	padding: 0px;
	min-height: 100px;
	margin: 0px;
}

div.sidebar	{
	background-color: transparent;
	background-image: url(http://i41.tinypic.com/2r76kpu.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	padding: 0px;
	min-height: 200px;
	margin-top: 15px;
	margin-right: 15px;
}



div.datetext1	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 12px;
	font-weight: 200;
	color: #FFFFFF;
	left: auto;
	top: 382px;
	padding-top: 262px;
	padding-left: 44px;
}
div.dateid1	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 24px;
	font-weight: 300;
	color: #123712;
	left: auto;
	top: 382px;
	padding-top: 281px;
	padding-left: 47px;
}
div.datetext2	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 12px;
	font-weight: 200;
	color: #FFFFFF;
	left: auto;
	top: 382px;
	padding-top: 44px;
	padding-left: 44px;
}
div.dateid2	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 24px;
	font-weight: 300;
	color: #123712;
	left: auto;
	top: 382px;
	padding-top: 63px;
	padding-left: 47px;
}
div.sidebarhead	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 18px;
	font-weight: 200;
	color: #123712;
	text-align: center;
	left: auto;
	top: 400px;
	padding-top: 15px;
	padding-left: 630px;
}
div.sidebartext	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	line-height: 130%;
	text-align: left;
	max-width: 168px;
	left: auto;
	top: 400px;
	padding-top: 50px;
	padding-left: 610px;
}




	
/*END OF CSS*/
	</style>
	<script type="text/javascript">
	sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
	</script>
	
<title>Obsidian Recording Front Page</title>
	</head>
<body>
						
<div class="container">
	
	
	<div class="left">
	<img src="http://i39.tinypic.com/14j6nsz.jpg" alt="left column"/>
	</div>
	
	
	<div class="right">
	<img src="http://i40.tinypic.com/b4yir5.jpg" alt="right column"/>
	</div>
	
	
	<div class="logo">
	<img src="http://i40.tinypic.com/2u77lua.jpg" alt="logo"/>
	</div>
	
	
	<div class="header">
	<img src="http://i41.tinypic.com/1178qo6.jpg" alt="header"/>
	</div>
	
	<div class="navigation">
	
	
<ul id="nav">
	
	<li><a class="main" href="http://www.obsidianrecording.com">Home</a></li>
	<li><a class="main" href="#">Music</a>
		<ul>
			<li><a class="sub" href="http://www.obsidianrecording.com/featured">Featured</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/artists">Artists</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/artists/thisisthefall">My Band</a></li>
		</ul>
		</li>
	<li><a class="main" href="http://www.obsidianrecording.com/design">Design</a></li>
	<li><a class="main" href="#">Store</a>
		<ul>
			<li><a class="sub" href="http://www.obsidianrecording.com/store/recording">Recording</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/store/design">Design</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/store/music">Music</a></li>
		</ul>
	</li>
	<li><a class="main" href="#">About</a>
		<ul>
			<li><a class="sub" href="http://www.obsidianrecording.com/about/rates">The Rates</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/about/studio">The Studio</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/about/tomhoneyman">Tom Honeyman</a></li>
		</ul>
	</li>
</ul>	

	</div>
	
	<div class="content"
		<div class="date">
		
		<div class="sidebar"
		<h1 class="main">Cast into Shadows</h1>
		<p class="content">The first band ever to record at Obsidian Recording was Cast into Shadows. I'd like to shout out to Donnie, Evan, Josh, Brian, and J.T. for being the first group to come through here and for making a kickass record along the way. You can find more about them in the Artists section of the site.</p>
		</div>
		</div>
		
		<div class="date2">
		<h1 class="main2">Website Launched!</h1>
		<p class="content2">After a looong time working on this site, I've finally finished just in time for summer!  What you can expect is a lot of updates on what artists who record here are doing, free downloads, cool videos of their shows, special rates just for people who visit the site, and more.  If you'd like  to contact me, all my information and more is in the About section of the site. <br /><br /> Thanks for visiting, and I hope you enjoy!</p>
		</div>
		<div class="datetext1">Jun</div>
		<div class="dateid1">1</div>
		<div class="datetext2">Jun</div>
		<div class="dateid2">7</div>
		<div class="sidebarhead">New Website!</div>
		<div class="sidebartext">Welcome to the all-new Obsidian Recording site! I will regularly update with news, special rates, videos, featured free downloads, and more.</div>
		</div>
	
	<div class="footer">
	<br /><br /><br />
	<h1 class="footer">Recent Projects</h1>
	<p class="footer"><a class="plainfoot" href="www.obsidianrecording.com/artists/castintoshadows">Cast into Shadows</a><br /><br /><a class="plainfoot" href="http://www.obsidianrecording.com/artists/thisisthefall">This is the Fall</a></p>
	</div>

</div>							
</body>
</html>

hi, i was wondering if anyone knw any links to ultra super dooper cool websites for css navigations.

I want to learn how to do ace ones. I have already googleed about, I found the sliding doors on ALA an stuff but i need that little bit more cool

tutorials prefrably!!

I did find one cool one athttp://www.bulkherbstore.com/

thanks
tom.

How is this navigation done on the top of the page? I looked at the CSS and all the javascript. I can't see how the drop down is created? I tried to replicate it and copied the background images. I can get the menu to show and rollovers work. Just the drop down won't work. http://jmadvertising.com/

Hi devshed,

First post here so I hope someone wouldn't mind giving me some help with a layout problem I'm having which I think is probably CSS related.

The navbar div should be at the top of the maincontent div and to the right of the sidebar div with no gaps.

I can get the desired results in FF but in IE there is a whitespace gap between the top of maincontent and navbar divs.

Unfortunately I don't have it online yet to show you because I need to upgrade my hosting package first.

If anyone can spare a few minutes and make any suggestions I would be very grateful.

Many Thanks

Jez

HTML:
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=utf-8" />

<title>Mseis</title>

<link href="includes/layout.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColHybLtHdr #sidebar1 { padding-top: 30px; }
.twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; }

/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]--></head>

<body class="twoColHybLtHdr">

<div id="container">
  <div id="header">
<?php include("includes/header.php"); ?>
  <!-- end #header --></div>
  <div id="sidebar1" align="center">
<?php include("includes/menu.php"); ?>
    <!-- end #sidebar1 -->
  </div>
  <div id="mainContent">
  <div id="navbar">
  This is the navbar
  </div>
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
	<!-- end #mainContent --></div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
	<br class="clearfloat" />
	<div id="footer">
<?php include("includes/footer.php"); ?>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

CSS:
Code:

@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #633C91;
}
.twoColHybLtHdr #container { 
	width: 80%;  /* this will create a container 80% of the browser width */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	min-width: 800px;
} 
.twoColHybLtHdr #header { 
	background: #DDDDDD; 
	padding: 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 

.twoColHybLtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

/* Tips for sidebar1:
1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the overall width for standards compliant browsers creating an unknown actual width. 
2. Since em units are used for the sidebar value, be aware that its width will vary with different default text sizes.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColHybLtHdr #sidebar1 p" rule.
*/
.twoColHybLtHdr #sidebar1 {
	float: left; 
	width: 12em; /* since this element is floated, a width must be given */
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 15px 0; /* top and bottom padding create visual space within this div  */
}
.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
}

/* Tips for mainContent:
1. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. Be aware it is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) if an element wider than it can contain is placed within the mainContent div. WIth a hybrid layout (percentage-based overall width with em-based sidebar), it may not be possible to calculate the exact width available. If the user's text size is larger than average, you will have a wider sidebar div and thus, less room in the mainContent div. You should be aware of this limitation - especially if the client is adding content with Contribute.
3. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This may help avoid several IE-specific bugs.
*/
.twoColHybLtHdr #mainContent { 
	margin: 0 20px 0 13em; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
} 

.twoColHybLtHdr #navbar { 
	background: #AAAAAA;
	margin: 0px -20px 0 -20px;
	padding: 1px 20px 1px 20px;
} 

.twoColHybLtHdr #navbar a a:link a:visited {
	color:#FF0000;
	text-decoration:none;
	font-size: small;	
} 

.twoColHybLtHdr #navbar a:hover a:active { 
	color:#FF0000;
	text-decoration:underline;
	font-size: small;
}

.twoColHybLtHdr #footer { 
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#DDDDDD;
} 
.twoColHybLtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}

/* Custom CSS */

.msgreen {
color: #BEDA57;
}

.msblue {
color: #81C4E2;
}

.mspurple {
color: #633C91;
}

.failed {
color: #FF0000;
}


h1 {
color: #BEDA57;
}

h2 {
color: #81C4E2;
}

fieldset {  
margin: 1.5em 0 0 0;  
padding: 0; 
background-color: #81C4E2;
}  
legend {  
margin-left: 1em;  
color: #633C91;  
font-weight: bold;  
}  
fieldset ol {  
padding: 1em 1em 0 1em;  
list-style: none;  
}  
fieldset li {  
padding-bottom: 1em;  
}  
fieldset.submit {  
border-style: none; 
background-color: transparent;
}
label {    
display: block;
color: #633C91;
}
input.btn {
border: 1px solid;
background-color: #81C4E2;
color: #633C91;
font: bold 80%;
}
input.btnhov{
border-color: #FF0000;
}