• 0

CSS links help


Question

Hello:

This is what I have:

946161763.jpg

and this is what I need (how can I achieve this?):

938577152.jpg

These links are inside a <div> that is 170px wide.

This is my CSS code for these links.

a.left-menu:link {
	font-size: 13px;
	font-weight: normal;
	color: #FFFFFF;
	text-align: left;
	text-decoration: none;
	display: block;
}

a.left-menu:visited {
	font-size: 13px;
	font-weight: normal;
	color: #FFFFFF;
	text-align: left;
	text-decoration: none;
	display: block;
}

a.left-menu:hover {
	font-size: 13px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #CC0000;
	text-align: left;
	text-decoration: none;
	display: block;
}

a.left-menu:active {
	font-size: 13px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #CC0000;
	text-align: left;
	text-decoration: none;
	display: block;
}

Thanks.

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Easy peasy:

 display: block;

Add that bit to your main link class (a.left-menu:link) :).

To style it to look neater, you will need to just add some padding.

 padding: 4px 0 4px 10px; /* top right bottom left */

Edit: You can also remove some of the duplicated styles. What you apply to your main link class will append to the others. So you can remove:

        font-size: 13px;
        font-weight: normal;
        text-align: left;
        text-decoration: none;
        display: block;

You only need to use that once for your main class. Also, you shouldn't have to use font-weight: normal; as it will be normal by default, same goes for text-align: left;. It's also default but if you have a container that has it set otherwise, perhaps reset it to text-align: left; in the parent container for your links rather than on the link styling itself.

Link to comment
Share on other sites

  • 0

Oh, I'm sorry :blush:, let me rephrase:

You, Madam, are a Mistress.

Thank You Very Much!!!

And thanks everyone else for letting me know :D

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.