css rollover problem (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

ziyath -> css rollover problem (2/28/2006 15:17:46)

cud u please help me with this naviagation system in my new site...

only the frontpage is uploaded..its in prodution...

http://www.mhrtrading.com/

the problem with the CSS rollover menu..i want the text in each button

to be vertically in the middle..i tried many methods n ccudnt make it..

cud u please help me...!!!

CSS

#buttons{
height: 29px;
width: 67px;
text-indent: 0px;
font: 14px/1, Ariel;
margin: 0em 0;
color:#fff;
overflow: hidden;
float: left;
background: url(images/buttons.gif) top left no-repeat;
display: block;
}

#buttons:hover{
background-position: bottom left;
}


thanks ziyath



rdouglass -> RE: css rollover problem (2/28/2006 15:51:55)

I don't see any class="buttons" in that code anywhere. WHere (or which buttons) specifically are you trying to attach that CSS code to?



ziyath -> RE: css rollover problem (2/28/2006 17:05:28)

<div align="center"><a href="index.html" class="style24" id="buttons">Home</a></div></td>
<td width="1"><img src="images/menu_divider.gif" width="1" height="29" /></td>
<td width="67"><div>
<div align="center"><a href="profile.html" class="style24" id="buttons">Profile</a></div></td>
<td width="1"><img src="images/menu_divider.gif" width="1" height="29" /></td>
<td width="67"><div>
<div align="center"><a href="products.htm" class="style24" id="buttons">Products</a></div></td>
<td width="1"><img src="images/menu_divider.gif" width="1" height="29" /></td>
<td width="67"><div>
<div align="center"><a href="partners.htm" class="style24" id="buttons">Partners</a></div></td>
<td width="1"><img src="images/menu_divider.gif" width="1" height="29" /></td>
<td width="67"><div>
<div align="center"><a href="contactus.htm" class="style24" id="buttons">Contact</a></div></td>
</div>


this is it...

i also took this from a tuitorial..

can you help me

thanks

ziyath



rdouglass -> RE: css rollover problem (2/28/2006 17:33:41)

That code doesn't seem to be on that link you posted. Do you have another URL?

You're also using it (the CSS code) in an "id" format and the code you showed in your last post has more than 1 element with an id="buttons" in the tag. That is a no-no. [;)] CSS rules dictate that if you're using id, only 1 element with that id. You'll want to use classes yet you're already using classes like so:

class="style24"

Try making the CSS code like this:

.style24 {
height: 29px;
width: 67px;
text-indent: 0px;
font: 14px/1, Ariel;
margin: 0em 0;
color:#fff;
overflow: hidden;
float: left;
background: url(images/buttons.gif) top left no-repeat;
display: block;
}

.style24:hover{
background-position: bottom left;
}

or add that to the first 'style24' CSS.


As to the page you did post initially those 'buttons' seem to be centered fine for me. Again tho, I see not "buttons" class or id in the original page.

That help at all?



ziyath -> RE: css rollover problem (3/1/2006 1:28:17)

thanks i changed Id thing ok

but still i want the buttons in the menu to b vertically in the middle of the button..

www.mhrtrading.com

those codes are from that site man..

please help me more

thanks ziyath


CSS
.style24 {
height: 29px;
width: 67px;
text-indent: 0px;
font: 14px/1, Ariel;
margin: 0em 0;
color:#fff;
overflow: hidden;
float: left;
background: url(images/buttons.gif) top left no-repeat;
display: block;
}

.style24:hover{
background-position: bottom left;
}


HTML
<div>
<div align="center"><a href="index.html" class="style24" id="buttons">Home</a></div></td>
<td width="1"><img src="images/menu_divider.gif" width="1" height="29" /></td>
<td width="67"><div>
<div align="center"><a href="profile.html" class="style24" id="buttons">Profile</a></div></td>
<td width="1"><img src="images/menu_divider.gif" width="1" height="29" /></td>
<td width="67"><div>
<div align="center"><a href="products.htm" class="style24" id="buttons">Products</a></div></td>
<td width="1"><img src="images/menu_divider.gif" width="1" height="29" /></td>
<td width="67"><div>
<div align="center"><a href="partners.htm" class="style24" id="buttons">Partners</a></div></td>
<td width="1"><img src="images/menu_divider.gif" width="1" height="29" /></td>
<td width="67"><div>
<div align="center"><a href="contactus.htm" class="style24" id="buttons">Contact</a></div></td>
</div>



Tailslide -> RE: css rollover problem (3/1/2006 2:55:50)

The text looks to be in the middle to me...

Just in case you're still having problems - what I'd do is to set the line-height to the height of the button - that way the line of text will always be centred vertically.



ziyath -> RE: css rollover problem (3/1/2006 3:25:06)

im sorry guys...the menu was not css then..it was an image rollover...

now its CSS...

can u chk about the vertical center thing...

thanks



Tailslide -> RE: css rollover problem (3/1/2006 4:37:02)

Yeah add in 

line-height:24px;

to your button class and that will centralise it vertically.



ziyath -> RE: css rollover problem (3/1/2006 7:53:31)

thank u very very much

tailside

reg

ziyath



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125