SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 35 of 35

Thread: Non-Square Menu

  1. #26
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph,

    It seems that noonnope's solution might work the best so far.

    I will post my results.

  2. #27
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AMAZING!!!!!

    http://www.americanresults.com/videogenie/product2.html

    It even works in IE7, IE8, (F&*k IE6), FF, Safari, Chrome

    It works great, just have to change the images now!!


    goldstar to noonnope!

  3. #28
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If I had of known you were wanting the tails of the arrows to show then my original suggestion would have worked.

    The sprite image that I was using is basically the same since it has tails and points.

    In this image I showed how it grids out for the widths and negative margins changing on hover. As explained in my original post. That grid shows the 8px offsets between the tails and points.

    It can be done with a single image.

  4. #29
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rayzur,

    I see what you are saying now, back when you said it, I have to tell you I was kind of confused

    Thank you for you help.

  5. #30
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The thing about relative positioning is that it only moves the element visually. It still occupies it's original place in the page and it leaves behind black holes. It gets worse as each following element must account for the black hole plus the visual position of the RP'd element before it.

  6. #31
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used relative position to make the OP better understand what eruna initially meant by overlapping. It's intuitive. But your point is why I added "or whatever".

    I agree negative margins could prove to be better. But they are not so intuitive. I was trying to be clear about a technique, rather than about an implementation.


    ******************


    All that said, now, just for the sake of argument:


    Sometimes "the thing" can prove to be a feature.

    True about accounting for the black hole plus the visual position. But an overflow:hidden; on the parent will take care of the... overflow.That would be div id="mc_mid" in our case.



    ***********************


    In the end, I'm happy we all provided options for William

  7. #32
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    the reason for wrapping the <p> tags in the <a> tags is so that I can have the text links with a display of none. Is there a better way to do that?
    You could use<a><span>, and either give a negative indent ( which might allow you an extra tag to use in the hover) or continue with the display:none IR technique. You could also position the make the span contain the image and use AP so that it covers up the text ( this has the advantage that when images are turned off, your navigation will still b visible)

    as far as the sprites ( or any images actually) are concerned .. the problem is that you navigation REQUIRES overlap. The tip of the arrow has to change when #1 hovered and the fin when #2 is hovered.. but they both occupy the same space...

    Noonnope is right.

    you could also use a gif ( assuming that soft shadow outside the menu is not vital . you can regain it with CSS3 and PIE, BTW)

    at this point your sprite would begin to look something like this:

    Note the size of the buttons (anchor/ LIs) have change to, to account for the overlap

    so 4 x length - (3*overlap) would be your UL width....

    OR
    you could add padding-left that's equal to the overlap, and then just give each LI margin-left:-overlap...

    hope this helps

  8. #33
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, you guys are all amazing. Just when I was about to tell the client, "too bad, so sad" and look like a dumb-dumb, you guys saved the day.

    I understand about the black hole and I am using a negative margin instead.

    Thank you, thank you, thank you.

  9. #34
    SitePoint Zealot bopjo1's Avatar
    Join Date
    Jun 2007
    Location
    Tampa, FL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hope I'm not too late to this party

    I'm attempting the same procedure here:

    http://bopjodesign.com/xactlyit/netaffinity/stages.html

    ...But the "tails" of my 2nd, 3rd, and 4th "arrows" are not showing up. I used Rayzur's code as a guide.

    I've been wracking my brains all night on this and just can't figure it out. I code PHP and javascript but nothing is more aggravating and difficult to me than CSS!

    I hope someone can help me please....

  10. #35
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Let's answer this in the new thread here:

    http://www.sitepoint.com/forums/showthread.php?t=735441


Tags for this Thread

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
  •