www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 24

Thread: Help!!

  1. #1
    Join Date
    Oct 2006
    Location
    Florida
    Posts
    15

    Help!!

    I have a client who wants to take the attached look and turn it into a CSS menu. I have looked everywhere and can't find navigation like the one he is requesting: with the different colored bars at the top with the nav text stays static and the only hover movement is the red line under each colored bar. It seems to get more complicated because there's a small line that is underneath where the bar is going to hover (and also under the greenish nav buttons. I don't even know if this makes sense but I've spent many hours trying to figure a CSS solution out and am at wits end. I'm thinking I might have to go the javascript route.

    Does anyone have any advice?
    Attached Images Attached Images
    Summer

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    yes, this is an easy effect to replicate.

    I'll go 'offline' for a bit and try to write up something (with comment notes to explain what does what).
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Oct 2006
    Location
    Florida
    Posts
    15

    Oh man.. you're awesome!

    Thanks so much for replying! You don't know how much that would help me!

    Summer
    Summer

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Kind of a weak example here (-it's been a long day and I'm eager to call it a night), but this might get you started.
    I'll look at this again tomorrow (your example vs. my weak attempt to replicate) and try to get them a bit closer:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title></title>
    <style type="text/css">
    html, body {border:0; padding:0; margin:0;}
    ul {height:45px; width:520px; border:1px solid green; padding-top:10px; margin:25px auto; background-color:#d4ecf8;}/* sets height, width, a 1-px green border, pads 10-px top (vert. centering), and 25-px from top of screen/container and centers it */
    ul li {list-style-type:none; display:inline;padding:0 3px 0 3px;}/* removes 'bullets', displays 'horizontally', pads zero top, 3-px right, zero bottom and 3-px left */
    ul li a {color:black; padding:10px; margin-bottom:2px; background-color:silver; font-weight:bold; line-height:2.0em;}/* black text for anchor, pads 10-px all around, 2-px bottom margin, background-color silver 'at rest', bold text, line-height 2.0 em */
    ul li a:hover {border-bottom:7px solid red; color:yellow; background-color:black; font-weight:bold; text-decoration:none;}/* hover state effects: bottom border 7-px red border 'on-hover, yellow text 'on-hover', black background 'on-hover', bold text, no underline 'on-hover' */
    </style>

    <script type="text/javascript"><!--
    // -->
    </script>
    </head>
    <body>



    <ul>
    <li><a href="#nogo">First Link</a></li>
    <li><a href="#nogo">Second Link</a></li>
    <li><a href="#nogo">Third Link</a></li>
    <li><a href="#nogo">Fourth Link</a></li>
    <li><a href="#nogo">Fifth Link</a></li>
    </ul>

    <!-- add more links? Increase width of <UL> in STYLE. -->

    </body>
    There are several ways to doing this. If we knew the number of links & their names for instance, something with color gradients and such could be also added. I think I recognize the image example you showed from a site that sells the code (infinite menus, maybe??). They have some great navigation bars and such. :-) I think that their 'click' is to use FLASH to animate the red underline part so that it 'slides-in' under the hover-link. Nice, but simpler is to do this with CSS.
    Last edited by WebJoel; 10-03-2006 at 06:11 PM.
    I build for: Firefox and tweak for IE

  5. #5
    Join Date
    Oct 2006
    Location
    Florida
    Posts
    15
    Thanks again so much! I'll take a look and let you know if I have any questions. It's been a long day for me as well. I think I might put off the HTML stuff until tomorrow anyways Have a good evening and thanks so much again!
    Summer

  6. #6
    Join Date
    Oct 2006
    Location
    Florida
    Posts
    15
    This is working great but I have another question. If I wanted to put a different color background for each link, what's the best way to achieve this? Create a class? I just don't want to mess up the hover. The background color would remain constant and the hover would be the only active element. Thanks!
    Summer

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    It's Thursday.... -a day past slump-day and I'm getting rusty!

    Here's something a bit better than that ugly sample from last night..

    <style type="text/css">
    html, body {border:0; padding:0; margin:0;}
    ul {position:relative; top:50px; left: 50px; display:inline;}
    ul li {list-style-type:none; height:135px;padding:10px 10px 6px 10px; display:inline; padding:0;color:black;margin:0 auto; border:1px solid #c2c2c2;}
    ul li a {color:black;padding:10px 10px 6px 10px; border-bottom: 7px solid white; font-weight:bold; line-height:2.0em;}
    ul li a:hover {padding:10px 10px 6px 10px; border-bottom:14px solid red; color:red; font-weight:bold; text-decoration:none;}
    </style>

    </head>
    <body>
    <!-- NOTE: for IE, all spaces are taken out between closing/opening tags. E.g.: -Can't do it like "</li> </li>" etc. as it messes-up the bottom margin. I hate IE. -->
    <ul><li style="background-color:#ebecf6"><a href="#nogo">First Link</a></li><li style="background-color:#bfe2f9"><a href="#nogo">Second Link</a></li><li style="background-color:#bdcff4"><a href="#nogo">Third Link</a></li><li style="background-color:#49bdef"><a href="#nogo">Fourth Link</a></li><li style="background-color:#00aeed"><a href="#nogo">Fifth Link</a></li></ul>


    </body>
    </html>
    Looks great in IE, great in Fx (but different in each... need to get Fx version 'taller'... need coffee, hot, black, 2X strong coffee...)

    I might be going to NY over the weekend, leaving tomorrow, until Sunday evening...
    I build for: Firefox and tweak for IE

  8. #8
    Join Date
    Oct 2006
    Location
    Florida
    Posts
    15
    Hey!!! That's great! There's an extra column space under where the red line hovers, so i need to figure out how to tweak that, change the colors and I'm in business! You've been such a wonderful help!! I can't thank you enough...
    Summer

  9. #9
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I've done better, in less time. A bit o' the brain freeze this week... glad you enjoy though..
    My mantra: build it. make it work in most browsers. then make it beautiful. where are we at?

    p.s.:
    The key here is to make a border-bottom:npx solid color; on the <li> non-hover state whereby color (I used "white") is the same as your background-color of the container or page, and then make the a:hover state be border-bottom:npx solid hoverColor; (Here I used "red"). -You are essentially trading a white border-bottom for a red border-bottom on-hover. Otherwise, the anchor sort of 'jumps around' when you hover over it because the added height of additional border thickness.
    Last edited by WebJoel; 10-05-2006 at 06:48 PM.
    I build for: Firefox and tweak for IE

  10. #10
    Join Date
    Oct 2006
    Location
    Florida
    Posts
    15
    Thanks so much for your help WebJoel! I got it to work (http://www.dynamiccreations.com/desi...s1/default.htm) but my client emailed me today and said that she's trying to view it on a display monitor and the hover isn't showing up correctly (the bar shows up too small). I don't think there's a way to accomodate all screen sizes.. even with CSS. Am I correct in saying that? Just trying to figure out what to tell them...
    Summer

  11. #11
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I probably neglected to state a defalt size for text or something like that. I'll go over it some more and see about improving this.
    Last edited by WebJoel; 10-09-2006 at 04:53 PM.
    I build for: Firefox and tweak for IE

  12. #12
    Join Date
    Oct 2006
    Location
    Florida
    Posts
    15
    Oh thanks. Yeah, that's what I was wondering. I've received more clarification on the problem. Here's what the Client wrote:

    "the font on her screen already seemed smaller hence the tabs shrink and made the gap appear... is there a way to force the tabs to be at least a minimum width? That way if the font is smaller the tab stays at least wide enough to spread across."
    Summer

  13. #13
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Got it. :-) It's not the fault of the text then, -I need to make the UL be a width that doesn't change. If you hold down the [CTRL] key and roll the mouse-roller, not only does the TEXT re-size, but the <ul> as well. -This is not right....

    Okay: what I am coming up with is a need to state a width for the ID of each respective <li>, here for brevity, they all get the same width:

    #nav_about_us a {background-color:#BFBA9D; width:53px;}
    #nav_furniture a {background-color:#9F986E; width:53px;}
    #nav_manufacturers a {background-color:#7D7752; width:53px;}
    #nav_specials a {background-color:#7F763D; width:53px;}
    #nav_events a {background-color:#5F5829; width:53px;}
    #nav_fine_furniture a {background-color:#60540C; width:53px;}
    #nav_contact a {background-color:#352F0E; width:53px;}
    I'd like to get that <ul> to NOT resize (but it's okay for the text part to re-size, as this would assist Accessibility). But stating a width for the background of the <li> seem to stops the re-sizing of the LI (for the most part), while the text will shrink under [CTRL] + mousewheel.
    It needs tweaking... but I think this is stopping that 'white gap' incident. Speaking of which, there is a IE 'white-space bug' in the code. I found several ways to 'cure' this. Perhaps this too will stop the 'gap' you write of.

    Basically, in IE:
    <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    </ul>
    should produce this: (neglecting bullet-removing "list-style-type:none;". Here, list is vertical. For horizontal, "display:inline;" but you would still pick up a mysterious single pixel 'gap' at the bottom-right of every <li>...)
    One
    Two
    Three

    But IE 'assumes' an actual line-break after "</li>" and before the next <"li>, thus creating:

    One

    Two

    Three

    Ways to combate this: remove ALL 'whitespace' from your LI, like this:
    <ul><li>One</li><li>Two</li><li>Three</li></ul>
    which looks like crap in code-view. Another way is to trigger the "hasLayout" by one of several means, of which there are more elegant ways than removing all white-space from the html...
    I'll be back...

    P.S.:
    I had changed the font-size to 1.0em in my workings, -which is why everything resized for me offline. You had pixels, -lets stay with that. What was your font-size? "11px" works beautifully, but "12px" makes the <ul> line-break. If you want 11px font-size, this works. If you want 12px font-size, you will need to slightly decrease the widths of the background-color #nav_etc.'s (the BOLD part, currently set to 53px. Try one or two pixel reductions-all. You might gain enough width space to no longer line-break).

    I think that this is solved.

    attached: the bare-bones code, and an ugly depiction of the 'white-space bug' as it occurs.

    edit: NOT TESTED yet in Firefox, but suspicion is that it will 'jump around' alot on-hover. Needs to have widths experimented with, or some default 'max width' defined in <li> to not overflow the full width of <ul>
    Will attempt further testing later today...
    Attached Images Attached Images
    Attached Files Attached Files
    Last edited by WebJoel; 10-10-2006 at 07:55 AM.
    I build for: Firefox and tweak for IE

  14. #14
    Join Date
    Oct 2006
    Location
    Florida
    Posts
    15
    oh interesting. well thanks for looking at it!
    Summer

  15. #15
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Okay, -I think I have got this thing under control.

    By stating "#mainnav ul li a" as "display:block;" and next stating "#mainnav ul li a:hover" as "display:inline;", I may have satisfied the IE whitespace bug issue ("hasLayout"). I changed the widths of the individual <li>s, -just to be sure. This now looks identical in IE as it does in Firefox, and HTML-Tidy validates as no warnings/ no errors.
    If the total width of the <ul> is acceptible for your design, then this should do it.
    Attached: revised code.
    Whew.
    -Joel
    Attached Files Attached Files
    Last edited by WebJoel; 10-10-2006 at 01:42 PM.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles