homepage Welcome to WebmasterWorld Guest from 50.17.66.61
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Hover on Block Level Links
hover effect extenting past the text
Eric in Tennessee

10+ Year Member



 
Msg#: 1967 posted 6:49 pm on Oct 1, 2003 (gmt 0)

I have read, and read, and read, but I can't find the answer, so I am just going to ask because I am sure this is an easy fix to ya'all that are "in the know."

div#content a {display: block; text-decoration: none; color: rgb(100,111,211); font-weight: bold;}
div#content a:visited {color: #CD2626;}
div#content a:hover {background-color: black; color: #FC6;}

With the way that this CSS is written, I am getting orange text with a black background when HOVERED, that's great, just what I want, BUT the black back ground extents all the way across the page - "not what I want."

I want the black background to ONLY go over the text.

What do I need to do?

Thanks in advance,

eTN

 

Tenyque

10+ Year Member



 
Msg#: 1967 posted 7:16 pm on Oct 1, 2003 (gmt 0)

You could try adding
display: inline;

to your hover:

Works for me during a quick test. May have to get rid of display:block completely if this doesn't work out.

Reflection

10+ Year Member



 
Msg#: 1967 posted 8:40 pm on Oct 1, 2003 (gmt 0)

Yup you need to get rid of the display:block; unless there is a specific reason you want your anchors to be block elements.

Eric in Tennessee

10+ Year Member



 
Msg#: 1967 posted 9:46 pm on Oct 1, 2003 (gmt 0)

Tenyque & Reflection:

First off:

div#content a:hover {display: inline; background-color: black; color: #FC6;}

The added display: inline; did the trick.

Secondly: The reason that I have the display: block; is because there is a list of links in the content area that I want listed.

QUESTION:

Should I wrap those links in another div like this:

<div id="contentmenu"></div> and then use the above list and change the name from:

div#content a {}
div#content a:visited {}
div#content a:hover {}

to:

div#contentmenu a {}
div#contentmenu:visited {}
etc..

I will give that a try and see what happens.
Does it look like I am heading in the right direction?

Thanks again guys (or gals; whichever is appropriate)

eTN

Reflection

10+ Year Member



 
Msg#: 1967 posted 11:16 pm on Oct 1, 2003 (gmt 0)

Secondly: The reason that I have the display: block; is because there is a list of links in the content area that I want listed.

So basically you want them on seperate lines? Either use the <br> tag or go with the list(thats what theyre for :)).

I would use the list method.

Also <a> are inline elements so you dont need display:inline; in your style sheet unless you are cancelling out some inheritence.

conjurer

10+ Year Member



 
Msg#: 1967 posted 2:24 am on Oct 2, 2003 (gmt 0)

List-o-Matic [accessify.com] is an online tool for creating navigation using lists and is based on Listamtic [maxdesign.com.au]. I found both to be very helpful.

Eric in Tennessee

10+ Year Member



 
Msg#: 1967 posted 3:02 am on Oct 2, 2003 (gmt 0)

You guys are all great! Thank you so much. I don't believe anything that 4eyes says about ya'all. :)

I have a bunch of reading to do.

Thanks again.

eTN

<added>Listomatic - right on!</added>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved