...

View Full Version : Hover to be bigger than text?



CaptainB
10-27-2007, 09:32 PM
Hi!

if you go here: http://www.behrentzs.com/sites/webtjenesten/design2.php and hover on some of the text to the left, you can see that it changes background color. However it's ONLY beneath the text. I want it to change background color all over the row:

Example:

NOT like the first one, but like the 2. one:

Does anybody know how to do that?

VIPStephan
10-27-2007, 09:48 PM
Make those links block-level elements through applying display: block;. And Id encourage you to put them into lists as these are basically lists of links.

CaptainB
10-28-2007, 12:49 PM
I have now tried to do what you said, however I'm doing something wrong.

My html:



<ul class="menu">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>


And my css:



ul.links { list-style:none;
display:block;
}

ul.links li {margin-bottom:6px;
width:100%;
}

Just so you are aware, I'm working with percent (%) on this layout. I have declared 100% in both the body and html css.

abduraooft
10-28-2007, 01:03 PM
ul.links?
This selection will look for a <ul> tag having a class="links" in it and in fact all <ul> , <li> tags are block elements by default.

What VIPS said is to put display:block to your <a> like


<ul class="menu">
<li><a class="links" href="">Link 1</a></li>
</ul>
and then define it's style


ul a.links{
display:block;
}

and their pseudos

ul.menu a.links:link{

}
ul.menu a.links:visited{

}
ul.menu a.links:hover{

}
ul.menu a.links:active{

}

Edit: Note that ul.links and ul .links are different.
The first one behaves as explained above while the second one selects all elements having a class="links" placed inside a <ul>

CaptainB
10-28-2007, 01:14 PM
Uh, thanks for that.

BUT, even though my css now looks liks this (I have set the ul class to "menu" in my html):

ul.menu { list-style:none;
}

ul.menu li { margin-bottom:6px;
width:100%;
}

ul a.menu{ display:block;
}

ul.menu a.links:hover{background-color:width:100%;
height:100%;
color:#000033;
background-color:#99ccff;}

It still does now work as planned. I don't know what the width should be, if it is not 100%. Cause' as I said, I'm working with % in this layout.

abduraooft
10-28-2007, 01:18 PM
ul.menu a{
display:block;
}
(Read the edit in the above post)

CaptainB
10-28-2007, 01:37 PM
O yeah, there we go! Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum