14 replies [Last post]
meglamaniac
Offline
Regular
Last seen: 7 years 33 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

I'm trying to overhaul my website using XHTML and CSS.
The downside to this being that I first need to learn XHTML and CSS Laughing out loud

Anyway.
I'm trying to do my navigation so that links are overlaid on an image and the background to the link turns white when you mouse-over.
So far so good, not a problem.
Link:
http://www.megla.net/concept/home.html

HOWEVER:
I cannot for the life of me get the text of the link to vert-align centre - it always floats to the top of the box defining that link.

I have a feeling that the way I've done the links is totally crappy.
Please if you have a better way to acheive the same thing then tell me, I'll be the first to admit I really don't know much about what I'm trying to do here. Smile

Thanks for any help you can give me

rmfred
Offline
Elder
Rock Springs, WY
Last seen: 8 weeks 3 days ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Can't get vertical-align to work... argh!

try adding some padding-top of about 5px to .menu
.menu{padding-top:5px; position:relative;}

That did the trick in FF... might not be the answer for other browsers?

www.powerbitwebdesign.com Powerbit your custom web design company

meglamaniac
Offline
Regular
Last seen: 7 years 33 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

Can't get vertical-align to work... argh!

Thankyou for your quick response.

You are quite right, that does work - however, it will have to be redone if I changed the font size or anything.
Can you explain in idiots terms why the vertical-align attribute doesn't work here?

Also, what do you think of the way I've implimented this? Bodgejob or not?

Thanks.
Smile

rmfred
Offline
Elder
Rock Springs, WY
Last seen: 8 weeks 3 days ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Can't get vertical-align to work... argh!

The vertical-align property in CSS has given gray hair to many a starting css coder until they finally realized what this property is, and what it is not.

This property does not vertically align elements inside a box element. It is not the CSS equivalent for the HTML attribute valign="middle".

Vertical-align aligns the content inline. This means it is vertically aligned in comparison to the elements right before and after, and not in reference to parent/child. This means that this property can align text within a line or inside a <td>.

Quote:
Also, what do you think of the way I've implimented this? Bodgejob or not?

hard to tell without some more content on the page... to get an idea of how it's going to look

www.powerbitwebdesign.com Powerbit your custom web design company

meglamaniac
Offline
Regular
Last seen: 7 years 33 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

Can't get vertical-align to work... argh!

Uh oh, back again!

While it does reposition the text, it mucks up the background change on mouse-over (that comes down too, leaving some of the original image showing).

Back to the drawing board.

Any other ideas?

Sad

sercotec
sercotec's picture
Offline
Regular
Istanbul
Last seen: 1 year 37 weeks ago
Istanbul
Timezone: GMT+2
Joined: 2004-09-20
Posts: 41
Points: 1

That is the trick

A common problem with vertical aligning here is the solution

For example: The height of your menu button, or lets say the height of the area where you want the text to get middle aligned is 30 px. Declare the line height so just add this line to your css section for the button.

line-height: 30px;
vertical-align: middle;

That will do the trick

Good luck...

Serkan Erturk
Sercotec
www.sercotec.net
Primus Inter Pares

meglamaniac
Offline
Regular
Last seen: 7 years 33 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

Can't get vertical-align to work... argh!

That works perfectly in Mozilla, but...

*sigh*

Good old IE and it's broken box model screw it up.
The links get progressively lower the further right they are in IE. Damn damn damn.

If I was to redo the menu a different way is there some way around this? If so how should I try to do it?

sercotec
sercotec's picture
Offline
Regular
Istanbul
Last seen: 1 year 37 weeks ago
Istanbul
Timezone: GMT+2
Joined: 2004-09-20
Posts: 41
Points: 1

Can't get vertical-align to work... argh!

There is nothing wrong with ie6.0 I dont know other versions but this works perfectly in ie.60, I could not just understand the issue with the background picture but you should check that there shouldnt be any values of paddings or margins. And you must be sure that all of the images are at the exact height of your box height, by the way dont forget to declare the box height (in your site it is 27px I guess)

dont forget to remove this (padding-top:5px)

Serkan Erturk
Sercotec
www.sercotec.net
Primus Inter Pares

meglamaniac
Offline
Regular
Last seen: 7 years 33 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

Can't get vertical-align to work... argh!

The image isn't "there" in terms of layout, it's a background image for the div so doesn't actually intersect anything.
However (haha!) I think I've fixed it by trying a different approach.

I've uploaded the new files over the ones I was having trouble with, so if you want to see the old ones please refer back to the attachments in my first post.

Summary of the changes:
Decided to go with a UL/LI structure instead.
Modified it to float left.
Set required width and height, relative position from the top of the header div, and applied the line-height suggestion posted above.
Wrote the relevant CSS to convert links within the LI items to the style I want.

Success! No box-model issues at all, works fine in both browsers, and the text is where I want it.

It'll still need adjusting if I alter the font, but nothing's perfect I guess.

In the spirit of passing the fixes along, I've attached the corrected files again.
Thanks for all the help. Now I can get back to doing the bit I find more enjoyable: the graphic design.

What do you think by the way? I know it's hard to tell from one header but thats as far as I've got.
Give me a few mins and i'll upload the other headers.

meglamaniac
Offline
Regular
Last seen: 7 years 33 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

Can't get vertical-align to work... argh!

Upload complete, the links now work and link to the different sections (well the headers change anyway heh).

rmfred
Offline
Elder
Rock Springs, WY
Last seen: 8 weeks 3 days ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Can't get vertical-align to work... argh!

Much better... uh... what you gonna do if you ever need more menu items? Looks like you'll have to redo your background graphics?

www.powerbitwebdesign.com Powerbit your custom web design company

sercotec
sercotec's picture
Offline
Regular
Istanbul
Last seen: 1 year 37 weeks ago
Istanbul
Timezone: GMT+2
Joined: 2004-09-20
Posts: 41
Points: 1

Can't get vertical-align to work... argh!

you give the signals of doing nice jobs after a hard working period

Serkan Erturk
Sercotec
www.sercotec.net
Primus Inter Pares

meglamaniac
Offline
Regular
Last seen: 7 years 33 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

Can't get vertical-align to work... argh!

rmfred wrote:
Much better... uh... what you gonna do if you ever need more menu items? Looks like you'll have to redo your background graphics?

You're perfectly right to point this out - the first rule of web design is forward planning I find.

Everything on the header image, including the navigation section, is a single graphic except for the link text (and the link backgrounds on mouseover/selection).

All 5 headers are generated from a single PSD (photoshop file).
The file has 6 different layer sets.

Set 1 is the overlay graphics which appear on every header - that is the navigation panel, the "megla.net" in the bottom right corner, and the "V2" on the right of the image.
The navigation panel is further split down into a semi-transparent white box with a stroke style (that does the very slightly transparent black border around it), and some vector lines that are the dividers.

Sets 2 through 6 are the section specific graphics.
For each set there is simply a layer with the spot-graphic, and a text layer with an outer glow applied (that's the black haze round the text).

So, if I ever want to extend the options, it's not actually that hard.
I can extend the white box of the navipanel and shove in another divider line, or I can nudge the existing lines closer and add another, or a combination of both of these options.
Ouputting each header is simply a matter of turning on the layer set relating to the header I want to save out, and saving as JPEG.

This makes it incredibly easy to apply changes across all 5 headers at once.
Simple with a bit of planning Smile

antorera
Offline
newbie
Barcelona
Last seen: 7 years 12 weeks ago
Barcelona
Joined: 2007-08-13
Posts: 5
Points: 0

Just wanted to say thanks! I

Just wanted to say thanks! I found this solution through a search of the archives and it worked for my problem.

I was using padding-top to position text vertically in a footer bar, which worked fine except for IE6 where it pushed out the box the amount of padding specified both at the top and bottom.

So glad to find this solution as it is much cleaner.

-Antonella :thumbsup:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2004-06-30
Posts: 9668
Points: 801

Kudos for searching and

Kudos for searching and finding the answer, it's always great to search and figure something out yourself. Thanks for letting us know! Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies