Dear all,

please help me solve this issue,

i have buttons of fixed width, in one button the text is of one line in another it has 2 lines like that.

i want the text to be aligned center to the button height and width, irrespective of the text is single line r 2 lines.

on mouse over i want the bg image of the button to change as well as the text color,

how to do this?

please let me know.

Thank you.

Edited January 29, 201115 yr by jayaraman

You've got two questions there.

Try a style for the a tag and a: hover

a, a:hover { text-align: center; }

 

If you want the text on one line to be in a button of the same height as the one with two lines of text you may need to add a height to make all the buttons the height for two lines and add a span to the one-line buttons to add padding-top to the text to center it vertically.

 

To make the button and text change on hover, make a new a:hover style

a { background: url(image1.jpg); color: blue; text-align: center; display: block; width: ??px; height: 40px; }
a:hover { background: url(image2.jpg); color: red; text-align: center; }
a span, a:hover span { display: block; padding-top: 10px; }

<a href="link1.html"><span>Link 1</span></a>
<a href="link2.html">Link 2 link text on two lines</a>

 

I don't know how high your button images are, but 40px is about the right height for two lines of text.

 

It's a bit difficult to know if the above will work without seeing all your code, but it's one way to do it.

Edited January 29, 201115 yr by Wickham

You've got two questions there.

Try a style for the a tag and a: hover

a, a:hover { text-align: center; }

 

If you want the text on one line to be in a button of the same height as the one with two lines of text you may need to add a height to make all the buttons the height for two lines and add a span to the one-line buttons to add padding-top to the text to center it vertically.

 

To make the button and text change on hover, make a new a:hover style

a { background: url(image1.jpg); color: blue; text-align: center; display: block; width: ??px; height: 40px; }
a:hover { background: url(image2.jpg); color: red; text-align: center; }
a span, a:hover span { display: block; padding-top: 10px; }

<a href="link1.html"><span>Link 1</span></a>
<a href="link2.html">Link 2 link text on two lines</a>

 

I don't know how high your button images are, but 40px is about the right height for two lines of text.

 

It's a bit difficult to know if the above will work without seeing all your code, but it's one way to do it.

 

 

Thanks for your reply mate.

here im attaching a sample for you, this is how i want the output to be.

This was my test code. Copy/paste it completely and save with a different filename and have a look, then adapt for your needs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="keywords" content="Wickham">                
<meta name="description" content="Test items">            
<meta http-equiv="content-type" content="text/html;  charset=utf-8">

<title>Test</title>                  

<style type="text/css">
li { float: left; width: 150px; height: 40px; list-style: none; }
a { background: yellow url(image1.jpg); color: blue; text-align: center; 
display: block; width: 150px; height: 40px; }
a:hover { background: red url(image2.jpg); color: lime; text-align: center; }
a span, a:hover span { display: block; padding-top: 10px; }
</style>

</head>

<body> 
<ul>
<li><a href="link1.html"><span>Link 1</span></a></li>
<li><a href="link2.html">Link 2 link text on two lines</a></li>
<li><a href="link3.html"><span>Link 3 link</span></a></li>
</ul>

</body>
</html>

thanks a lot mate

its working exactly the same

i missed the display: block code and the span idea dint strike me anyway thanks a lot

have one more query for you guys...

i want to do drop down menu in the format. as in the sample plz help me with this too.

thank you.

please give me a sol for this there is a conflict bet the top menu and the drop down menu so wat happens is the main menu css is getting reflected for the drop down menu too...

hope to get a reply soon....

thanks...

hey guys some how i managed to do it with jquery

but i have a problem in IE8 when i try to tile the png image with drop shadow i can see a black color in the transparent area how to fix this problem?

hope to get a reply...

hey guys some how i managed to do it with jquery

but i have a problem in IE8 when i try to tile the png image with drop shadow i can see a black color in the transparent area how to fix this problem?

hope to get a reply...

 

UnitPNG

whats that mate i dint get you.