3 replies [Last post]
TSemmes
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2004-03-10
Posts: 35
Points: 40

I am trying to create squares boxes that contain a text link using CSS.

This is the CSS I am using.

#link1 a{ font: bold 14px/18px Arial, Helvetica, sans-serif;
color: white;
display:block; vertical-align: middle;
width: 100px; height: 100px;
text-decoration:none; background-color: #88CC55;
}
#link1 a:hover{ background-color: #0099CC;
}

You can see the results at http://www.tgscomm.com. The link " About TGS" I want to be centered (vertically as well as horizontally) in the green box. vertical-align: middle doesn't seem to do it. Any ideas?

Tom

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Centering text in display block links

Hi

You can only style to be vertically centered by using padding etc.

Trevor

TSemmes
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-5
Joined: 2004-03-10
Posts: 35
Points: 40

Using tables for nav bar

Can you change the background color of a TD when you hover over the link it contains using CSS?
Also can you center the text vertically in each TD?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Centering text in display block links

Hi

Can't see why not.

Never tried it.

You would just add a onmouseover="this.style.class='myhoverclass'" to the td tag. I guess. Wouldn't affect the border though, coz the border isn't part of the element (that is, the mouse over the border wouldn't cause the hover event, it would have to be over the cell itself).

So you might want the border set to 0.

Trevor