1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Menu nav problem (not sure which approach to take, here)

Discussion in 'CSS' started by mlg5454, Apr 15, 2008.

  1. #1
    What I thought was a great idea originally may not be achievable via CSS...

    http://www.theartshole.com/stuff/

    I want each letter of A-R-T-S-H-O-L-E to correspond to other images. For example, the A, when the mouse is over it, should reveal the "ARTISTS" image. But now I realize it may not be possible.

    What IS possible, however, is hiding ARTISTS or z-indexing it so that when it is hovered over it's revealed, but I wanted only the A of ARTSHOLE to do that. Any suggestions?

    Max
     
    mlg5454, Apr 15, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Actually, it is quite easy.

    First, that's a list of options, so get those anchors in a list. You make the LI's be a fixed height and width of the part you want to show, set them to position:relative and overflow:hidden; then set the images inside them to position:absolute and slide them into position to just show the part you want shown mouse-off. For the :active, :focus and :hover state you change the height of the LI to the full height of the sub image and switch it to overflow:visible;

    I'm in the middle of a project at the moment so I lack the time to code up an example, but if I have time later in the day I'll take a stab at it.
     
    deathshadow, Apr 16, 2008 IP
  3. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    deathshadow you know everything. $%^#$%^#$%^ you.

    i frequent 2 other forums and one guy tried doing this with javascript to no avail (but did something kind of pretty). on another forum some guy is just scratching his head.

    i'll have to wrap mine around what you're saying here - i think i get it - but i'm suffering from a cold right now so i'll probably take me a while to absorb your Wise Word completely. thank you!
     
    mlg5454, Apr 16, 2008 IP
  4. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    mlg5454, Apr 16, 2008 IP
  5. Cobnut

    Cobnut Peon

    Messages:
    184
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi mlg5454, the page should be OK in IE7, it'll be IE6 and below that don't work (surprise, surprise). This is because IE6 doesn't recognise the hover pseudo-class for any element other than an anchor (<a>), so the li:hover is being ignored and the words never 'revealed'.

    There's two solutions, I guess. Re-work the CSS so that you use <a> for the hover reveal, or use a snippet of Javascript or jQuery to dynamically change the class on hover, which seems a shame.

    Jon
     
    Cobnut, Apr 17, 2008 IP
  6. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    i figured out the IE problem, there was something with the li widths going funky... as for IE6, whatever, people can freaking listen to their MS update reminders.

    now to figure out the designs for each new page! :D
     
    mlg5454, Apr 17, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    What you can do to get around IE6 is keep the a's inside the lis and move the images off to the side. Then the hovering isn't on the li's but on the a's.

    Get rid of the div cause you don't need it--- move the id to the ul. Ul's can do everything a div can do, they're both blocks... use a div around a ul when the div needs to be a different width than the menu itself because it's holding a backgorund image or something.
    SO now we have <ul id="nav">
    
    #nav {
    	margin: 0 auto;
    	height: 700px;
    	list-style: none;
    	position: relative; 
           (you could change the width to be exactly the width of the menu needed, and put enough top padding on the container to push the menu down.. or use margin: 40px (whatever) auto;...)
      overflow: hidden; (wrap floats cause now the a's are floats...so they can stay inline but be blocks)
    }
    
    li {margin: 0; padding: 0;(you already have the universal reset on top of your CSS sheet so don't need this)
      display: inline;
    }
    
    li a {
      float: left; (makes the a's blocks so we can set height on width, but stay lined up alongside each other)
      position: relative;
      height: 95px;
      width: 90px;
      overflow: hidden;
    }
    (artists should end up sitting at 0 0 by default)
    
    li.history a {
    	left: 80px;
    	top: -95px;
    }
    
    li.art a {
    	left: 179px;
    	top: -195px;
    }
    
    li.releases a {
    	left: 263px;
    	top: -290px;
    }
    
    li.shows a {
    	height: 105px;
    	left: 348px;
    	top: -390px;
    }
    
    li.videos a {
    	height: 105px;
    	left: 425px;
    	top: -495px;
    }
    
    li.listen a {
    	height: 105px;
    	left: 510px;
    	top: -603px;
    }
    
    li.read a {
    	height: 100px;
    	left: 600px;
    	top: -703px;
    }
    
    #artistspic {
    	position: absolute;
    }
    
    #historypic {
    	position: absolute;
    	top: -270px;
    }
    
    #artpic {
    	position: absolute;
    	top: -140px;
    }
    
    #releasespic {
    	position: absolute;
    	top: -290px;
    }
    
    #showspic {
    	position: absolute;
    	top: -78px;
    }
    
    #videospic {
    	position: absolute;
    	top: -280px;
    }
    
    #listenpic {
    	position: absolute;
    	top: -1px;
    }
    
    #readpic {
    	position: absolute;
    	top: -88px;
    }
    img {
    	border: none;
    }
    
    
    a:hover {
    	overflow: visible;
    }
    
    Code (markup):
    Something like that, I didn't test, but I've done a lot of stuff appearing on :hover before. If IE6 still doesn't work then you could give it yet another decaration since sometimes it needs an extra push...
    so in a seperate declaration, say something else that doesn't make a visual effect...
    a:hover {
    overflow: visible;
    }
    a:hover {
    visibility: visible; (or font-weight: bold since you won't see that... or anything else that you wouldn't see the effect of)
    }

    Anyway, this was just an idea... if you really don't care about IE6 then forget about it : ) just something you can try. People can't always upgrade from IE6... depends on how old their OS is.
    If you see yourself repeating something for the same element just different classes or ids, that usually (tho not always) means you can just stick that declaration in the beginning and only mention the differences in the classes/ids.

    Oh and after changing how the ul is positioned, the other numbers might not work anymore and might need to be adjusted.
     
    Stomme poes, Apr 25, 2008 IP