4 replies [Last post]
Jeroen_Brouwer
Offline
newbie
Netherlands
Last seen: 16 years 42 weeks ago
Netherlands
Joined: 2004-07-23
Posts: 2
Points: 0

Hello,

I'm dutch so my english can be very crap!

I'm nog a nOOb in CSS but with this question can't I find the answer. This is the standart hover for your links:

a:link { font-size: 12px; color: #373737; font-family: Verdana, Arial; text-decoration: none; }
a:visited { font-size: 12px; color: #373737; font-family: Verdana, Arial; text-decoration: none; }
a:hover { font-size: 12px; color: #373737; font-family: Verdana, Arial; text-decoration: underline; }
a:active { font-size: 12px; color: #373737; font-family: Verdana, Arial; text-decoration: none; }

But thats not what i want. Here can you see a sample in the menu left. I want that but without a border. Can annybody help me, please?

Jeroen Brouwer

Jeroen_Brouwer
Offline
newbie
Netherlands
Last seen: 16 years 42 weeks ago
Netherlands
Joined: 2004-07-23
Posts: 2
Points: 0

Give your <div></div> a color

Sorry for this post, but..thoes nobody know this?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Give your <div></div> a color

Hi Jeroen_Brouwer,

I'm not too sure what your after, if you mean the links on the horizontal menu to the left then they have used the background property on the hover rule background: #ccc; they are using a table structure though and the hover is applied to the cell background if you use it on straight links it will only effect the text, you will need to use display: block; to fix a width/ height.
Hope that helps some,

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 3 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Give your <div></div> a color

If you have a look at the css and html for the links in the top right of that page, you'll see what else you can do with CSS and mouse hovers.

Simply, what you should do is give your link a class such as link :

<a href="#" class="link"> your link </a>

Then in the css put this:

a.link {width: 150px; background: #ccc; color: #fff; text-decoration: none;}

a.link:hover { width: 150px; background: #fff; color: #000; text-decoration: underline; border: 1px solid green; }

This will automatically give every link with a class 'link' a width, a grey background and white text. On mouseover it will give a white background, underlined black text, and a green border.

Play around with the values, see what you come up with.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Give your &lt;div&gt;&lt;/div&gt; a color

thepineapplehead,

You can't give a width to an inline element a.link {width:150px;} won't work you would have to apply it to a table cell or block style it
and naming a class that way could lead to confusion, looks like a mis written psuedo class selector a.link !

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me