|
 |
|
|
|
| Thread title: CSS Rollover Troubles |
 |
|
|
| |
|
Thread tools
Search this thread
Display Modes
|
|
|
02-27-2007, 08:48 PM
|
#1
|
Status: rawr
Join date: Dec 2005
Location:
Expertise:
Software:
Posts: 1,238
|
 CSS Rollover Troubles
Okay, basically I'm trying to code a navigation bar into my layout but am having trouble with it. I would like the nav's BG image and text to change on rollover. I have made up an image showing what it is I would like to have happened. I am not good with CSS so my coding is coming out all incorrectly. If it's not able to happen, don't worry about it, but I appreciate the help I do get. Thanks. 
|
|
|
|
02-27-2007, 09:07 PM
|
#2
|
Status: I love this place
Join date: Jun 2005
Location: UK
Expertise:
Software:
Posts: 562
|
I coded a similar thing for a client today..try and edit this code.
xhtml
Code:
<ul id="nav">
<li><a href="#" class="navigate">Services</a></li>
<li><a href="#" class="navigate">Specials</a></li>
<li><a href="#" class="navigate">About Us</a></li>
<li><a href="#" class="navigate">Testimonals</a></li>
<li><a href="#" class="navigate">Contact Us</a></li>
</ul>
css
Code:
ul#nav {
width: 525px;
height: 29px;
font-weight: bold;
text-align: center;
margin: 10px auto 10px 13px;
}
ul#nav li {
display: inline;
list-style: none;
}
ul#nav li a {
color: #fff;
padding: 7px 0 0 0;
margin: 0 13px 0 0;
}
ul#nav li a.navigate {
width: 92px;
height: 22px;
background: url("images/blue.gif") no-repeat;
float: left;
text-decoration: none;
}
ul#nav li a.navigate:hover {
width: 92px;
height: 22px;
background: url("images/green.gif") no-repeat;
float: left;
text-decoration: none;
}
|
|
|
|
02-27-2007, 09:28 PM
|
#3
|
Status: rawr
Join date: Dec 2005
Location:
Expertise:
Software:
Posts: 1,238
|
Wow, thanks a lot daz. I plugged it in and made a few adjustments and it's working fine. Thanks.
|
|
|
|
02-28-2007, 01:07 AM
|
#4
|
Status: Pastafarian
Join date: May 2006
Location: Duct Taped to your Ceiling
Expertise:
Software:
Posts: 3,440
|
You shouldn't have to apply the class to each <li>. Use a broad tag off the <ul> - much less structural markup that way.
|
|
|
|
03-01-2007, 11:31 AM
|
#5
|
Status: I'm new around here
Join date: Mar 2007
Location:
Expertise:
Software:
Posts: 2
|
Also, there's no need to re-declare everything in the :hover declaration. It will inherit it from its un-hovered state.
|
|
|
|
03-01-2007, 10:15 PM
|
#6
|
Status: I love this place
Join date: Jun 2005
Location: UK
Expertise:
Software:
Posts: 562
|
Originally Posted by Xoligy 
Also, there's no need to re-declare everything in the :hover declaration. It will inherit it from its un-hovered state.
|
I know, but it makes it easier for editing : )
|
|
|
|
03-01-2007, 11:11 PM
|
#7
|
Status: Sin Binner
Join date: Dec 2006
Location: Huddersfield, UK
Expertise:
Software:
Posts: 384
|
also li:hover has problems in IE.
Its usually better to put a div around your links, or use the a tag and set a background on that  .
|
|
|
|
03-01-2007, 11:17 PM
|
#8
|
Status: I love this place
Join date: Mar 2005
Location:
Expertise:
Software:
Posts: 714
|
make it all 1 image so there isnt a loading lag on rollover as well.
|
|
|
|
03-01-2007, 11:38 PM
|
#9
|
Status: Sin Binner
Join date: Dec 2006
Location: Huddersfield, UK
Expertise:
Software:
Posts: 384
|
yeh he has a point, use 1 image, and then change the background-position:, its the best way .
|
|
|
|
03-02-2007, 01:04 AM
|
#10
|
Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:
Posts: 2,246
|
li doesnt have a :hover state. he's not applying it to the list item anyways. and there's no reason to wrap everything in a div. the whole point of tableless is to avoid tag soup.
|
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|
|
Linear Mode
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed