Gladiatorus Posted January 19, 2011 Share Posted January 19, 2011 Hello: This is what I have: and this is what I need (how can I achieve this?): 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 More sharing options...
0 Cupcakes Posted January 19, 2011 Share Posted January 19, 2011 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 More sharing options...
0 Gladiatorus Posted January 19, 2011 Author Share Posted January 19, 2011 You,Sir, are a Master. Thank you Very Much!!! :punk: (Y) Link to comment Share on other sites More sharing options...
0 the better twin Posted January 19, 2011 Share Posted January 19, 2011 You,Sir, are a Master. Thank you Very Much!!! :punk: (Y) I dont think cupcakes is a Sir :p Link to comment Share on other sites More sharing options...
0 -KJ Posted January 19, 2011 Share Posted January 19, 2011 I dont think cupcakes is a Sir :p That would be quite worrisome. Link to comment Share on other sites More sharing options...
0 Quattrone Posted January 19, 2011 Share Posted January 19, 2011 You,Sir, are a Master. Thank you Very Much!!! :punk: (Y) He is a she :p Link to comment Share on other sites More sharing options...
0 Gladiatorus Posted January 20, 2011 Author Share Posted January 20, 2011 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 More sharing options...
Question
Gladiatorus
Hello:
This is what I have:
and this is what I need (how can I achieve this?):
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