jodmcc
September 21, 2010, 9:41pm
1
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
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>
jodmcc
September 23, 2010, 10:33pm
2
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.
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%; 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 & Rodeo and the Houston Livestock Show & Rodeo World's Championship Bar-B-Que Contest for many, many years.</p>
</div><!--end bodycontent-->
</div
</body>
</html>
ralphm
September 23, 2010, 11:46pm
3
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:
#bodycontent {float: left;}
or
#bodycontent {clear: both;}
ralphm
September 23, 2010, 5:43am
4
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
September 23, 2010, 3:35am
5
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
September 22, 2010, 1:27am
6
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
You’re just trying to do a dropdown? (That’s what I gathered)
There are many tutorials on how to do this
Can you give us a live example so we can see what’s not working right?
system
September 21, 2010, 10:33pm
9
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
<!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%; 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>
Depending on the context used, it contains the floated elements allowing adjacent elements to clear themselves from the floats
ralphm
September 22, 2010, 4:31am
11
Are you talking about something like this?
<!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
September 22, 2010, 4:17am
12
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.
