Jump to content

Forcing menu's to bottom of header


teckn1caLity

Recommended Posts

I need some help on how to force my menu's to the bottom of the header so I can import a logo on top of it.

 

http://i31.tinypic.com/11c5w95.jpg

 

The dark grey is the header and I want the menu's to be forced to the bottom of it.

 

<!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 profile="http://gmpg.org/xfn/11">	
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />		

<title>
<?php 
wp_title( '-', true, 'right' ); 
echo wp_specialchars( get_bloginfo('name'), 1 ) 
?>
</title>	

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />	

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />	

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />	

<?php if ( is_singular() ) { 
wp_enqueue_script( 'comment-reply' ); } ?>	

<?php wp_head(); ?>
</head>

<body>
<div id="wrapper">	
<div id="header">		
<img src="http://thesidetracked.com/wp-content/uploads/2009/09/tstv3logo1.png" align="left">	
<ul id="">			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Professional series drop#2</title>
<style type="text/css">

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
.preload2 {background: url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4.gif);}
.menu2 {
padding:0 0 0 32px; 
margin:0; 
list-style:none; 
height:40px;
background:#fff url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button1a.gif) repeat-x; 
position: relative;
font-family:arial, verdana, sans-serif; 
}
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(http://thesidetracked.com/wp-content/themes/unsleepable/images/down.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4a.gif) no-repeat right top;}

.menu2 li:hover > a.top_link {color:#fff; background: url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(http://thesidetracked.com/wp-content/themes/unsleepable/images/button4a.gif) no-repeat right top;}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul, 
.menu2 :hover ul ul, 
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:2px; top:40px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; height:auto;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub li a.fly {background:#fff url(http://thesidetracked.com/wp-content/themes/unsleepable/images/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#4ab url(http://thesidetracked.com/wp-content/themes/unsleepable/images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(http://thesidetracked.com/wp-content/themes/unsleepable/images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;}
</style>
</head>

<body>
<span class="preload2"></span>

<ul class="menu2">
<li class="top"><a href="http://www.cssplay.co.uk" id="home" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span class="down">Products</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li><a href="../menu/" class="fly">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li><a href="../mozilla/">Nikon</a></li>
					<li><a href="../ie/">Minolta</a></li>
					<li><a href="../opacity/">Pentax</a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li class="mid"><a href="../boxes/" class="fly">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li><a href="../mozilla/">Wide Angle</a></li>
					<li><a href="../ie/">Standard</a></li>
					<li><a href="../opacity/">Telephoto</a></li>
					<li><a href="../menu/" class="fly">Zoom<!--[if gte IE 7]><!--></a><!--<![endif]-->
						<!--[if lte IE 6]><table><tr><td><![endif]-->
						<ul>
							<li><a href="../mozilla/">35mm to 125mm</a></li>
							<li><a href="../opacity/">50mm to 250mm</a></li>
							<li><a href="../menu/">125mm to 500mm</a></li>
						</ul>
						<!--[if lte IE 6]></td></tr></table></a><![endif]-->
					</li>
					<li><a href="../boxes/">Mirror</a></li>
					<li><a href="../opacity/" class="fly">Non standard<!--[if gte IE 7]><!--></a><!--<![endif]-->
						<!--[if lte IE 6]><table><tr><td><![endif]-->
						<ul>
							<li><a href="../mozilla/">Bayonet mount</a></li>
							<li><a href="../opacity/">Screw mount</a></li>
						</ul>
						<!--[if lte IE 6]></td></tr></table></a><![endif]-->
					</li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li><a href="../mozilla/">Flash Guns</a></li>
		<li><a href="../ie/">Tripods</a></li>
		<li><a href="../opacity/">Filters</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li><a href="../menu/">Printing</a></li>
		<li><a href="../layouts/">Photo Framing</a></li>
		<li><a href="../boxes/">Retouching</a></li>
		<li><a href="../mozilla/">Archiving</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="contacts" class="top_link"><span class="down">Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li><a href="../layouts/">Support</a></li>
		<li><a href="../boxes/" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li><a href="../mozilla/">USA</a></li>
				<li><a href="../ie/">Canadian</a></li>
				<li><a href="../opacity/">South American</a></li>
				<li><a href="../menu/" class="fly">European<!--[if IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul>
						<li><a href="../mozilla/" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]-->
							<!--[if lte IE 6]><table><tr><td><![endif]-->
							<ul>
								<li><a href="../ie/">London</a></li>
								<li><a href="../menu/">Liverpool</a></li>
								<li><a href="../boxes/">Glasgow</a></li>
								<li><a href="../opacity/" class="fly">Bristol<!--[if gte IE 7]><!--></a><!--<![endif]-->
									<!--[if lte IE 6]><table><tr><td><![endif]-->
									<ul>
										<li><a href="../ie/">Redland</a></li>
										<li><a href="../opacity/">Hanham</a></li>
										<li><a href="../menu/">Eastville</a></li>
									</ul>
									<!--[if lte IE 6]></td></tr></table></a><![endif]-->
								</li>
								<li><a href="../layouts/">Cardiff</a></li>
								<li><a href="../mozilla/">Belfast</a></li>
							</ul>
							<!--[if lte IE 6]></td></tr></table></a><![endif]-->
						</li>
						<li><a href="../opacity/">French</a></li>
						<li><a href="../menu/">German</a></li>
						<li><a href="../boxes/">Spanish</a></li>
					</ul>
					<!--[if lte IE 6]></td></tr></table></a><![endif]-->
				</li>
				<li><a href="../boxes/">Australian</a></li>
				<li><a href="../boxes/">Asian</a></li>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li><a href="../mozilla/">Buying</a></li>
		<li><a href="../ie/">Photographers</a></li>
		<li><a href="../opacity/">Stockist</a></li>
		<li><a href="../menu/">General</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="shop" class="top_link"><span class="down">Shop</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li><a href="../ie/">Online</a></li>
		<li><a href="../opacity/">Catalogue</a></li>
		<li><a href="../menu/">Mail Order</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
</div>	

</body>
</html>

</ul>	

Link to comment
Share on other sites

okay you document is formated all wrong:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

 

<title>

<?php

wp_title( '-', true, 'right' );

echo wp_specialchars( get_bloginfo('name'), 1 )

?>

</title>

 

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

 

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

 

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

 

<?php if ( is_singular() ) {

wp_enqueue_script( 'comment-reply' ); } ?>

 

<?php wp_head(); ?>

</head>

a)that should all be in the head tag which should be in the html tag

b) your nested all wrong, and not all your tags have a closing tag this means you Code is invalid

<body>

<div id="wrapper">

<div id="header">

<img src="http://thesidetracked.com/wp-content/uploads/2009/09/tstv3logo1.png" align="left">

<ul id="">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title> Stu Nicholls | CSSplay | Professional series drop#2</title>

<style type="text/css">

c) your head cannot be in your body it has to be before

d)you have a second doctype declaration which you cant do

e)you have a second title your only aloud one of those per a document

 

<body>

<span class="preload2"></span>

 

<ul class="menu2">

 

you cant have 2 body tags eather

 

</div>

 

</body>

</html>

 

</ul>

 

the </ul> must go before body and html or i can guaranty its nested

 

that may not solve your problem but it just might that code is pretty messed up

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.