Problems with floated navigation

**jodmcc** · Sep 21, 2010 14:41

I'm going from a tutorial from 456 Berea St. on lists as navigation and everything seems to going fine so far, but what I'm also trying to achieve is a submenu that will only be on 1 page and will sit below the main menu list. Right now I have a bullet from the submenu following after the main menu and it should be with the submenu. Is this needing a clear declaration? Also when I tried validation I got a short tag warning for the closing </body>, yet it was typed in correctly. Any help would be great.

jodmcc

Code:

CSS:

#wrap { width: 720px; border: solid 1px black }
body  { font-family: helvetica, arial, sans-serif; font-size: 1em; }
#header   { }
#menu { margin:0; padding:0; bacground: #ce4eef; float: left; width: 100%; border: 1px solid #42432d; border-width: 1px 0; }
#menu li { display:inline; margin:0; padding:0; }
#menu a:link, #menu a:visited { color: #000000; background: #ce4eef; padding: 20px 10px 4px 10px; float: left; width: auto; border-right: 1px solid #42432d; text-decoration: none; font: bold 1em/1em Arial, Helvetica, sans-serif; text-transform: uppercase; text-shadow: 2px 2px 2px #555555; }
#menu li:first-child a { border-left: 1px solid #42432d; }
#menu a:hover, #menu a:focus { color: #ffffff; background: #4ebeef; }
#home #menu-home a, #members #menu-members a, #packages #menu-packages a, #underwriters #menu-underwriters a, #contact #menu-contact a { background: #ef7e4e; color: #ffffff; text-shadow: none; }
#home #menu-home a:hover, #members #menu-members a:hover, #packages #menu-packages a:hover, #underwriters #menu-underwriters a:hover, #contact #menu-contact a:hover { background: #ef7e4e; }
#menu a:active {background: #ef7e4e; color: #ffffff; }
</style>

HTML:

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

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<meta name="generator" content="Adobe GoLive">
		<title>Renegades Cooking Team, Houston, Texas</title>
</head>

<body>
<div id="wrap">
<div id="header">
				<img src="../images/skull_sunburst.gif" alt="" height="120" width="150" border="0"><img src="../images/renegadespageheader.png" alt="" height="120" width="415" border="0"></div>
	<ul id="menu">
       <li id="menu-home"><a href="#">Home</a></li>
       <li id="menu-members"><a href="#">Members</a></li>
       <li id="menu-packages"><a href="#">Underwriter Packages</a></li>
       <li id="menu-underwriters"><a href="#">Underwriters</a></li>
       <li id="menu-contact"><a href="#">Contact Us</a></li>
    </ul>
	<ul id="submenu">
		<li><a href="#" target="_blank">2000</a></li>
		<li><a href="#" target="_blank">2001</a></li>
		<li><a href="#" target="_blank">2002</a></li>
		<li><a href="#" target="_blank">2003</a></li>
		<li><a href="#" target="_blank">2004</a></li>
		<li><a href="#" target="_blank">2005</a></li>
		<li><a href="#" target="_blank">2006</a></li>
		<li><a href="#" target="_blank">2007</a></li>
		<li><a href="#" target="_blank">2008</a></li>
		<li><a href="#" target="_blank">2009</a></li>
		<li><a href="#" target="_blank">2010</a></li>
</ul>
	<div id="bodycontent"><!--start bodycontent-->
	</div
	</body>

</html>

**noonnope** · Sep 21, 2010 15:33

well, you have no matching close tag for <div id="wrap">, and you have an incorrect </div above </body>.

starting from the code bellow, what is it you are trying to do? i didn't understand very much

HTML Code:

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

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<meta name="generator" content="Adobe GoLive">
		<title>Renegades Cooking Team, Houston, Texas</title>
<style>
#wrap { width: 720px; border: solid 1px black }
body  { font-family: helvetica, arial, sans-serif; font-size: 1em; }
#header   { }
#menu { margin:0; padding:0; bacground: #ce4eef; float: left; width: 100&#37;; border: 1px solid #42432d; border-width: 1px 0; }
#menu li { display:inline; margin:0; padding:0; }
#menu a:link, #menu a:visited { color: #000000; background: #ce4eef; padding: 20px 10px 4px 10px; float: left; width: auto; border-right: 1px solid #42432d; text-decoration: none; font: bold 1em/1em Arial, Helvetica, sans-serif; text-transform: uppercase; text-shadow: 2px 2px 2px #555555; }
#menu li:first-child a { border-left: 1px solid #42432d; }
#menu a:hover, #menu a:focus { color: #ffffff; background: #4ebeef; }
#home #menu-home a, #members #menu-members a, #packages #menu-packages a, #underwriters #menu-underwriters a, #contact #menu-contact a { background: #ef7e4e; color: #ffffff; text-shadow: none; }
#home #menu-home a:hover, #members #menu-members a:hover, #packages #menu-packages a:hover, #underwriters #menu-underwriters a:hover, #contact #menu-contact a:hover { background: #ef7e4e; }
#menu a:active {background: #ef7e4e; color: #ffffff; }
</style>
</head>

<body>
<div id="wrap">
<div id="header">
				<img src="../images/skull_sunburst.gif" alt="" height="120" width="150" border="0"><img src="../images/renegadespageheader.png" alt="" height="120" width="415" border="0"></div>
	<ul id="menu">
       <li id="menu-home"><a href="#">Home</a></li>
       <li id="menu-members"><a href="#">Members</a></li>
       <li id="menu-packages"><a href="#">Underwriter Packages</a></li>
       <li id="menu-underwriters"><a href="#">Underwriters</a></li>
       <li id="menu-contact"><a href="#">Contact Us</a></li>
    </ul>
	<ul id="submenu">
		<li><a href="#" target="_blank">2000</a></li>
		<li><a href="#" target="_blank">2001</a></li>
		<li><a href="#" target="_blank">2002</a></li>
		<li><a href="#" target="_blank">2003</a></li>
		<li><a href="#" target="_blank">2004</a></li>
		<li><a href="#" target="_blank">2005</a></li>
		<li><a href="#" target="_blank">2006</a></li>
		<li><a href="#" target="_blank">2007</a></li>
		<li><a href="#" target="_blank">2008</a></li>
		<li><a href="#" target="_blank">2009</a></li>
		<li><a href="#" target="_blank">2010</a></li>
</ul>
	<div id="bodycontent"><!--start bodycontent-->
	</div>
  </div>
	</body>

</html>

**Stevie D** · Sep 21, 2010 15:38

Can you give us a live example so we can see what's not working right?

**RyanReese** · Sep 21, 2010 15:49

You're just trying to do a dropdown? (That's what I gathered)

There are many tutorials on how to do this

**jodmcc** · Sep 21, 2010 18:27

I'm not trying to do a drop down.

Example: This will be on all pages:

Home Members Packages Underwriters Contact Us

This will be below only on "Underwriters" page:

2000 2001 2002 2003 2004 2005 2006 2007 2008 2009

**jodmcc** · Sep 21, 2010 21:17

Similar to the menu on this site. The main menu: HOME PRODUCTS COURSES FORUMS, etc., but when you click FORUMS you get the second menu: MySitePoint Newsletter FAQS, etc.

**ralph.m** · Sep 21, 2010 21:31

Are you talking about something like this?

Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
#wrap { width: 800px; border: solid 1px black; overflow: hidden; }
body  { font-family: helvetica, arial, sans-serif; font-size: 1em; }
#header   { }
#menu { margin:0; padding:0; bacground: #ce4eef; float: left; width: 100%; border: 1px solid #42432d; border-width: 1px 0; }
#menu li { display:inline; margin:0; padding:0; }
#menu a:link, #menu a:visited { color: #000000; background: #ce4eef; padding: 20px 10px 4px 10px; float: left; width: auto; border-right: 1px solid #42432d; text-decoration: none; font: bold 1em/1em Arial, Helvetica, sans-serif; text-transform: uppercase; text-shadow: 2px 2px 2px #555555; }
#menu li:first-child a { border-left: 1px solid #42432d; }
#menu a:hover, #menu a:focus { color: #ffffff; background: #4ebeef; }
#home #menu-home a, #members #menu-members a, #packages #menu-packages a, #underwriters #menu-underwriters a, #contact #menu-contact a { background: #ef7e4e; color: #ffffff; text-shadow: none; }
#home #menu-home a:hover, #members #menu-members a:hover, #packages #menu-packages a:hover, #underwriters #menu-underwriters a:hover, #contact #menu-contact a:hover { background: #ef7e4e; }
#menu a:active {background: #ef7e4e; color: #ffffff; }

#submenu {
	float: left;
	list-style: none;
	margin: 10px 0 10px 10px;
	padding: 0;
}

#submenu li {
	float: left;
	margin-right: 25px;
}

</style>

</head>




<body>
<div id="wrap">
<div id="header">
				<img src="../images/skull_sunburst.gif" alt="" height="120" width="150" border="0"><img src="../images/renegadespageheader.png" alt="" height="120" width="415" border="0"></div>
	<ul id="menu">
       <li id="menu-home"><a href="#">Home</a></li>
       <li id="menu-members"><a href="#">Members</a></li>
       <li id="menu-packages"><a href="#">Underwriter Packages</a></li>
       <li id="menu-underwriters"><a href="#">Underwriters</a></li>
       <li id="menu-contact"><a href="#">Contact Us</a></li>
    </ul>
	<ul id="submenu">
		<li><a href="#" target="_blank">2000</a></li>
		<li><a href="#" target="_blank">2001</a></li>
		<li><a href="#" target="_blank">2002</a></li>
		<li><a href="#" target="_blank">2003</a></li>
		<li><a href="#" target="_blank">2004</a></li>
		<li><a href="#" target="_blank">2005</a></li>
		<li><a href="#" target="_blank">2006</a></li>
		<li><a href="#" target="_blank">2007</a></li>
		<li><a href="#" target="_blank">2008</a></li>
		<li><a href="#" target="_blank">2009</a></li>
		<li><a href="#" target="_blank">2010</a></li>
</ul>
	<div id="bodycontent"><!--start bodycontent-->
	</div>


</body>

</html>

**jodmcc** · Sep 22, 2010 20:35

Thanks Ralph,

Was it changing the width on the wrap div and adding the overflow:hidden all that was done? I have never used the overflow property. What does it do?

Thanks,
jodmcc

**RyanReese** · Sep 22, 2010 20:46

Depending on the context used, it contains the floated elements allowing adjacent elements to clear themselves from the floats

**ralph.m** · Sep 22, 2010 22:43

Originally Posted by jodmcc

Was it changing the width on the wrap div and adding the overflow:hidden all that was done? I have never used the overflow property. What does it do?

I floated the list items and a few other things. As Ryan said, one handy use of overflow:hidden is to force an element to wrap around its floated contents.

**jodmcc** · Sep 23, 2010 15:33

This CSS is about to drive me crazy!!! The navigation looks great, but now my body content is running into my navigation. I thought learning to do this the right way would be easier, but now I starting to rethink that. I know I should not use tables for non-tabular content, but dang if I had any hair left, it would surely be gone by now! Any help would be great.

Code:

CSS:

#wrap { width: 800px; border: solid 1px black; overflow: hidden; }
body  { font-family: helvetica, arial, sans-serif; font-size: 1em; }
#header   { }
#menu { margin:0; padding:0; bacground: #ce4eef; float: left; width: 100&#37;; border: 1px solid #42432d; border-width: 1px 0; }
#menu li { display:inline; margin:0; padding:0; }
#menu a:link, #menu a:visited { color: #000000; background: #ce4eef; padding: 20px 10px 4px 10px; float: left; width: auto; border-right: 1px solid #42432d; text-decoration: none; font: bold 1em/1em Arial, Helvetica, sans-serif; text-transform: uppercase; text-shadow: 2px 2px 2px #555555; }
#menu li:first-child a { border-left: 1px solid #42432d; }
#menu a:hover, #menu a:focus { color: #ffffff; background: #4ebeef; }
#home #menu-home a, #members #menu-members a, #packages #menu-packages a, #underwriters #menu-underwriters a, #contact #menu-contact a { background: #ef7e4e; color: #ffffff; text-shadow: none; }
#home #menu-home a:hover, #members #menu-members a:hover, #packages #menu-packages a:hover, #underwriters #menu-underwriters a:hover, #contact #menu-contact a:hover { background: #ef7e4e; }
#menu a:active {background: #ef7e4e; color: #ffffff; }

#submenu {
	float: left;
	list-style: none;
	margin: 10px 0 10px 10px;
	padding: 0;
}

#submenu li {
	float: left;
	margin-right: 25px;
}

</style>


HTML:

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

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<title>Renegades Cooking Team, Houston, Texas</title>
	</head>

	<body>
	<div id="wrap">
	<div id="header">
				<img src="../images/skull_sunburst.gif" alt="" height="120" width="150" border="0"><img src="../images/renegadespageheader.png" alt="" height="120" width="415" border="0"></div>
	<ul id="menu">
       <li id="menu-home"><a href="#">Home</a></li>
       <li id="menu-members"><a href="#">Members</a></li>
       <li id="menu-packages"><a href="#">Underwriter Packages</a></li>
       <li id="menu-underwriters"><a href="#">Underwriters</a></li>
       <li id="menu-contact"><a href="#">Contact Us</a></li>
    </ul>
	<ul id="submenu">
		<li><a href="#" target="_blank">2000</a></li>
		<li><a href="#" target="_blank">2001</a></li>
		<li><a href="#" target="_blank">2002</a></li>
		<li><a href="#" target="_blank">2003</a></li>
		<li><a href="#" target="_blank">2004</a></li>
		<li><a href="#" target="_blank">2005</a></li>
		<li><a href="#" target="_blank">2006</a></li>
		<li><a href="#" target="_blank">2007</a></li>
		<li><a href="#" target="_blank">2008</a></li>
		<li><a href="#" target="_blank">2009</a></li>
		<li><a href="#" target="_blank">2010</a></li>
</ul>
	<div id="bodycontent"><!--start bodycontent-->
	<p>Our group consists of friends and family members who have been involved in the Houston Livestock Show &amp; Rodeo and the Houston Livestock Show &amp; Rodeo World's Championship Bar-B-Que Contest for many, many years.</p>
	</div><!--end bodycontent-->
	</div
	</body>

</html>

**ralph.m** · Sep 23, 2010 16:46

Don't panic; these things are easy to fix.

I would probably place the ULs together in their own div and give that div overflow: hidden. However, you can also just do either of these instead:

Code:

#bodycontent {float: left;}

or

Code:

#bodycontent {clear: both;}

User Tag List

Thread: Problems with floated navigation

Thread Tools

Display

Problems with floated navigation

Bookmarks

Bookmarks

Posting Permissions