Clever Css needed...
- Started
- Last post
- 22 Responses
- Fleaguru
Hi all,
Maybe there's an obvious answer to this, but it's skipped me if there is!Trying to so a simple horizontal nav, but one side of the button is rounded and the left isn't. How can achieve the rollover and on state with css. I know I could do on rollovers, but I wonder if there's clever css method.
Here's an image. The four tabs at the bottom are what we're loooking at. the white is the rollover state and the onstate.
Any Css gurus out there?
Loving vibes....
- emecks0
a:hover {
background-image:rollover.gif;
}no??
- Dancer0
What emecks said.
But to explain it a bit (dunno how exprienced with CSS you are).
You need to create the list of links place a bg image for each ...
sod it read this:
http://www.simplebits.com/notebo…
- dijitaq0
what weestu said
- ********0
what dijitaq said about weestu.
- weestu0
what moth said after dijitaq said what he said about me saying what I had said previously
- Fleaguru0
Hi guys, thanks for the responses sofar. We're pretty up there in the css side of things. The solutions you guys have layed outwould be my normal plan of attack - shifting the background image up and down on the hover state of the #nav li a {}, but the probem is that you have to draw the line of where the background is. now with that rounded edge, if the button previous is alread white, and rollover the next button, that would need three states to cover for the other one's "tip" already being white.
Am I making sense? I'm not sure if I'm explaining right.
Have a gander...
Cheers...
- Fleaguru0
so if you look at the last sample (
), that previous button needs to change its "tip", know what I mean harry...
- weestu0
I don't really understand what you mean, have you got a (not) working example?
- Fleaguru0
Really appreciate your time people...
ok, might well be easier to explain with an example...
- fiftypence0
Idea: howabout overlapping the divs and using transparent gifs for both rollover and static link states? Just a thought.
- ********0
Use 1 gif, tiled horizontally with all possible "over" states and slide it in as per that list apart article.
- weestu0
your hover state should look like this:
- weestu0
except for the last tab...
- ********0
I take it back - title vertically
- weestu0
what moth said
- Fleaguru0
Cheers Wee stu, but what if (for example), the third button is already white, then then the fourth button rolls over with that state - the third button will suddenly have a blue tip...
- ********0
Tile them - 1 gif, 5 rows of different states.
Use CSS to move their vertical position. You might have to use image maps or something though because you'll need to know which area they hover on.
- Dancer0
I would use PNG's
Bitch as a BG image in a li and a hover.
I got it sort of working on a site except IE 6 does not hover
If you find a solution let me know. I can send you my link if want to have a look?