Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Codeasaurus Rex
    Join Date
    Jun 2008
    Location
    Redmond, WA
    Posts
    659
    Thanks
    31
    Thanked 100 Times in 94 Posts

    Unhappy SOS - CSS Dropdown menu woes

    Hello all,

    I'm spinning in circles, so I'll try to make it simple.

    First things first. I'm trying to do drop down menus for my nav buttons at this site I'm working on here: http://cr.xt-arts.com.

    I want this: http://www.tanfa.co.uk/css/examples/menu/hs7.asp, I tried using this: http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp, my site became this: http://neatorama.cachefly.net/images...omb-badger.jpg (aka this).

    I couldn't get the CSS menu to be in position, I couldn't get the darn things to be in a hierarchy. It was just brutal. I don't consider myself ignorant of CSS/HTML but this I just can't get my head around!

    If anyone could at least nudge me in the right direction or find a tutorial that can better suit my situation I would be VERY appreciative! I didn't bother posting my attempted code because frankly it wasn't going anywhere. You can see the code examples I used at the tutorial page. If you can recommend how I can implement them with my image/div/css-roll-overs it would be great!
    Last edited by ShaneC; 07-19-2008 at 05:38 PM.
    Unless otherwise stated, any code posted is most likely untested and may contain syntax errors.
    My posts, comments, code, and suggestions reflect only my personal views.
    Web Portfolio and Code Snippets: http://shanechism.com

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Shane,

    the bomb pic made me snort beer out my nose kudos.

    You have a working link to the page where the nav is breaking? Looking at the tutorial, it should be pretty "simple" but nesting lists can be tricky until you get use to it. If you have some working code it would be easier to lend a hand.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Codeasaurus Rex
    Join Date
    Jun 2008
    Location
    Redmond, WA
    Posts
    659
    Thanks
    31
    Thanked 100 Times in 94 Posts
    Harbinger, first thanks for the response!

    I have updated the current page (http://cr.xt-arts.com) with the explosion of my attempt. I haven't tried hiding/showing yet because that is irrelevant if it makes all my images be thrown aside.

    If there is any code you would like me to post here for convenience please let me know!
    Unless otherwise stated, any code posted is most likely untested and may contain syntax errors.
    My posts, comments, code, and suggestions reflect only my personal views.
    Web Portfolio and Code Snippets: http://shanechism.com

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Shane,

    this is confusing the crap out of me.
    Code:
    				
    					<div id="menu">
    						<ul>
    						<li><h2><div class="btn-home" ><a href="#" ></a></div></h2>
    							<ul>
          							<li><a href="#" title="CSS Hover Navigation">My Test Link</a></li>
    							</ul>
    						</li>
    						</ul>
    
    								
    						<div class="btn-aboutus" ><a href="#" ></a></div>
    						<div class="btn-news" ><a href="#" ></a></div>
    						<div class="btn-issues" ><a href="#" ></a></div>
    						<div class="btn-campaigns" ><a href="#" ></a></div>
    						<div class="btn-outreach" ><a href="#" ></a></div>
    						<div class="btn-blog" ><a href="#" ></a></div>
    						<div class="btn-contactus" ><a href="#" ></a></div>
    						<div class="btn-login" ><a href="#" ></a></div>
    						
    					</div>
    the divs that are your menu are not even in the ul that is your menu. that among some other stuff is the issue.

    give me a sec and I'll make a simple nested list example that might help.

    -alan
    Last edited by harbingerOTV; 07-19-2008 at 08:13 PM.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>???</title>
    <style type="text/css" media="screen">
    
    /* turn off all padding, margins and styles of your list items */
    ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    
    /* tell your main nav elements to go horizontal */
    
    li {
    float: left;
    width: 100px;
    text-align: center;
    }
    
    /* hide the sub navs */
    
    li ul {
    display: none;
    }
    
    /* show the subs on hover */
    
    li:hover ul {
    display: block;
    }
    
    /* since I floated the LI you need to unfloat the sub nav LI */
    li ul li {
    clear: left;
    }
    
    </style>
    	
    </head>
    <body>
    
    <!-- its all about nesting and nesting properly -->
    
    <ul>
    <li>1st link
      <ul>
    	<li>Sub link</li>
    	<li>Sub link</li>
    	<li>Sub link</li>
      </ul>
    </li>
    
    <li>1st link
      <ul>
    	<li>Sub link</li>
    	<li>Sub link</li>
    	<li>Sub link</li>
    	<li>Sub link</li>
    	<li>Sub link</li>
      </ul>
    </li>
    
    <li>1st link
      <ul>
    	<li>Sub link</li>
    	<li>Sub link</li>
      </ul>
    </li>
    </ul>
    
    
    </body>
    
    </html>
    try this is a base.

    It won't work in IE lt 7 but there is some Javascript to help out.

    http://www.xs4all.nl/~peterned/examples/cssmenu.html

    this is the file you need:

    http://www.xs4all.nl/~peterned/htc/csshover.htc

    ust save the page as csshover.htc and make sure the path to it in the following CSS is correct.

    this is the code for your CSS to make it work:

    Code:
    	body {
    		behavior:url("../htc/csshover.htc");
    	}
    using this will cause a CSS validation error but to me it's not a bother. If you want you can make a conditional comment for IE lt & and feed them this.

    Try this all out and see where you get. If you need some more help just shout.

    -Alan
    Last edited by harbingerOTV; 07-19-2008 at 08:15 PM.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    ShaneC (07-19-2008)

  • #6
    Codeasaurus Rex
    Join Date
    Jun 2008
    Location
    Redmond, WA
    Posts
    659
    Thanks
    31
    Thanked 100 Times in 94 Posts
    Thank you very much for your advice Alan! I've made a lot of progress.

    I've updated the page with my most recent attempts (http://cr.xt-arts.com).

    The last three problems I'm working with are:

    1) When you hover over the item it pushes everything to the right
    2) I'd like to make it so that the entire li cell is a link (ie. <li>Sub link</li> is all linked and can be clicked to go to a new page).
    3) IE. I put the script online and referenced it in my body of global.css (accessed from index.css) but it still doesn't appear in IE!

    Thanks again for all your help!
    Last edited by ShaneC; 07-19-2008 at 08:52 PM.
    Unless otherwise stated, any code posted is most likely untested and may contain syntax errors.
    My posts, comments, code, and suggestions reflect only my personal views.
    Web Portfolio and Code Snippets: http://shanechism.com

  • #7
    Codeasaurus Rex
    Join Date
    Jun 2008
    Location
    Redmond, WA
    Posts
    659
    Thanks
    31
    Thanked 100 Times in 94 Posts
    Tried quite a bit of different things and somehow wound up with my site on a rewrite engine.

    Still no fluid pop up CSS boxes, though. Gah.
    Unless otherwise stated, any code posted is most likely untested and may contain syntax errors.
    My posts, comments, code, and suggestions reflect only my personal views.
    Web Portfolio and Code Snippets: http://shanechism.com


  •  

    Posting Permissions

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