navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

css rollover problem

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> css rollover problem 		Page: [1]
 
ziyath

 

Posts: 30
Joined: 10/30/2005
From: maldives
Status: offline

  		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

 

Posts: 9167
From: Biddeford, ME USA
Status: offline

  		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?

_____________________________

Don't take you're eye off your final destination.

ASP Checkbox Function Tutorial.

(in reply to ziyath)
ziyath

 

Posts: 30
Joined: 10/30/2005
From: maldives
Status: offline

  		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

(in reply to rdouglass)
rdouglass

 

Posts: 9167
From: Biddeford, ME USA
Status: offline

  		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?

_____________________________

Don't take you're eye off your final destination.

ASP Checkbox Function Tutorial.

(in reply to ziyath)
ziyath

 

Posts: 30
Joined: 10/30/2005
From: maldives
Status: offline

  		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>

(in reply to rdouglass)
Tailslide

 

Posts: 5945
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		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.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to ziyath)
ziyath

 

Posts: 30
Joined: 10/30/2005
From: maldives
Status: offline

  		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

< Message edited by Spooky -- 3/4/2006 21:05:11 >

(in reply to Tailslide)
Tailslide

 

Posts: 5945
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		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.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to ziyath)
ziyath

 

Posts: 30
Joined: 10/30/2005
From: maldives
Status: offline

  		RE: css rollover problem - 3/1/2006 7:53:31   
thank u very very much

tailside

reg

ziyath

(in reply to Tailslide)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> css rollover problem 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Back to top

  Microsoft Corporation in no way endorses or is affiliated with "OutFront."
  OutFront is published and edited by Thomas Brunt.
  440 Great Circle Dr., St. Matthews, SC 29135.
  © 2008 All Rights Reserved
  Click here to view our privacy statement.