Quick css hover question

I have this html:

<a href="">
<div class="post_bottom">
<p class="post_bottom_text">text in here</p>
</div>
</a>

and this is the css:

.post_bottom {
position: relative;
background: url(bottom.jpg)no-repeat;
width: 640px; height: 140px;
}

p.post_bottom_text {
position: absolute;
bottom: 20px;
left: 200px;
width: 350px;
font-weight: bold;
text-align: center;
color: #d33c3d;
}

How do I make the text underline when I hover over the post_bottom div holding the background image?

thanks.

 

uhm i suggest you used this html code

<div class="post_bottom">
<p class="post_bottom_text"><a href="">text in here</a></p>
</div>

HTML:

instead of

<a href="">
<div class="post_bottom">
<p class="post_bottom_text">text in here</p>
</div>
</a>

HTML:

then you can add this to your css

.post_bottom a{
 text-decoration:underline;
}

Code (markup):

 

I generally agree with Knutz, and the HTML s/he provided is excellent.

However the default for anchors is already underlining. So, normally they would already be underlined. So maybe you're removing the underline? If that's the case then modify Knutz' post to something like:

.post_bottom a:focus, .post_bottom a:hover {
text-decoration:underline;
}

Yeah, :focus baby!

 

I have got it to underline when the text is hovered over, but I moved the a href so that the text would underline when I hovered over the box that it was in.

If I move the a href back around the text and put .post_bottom a{
text-decoration:underline;
}

it will be back where I started.

Does that make sense?

thanks.

 

.post_bottom a{
text-decoration:none;
}
.post_bottom a:hover{
text-decoration:underline;
}

 

Thats what I tried to start with and I didn't work

 

The html source should be like this .
<div class="post_bottom">
<p class="post_bottom_text"><a href="">text in here</a></p>
</div>

Using the <a> tag to wrap the <div> tag (block elements) is not allowed .
Fix the html problems and then discuss the css . Good luck .

 

Correct. You can't do this:
<a href="#"><div> stuff</div></a>

An anchor is an inline, and inlines are like water. Divs are blocks, which are like buckets. Buckets can hold water, but water can't hold a bucket. This is even if you change the anchor to display: block in the css&#8212; the HTML rules still apply.

If you aren't worried about IE6 not working, you can do this (with Knutz' code):

div:hover a {
text-decoration: underline;
}

it says when the div gets hovered, the anchors inside of it get underlined.

IE6 can't hover over non-anchors so for IE6 at least make it that the anchor itself can get underlined:

div:hover a {
text-decoration: underline;
}
* html div a:hover {
text-decoration: underline;
}

so that at least IE6 users get something.

 

But this way it doesn't do what I want because they text only underlines when I hover over the text rather than the box it contains.

 

Then use display:block or put spans in it and use display block on the span, either way, you'll need your fixed height n widths or floats heights n padding.

 

Nice explanation!

fade_to_black the example posted by Stomme works fine, whenever you hover anywhere over the DIV the link will get underlined.

 

As already pointed out, invalid markup from an inline-level wrapping block-level. The solution is to use all inline-level elements and then style off them. You also seem to have more elements than you actually NEED for that layout.

<a href="" class="post_bottom">
	<span>text in here</span>
</a>

Code (markup):

With the following CSS:

.post_bottom {
	display:block;
	position:relative;
	width:640px;
	height:140px;
	text-decoration:none;
	background:url(bottom.jpg) 0 0 no-repeat;
}

.post_bottom span {
	position:absolute;
	left:0;
	bottom:20px;
	width:640px;
	font-weight:bold;
	text-align:center;
	color:#D33C3D;
}

.post_bottom:active,
.post_bottom:focus,
.post_bottom:hover {
	color:#D33C3C; /* slight color change on hover fixes IE bug */
}

.post_bottom:active span,
.post_bottom:focus span,
.post_bottom:hover span {
	text-decoration:underline;
}

Code (markup):

I think that's what you are trying to do...

 

Thanks for all the help guys. I appreciate it.