Skip navigation
kcfi
kcfi
Currently Being Moderated

2nd row of navigation matrix

Jul 10, 2012 2:20 PM

Tags: #image #adobe #mac #cs5.5 #code #html5 #dw

I need a bit of guidance as to how I make my navigation matrix work on the second row of my test html setup. I want to make it roll over just like the top row. I'm thinking I may need another set of rules for the second row li and li a.

 

Here's the test page:

http://www.lash-it.com/navtop.html

840 Views   13 Replies   Latest reply: kcfi, Jul 11, 2012 3:03 PM
Branched to a new discussion.
 
Replies
  • Zabeth69
    Currently Being Moderated
    1. Zabeth69,
    Jul 10, 2012 3:57 PM   in reply to kcfi
    Report

    Seems like you still only have to shift the image the same distance up for the second row as for the first row, because the second hover row is the same offset from the second link row as the first hover row is from the first link row.

     

    Yes, you should need to add styles that cover the position of the second row images.

     

    Beth

     
    |
    Mark as:
  • kcfi
    Currently Being Moderated
    2. kcfi,
    Jul 10, 2012 4:35 PM   in reply to Zabeth69
    Report

    I still can't figure out how I move the second row of links for the second row of images. Do I need to rename the second row IDs and make new "li" and "li a" rules for those? I updated the page a bit. Now the roll over for the Buy button is wrong.

     

    http://www.lash-it.com/navtop.html

     
    |
    Mark as:
  • kcfi
    Currently Being Moderated
    3. kcfi,
    Jul 10, 2012 5:59 PM   in reply to kcfi
    Report

    I found a solution. Can you see anyway to simplify the code? See this page:

     

    http://www.lash-it.com/navtop2.html

     
    |
    Mark as:
  • David_Powers
    Currently Being Moderated
    4. David_Powers,
    Jul 11, 2012 5:20 AM   in reply to kcfi
    Report

    kcfi wrote:

     

    Can you see anyway to simplify the code?

    Yes, much simpler. Use real links rather than text embedded in images. I've done a quick mockup here: http://foundationphp.com/test/lashit.html.

     
    |
    Mark as:
  • kcfi
    Currently Being Moderated
    5. kcfi,
    Jul 11, 2012 5:41 AM   in reply to David_Powers
    Report

    David,

    WOW! That's fantastic and very helpful. I hope it is OK for me to grab your work, finish it, and use it in my site.

     
    |
    Mark as:
  • David_Powers
    Currently Being Moderated
    6. David_Powers,
    Jul 11, 2012 6:25 AM   in reply to kcfi
    Report

    Sure, go ahead. You might want to make your background images a bit larger or cut down the amount of text in the links, because there's a danger that the text might spill out.

     
    |
    Mark as:
  • kcfi
    Currently Being Moderated
    7. kcfi,
    Jul 11, 2012 6:28 AM   in reply to David_Powers
    Report

    Can I use the CG Omega font I have on my system? I added it to my DW font list, and it appears in my DW, but I wonder if it will appear when someone looks who doesn't have CG Omega on their system.

     
    |
    Mark as:
  • David_Powers
    Currently Being Moderated
    8. David_Powers,
    Jul 11, 2012 6:32 AM   in reply to kcfi
    Report

    You can add it to the beginning of a font stack, using the Font Manager, to create a font-family rule like this:

     

    font-family: "CG Omega", Tahoma, Geneva, sans-serif;

     

    People who have the font will see the one you want. Those who don't will see Tahoma, Geneva, or a generic font.

     
    |
    Mark as:
  • kcfi
    Currently Being Moderated
    9. kcfi,
    Jul 11, 2012 7:22 AM   in reply to David_Powers
    Report

    I think that rather than make the background images larger, I will reduce the text size, and remove the font-weight bold.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    10. Nancy O.,
    Jul 11, 2012 1:46 PM   in reply to kcfi
    Report

    True, you can use smaller font-sizes, but some people have their browsers set to display bigger fonts in order to see better.  This defeats your menu styles.   Another approach is to use CSS to style your "buttons" (no images required).

    http://alt-web.com/DEMOS/CSS-Horiz-menu-2.shtml

     

    The upside to this is that your page loads a bit faster without images.  And when text size is increased (even aggressively) the buttons remain intact.

     

    The downside to this is that CSS rounded borders don't work with gradient filters in IE.   If this is a deal breaker, stick with your images.

     

     

    Nancy O.

     
    |
    Mark as:
  • kcfi
    Currently Being Moderated
    11. kcfi,
    Jul 11, 2012 2:23 PM   in reply to Nancy O.
    Report

    I'm not seeing any problem with Safari Mac. I set the font size in DW, and it seems to stay that all relative no matter how zoomed in I am, and fine until I zoom out so far that I can't hardly read anything. I think (hope) I will be fine. Thanks.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    12. Nancy O.,
    Jul 11, 2012 2:56 PM   in reply to kcfi
    Report

    Use Zoom, Text Only.  Or manually set your browser's default font-size to 22 and notice what happens.  See screenshot.

     

    Lash-it.jpg

     

    I only mention this because many people MUST use increased font-sizes, especially on larger displays where text that is less than 18 - 22px is too tiny to read.

     

     

    Nancy O.

     
    |
    Mark as:
  • kcfi
    Currently Being Moderated
    13. kcfi,
    Jul 11, 2012 3:03 PM   in reply to Nancy O.
    Report

    Thanks for pointing this out. It's just something I will have to accept. It may not look great, but even at that size they will get the point.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points