SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problems with floated navigation

    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>

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Can you give us a live example so we can see what's not working right?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're just trying to do a dropdown? (That's what I gathered)

    There are many tutorials on how to do this
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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

  6. #6
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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>

  8. #8
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Depending on the context used, it contains the floated elements allowing adjacent elements to clear themselves from the floats
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jodmcc View Post
    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.

  11. #11
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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>
    Last edited by jodmcc; Sep 23, 2010 at 15:34. Reason: forgot code end tag

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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;}


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •