PDA

View Full Version : Hover



194673
Jan 6th, 2007, 08:11 PM
Ok, I'm having problems getting this hover property (:hover) to do what I'd like it to...
Here's a snippet from my CSS

#nav {
background: url(images/nav-bg.jpg) repeat-x;
height: 55px;
width: 513px;
float: right;
}

#navitem {
display: inline;
height: 50px;
width: inherit;
}

#navitem-mid {
float: left;
padding: 13px 0 0 0;
background: url(images/nav-blue-mid.jpg) repeat-x;
height: 37px;
}

#navitem-side {
background: url(images/nav-blue-right.jpg) no-repeat;
float: left;
height: 50px;
width: 15px;
margin: 0;
}

#navitem-side.left {
background: url(images/nav-blue-left.jpg) no-repeat;
float: left;
margin-left: 5px;
}

#nav a {
font: 18px "Lucida Sans", sans-serif;
color: #fff;
text-decoration: none;
vertical-align: middle;
}

#navitem-mid:hover {
float: left;
padding: 13px 0 0 0;
background: url(images/nav-blue-mid.jpg) repeat-x;
height: 37px;
}

#navitem-side:hover {
background: url(images/nav-green-right.jpg);
}

#navitem-side.left:hover {
background: url(images/nav-green-left.jpg);
}

and my html:


<div id="navitem">
<div id="navitem-side" class="left"></div>
<div id="navitem-mid"><a href="index.php">Home</a></div>
<div id="navitem-side"></div>
</div>
<div id="navitem">
<div id="navitem-side" class="left"></div>
<div id="navitem-mid"><a href="index.php">Information</a></div>
<div id="navitem-side"></div>
</div>
<div id="navitem">
<div id="navitem-side" class="left"></div>
<div id="navitem-mid"><a href="index.php">Diseases</a></div>
<div id="navitem-side"></div>
</div>
<div id="navitem">
<div id="navitem-side" class="left"></div>
<div id="navitem-mid"><a href="index.php">Contact Us</a></div>
<div id="navitem-side"></div>
</div>

Basically... I want to have it so when you hover over navitem (which contains all three pieces of a navigation button), it will completely change into a green color. I assume there is now way to do this with just plain CSS, so could anybody tell me a quick way to do it with javascript. If there is a way to do it with CSS, I would like to know. If at all possible I'd like to stay away from javascript (I'd rather do it with PHP if possible.)

I also noticed the hover property does not work in IE (or at least my version). Is there any fix?

194673
Jan 6th, 2007, 08:37 PM
Totally unrelated to hovering, but since it's on the same webpage... I'm getting a white space at the top of the page only in firefox. BTW I already set the body to have no margin or padding.

/* CSS Document */

body {
margin: 0;
padding: 0;
background: #30302f url(images/bg.jpg) repeat-x center 25%;
}

#container {
width: 768px;
margin: 0 auto 25px;
}

#side {
float: left;
width: 255px;
height: 755px;
background: url(images/side.jpg) no-repeat;
}

#side p {
position: relative;
text-align: center;
right: 15px;
top: 210px;
font: 20px "Lucida Sans", sans-serif;
font-weight: bold;
color: #FFF;
}

#banner {
float: right;
}

#nav {
background: url(images/nav-bg.jpg) repeat-x;
height: 55px;
width: 513px;
float: right;
}

#navitem {
display: inline;
height: 50px;
width: inherit;
}

#navitem-mid {
float: left;
padding: 13px 0 0 0;
background: url(images/nav-blue-mid.jpg) repeat-x;
height: 37px;
}

#navitem-side {
background: url(images/nav-blue-right.jpg) no-repeat;
float: left;
height: 50px;
width: 15px;
margin: 0;
}

#navitem-side.left {
background: url(images/nav-blue-left.jpg) no-repeat;
float: left;
margin-left: 5px;
}

#nav a {
font: 18px "Lucida Sans", sans-serif;
color: #fff;
text-decoration: none;
vertical-align: middle;
}

#navitem-mid:hover {
float: left;
padding: 13px 0 0 0;
background: url(images/nav-blue-mid.jpg) repeat-x;
height: 37px;
}

#navitem-side:hover {
background: url(images/nav-green-right.jpg);
}

#navitem-side.left:hover {
background: url(images/nav-green-left.jpg);
}

#content-frame {
float: right;
background: #8e9fac;
width: 511px;
height: 501px;
border: 1px solid #000000;
margin-bottom: 25px;
}

#content-body {
margin: 5px;
width: 491px;
height: 481px;
background: #ebebeb;
padding: 5px;
}

#footer {
clear: both;
height: 28px;
width: 766px;
border: 1px solid #000;
background: url(images/footer-bg.jpg) repeat-x;
margin: 25px auto 0px;
}

#footer p {
color: #000;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}

h1 {
font: 18px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #114c77;
margin: 0;
}

p {
color: #3f5522;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-indent: 25px;
}

rpgfan3233
Jan 6th, 2007, 08:46 PM
Are you using XHTML or HTML? In HTML, the BODY element is the canvas, the surface for drawing the Web page. In XHTML, the html element is the canvas. This means that in XHTML you must set margin and padding on the html element, and in HTML you must set the margin and padding on the BODY element.

Arbitrator
Jan 6th, 2007, 08:53 PM
Ok, I'm having problems getting this hover property (:hover) to do what I'd like it to...I can’t see your hover effect because it’s image‐based and the images are missing. You also failed to explain what you meant by “having problems”.


Basically... I want to have it so when you hover over navitem (which contains all three pieces of a navigation button), it will completely change into a green color. I assume there is [no] way to do this with just plain CSS, so could anybody tell me a quick way to do it with javascript.You’re doing it with plain CSS right now… The :hover pseudo‐class is plain CSS2.


I also noticed the hover property does not work in IE (or at least my version).Internet Explorer 6’s implementation of the :hover pseudo‐class is broken; in that browser, you can only use it on anchor (a) elements if you want it to work. This is fixed in Internet Explorer 7 and it will work on all elements in that browser.


Totally unrelated to hovering, but since it's on the same webpage... I'm getting a white space at the top of the page only in firefox. BTW I already set the body to have no margin or padding.Your CSS is rather useless without the HTML that it pertains to.

194673
Jan 6th, 2007, 09:25 PM
@Arbitrator - By having problems, I meant that currently the hover effect is written on three seperate images (left side, middle background, and right side). The problem is that it will only change the image of one part of the button because the hover property was applied to all three images seperately. I wanted to be able to hover the whole button, in otherwords #navitem, and make it change the background images of all three parts of the button. Sorry for putting it in this confusing blur of words.

@rpgfan - Even when I apply the margin: 0; and padding: 0; to the html tag, I still see white space in the top of the document.

Graft-Creative
Jan 6th, 2007, 09:38 PM
you want 3 backgrounds to change when you hover over the one containing element?

I'm not sure that's possible withouht some major kludges, .js or otherwise.

Gary

194673
Jan 6th, 2007, 11:36 PM
Meh, spent some time and converted the elements into an image. So now both my problems are fixed.

What do ya know... Another problem has arisen. Anyone wanna tell me why my text won't vertically align?

#footer {
clear: both;
height: 28px;
width: 766px;
border: 1px solid #000;
background: url(images/footer-bg.jpg) repeat-x;
margin: 5px auto 0;
line-height: 28px;
color: #000;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
}

<div id="footer">
Copyright &copy; 2007
</div>

Arbitrator
Jan 7th, 2007, 12:23 AM
What do ya know... Another problem has arisen. Anyone wanna tell me why my text won't vertically align?When you set a shorthand property such as font, it resets all of the associated properties. For example, if you use —


font: 12px Verdana, Arial, Helvetica, sans-serif;

— all of the unspecified properties are set to their defaults. In this case, that includes font-weight, font-variant, font-style, and line-height. The point is that your line-height got reset to the default value. To circumvent this problem, use the shorthand property fully:


font: 12px/28px Verdana, Arial, Helvetica, sans-serif;

With the above declaration, you can now remove the line-height: 28px declaration since it’s already specified by the font property.

And just to demonstrate what a fully specified font property looks like, here’s an example:


font: italic bold small-caps 16px/2 "Lucida Sans Unicode", "Lucida Grande", sans-serif;