5 replies [Last post]
sharon
Offline
newbie
Last seen: 16 years 28 weeks ago
Joined: 2004-01-29
Posts: 1
Points: 0

I am pulling my hair out over this one and really could use some help. CSS is new to me, so please be gentle. I am trying to SEO a website, starting with a template for the menus and footer. In the process, it was strongly suggested that I use CSS instead of HTML verbage. I have set up a style sheet at :
http://www.rare-cancer.org/style/rare.css

The template that I am working on is here:
http://www.rare-cancer.org/template.html

I am trying to get vertical alignment of the text within the barmenu. That section of CSS looks like this:

.barmenu {
font-family: verdana, arial, helvetica, sans-serif;
margin-left: 25px;
margin-right: 25px;
font-size: 16px;
vertical-align: text-bottom;
background-image: url("http://www.rare-cancer.org/image/_nav.gif")
}

I have tried every vertical-align option that I could find on this forum and in other places, nothing seems to move the text to the middle. Can someone please tell me what I am doing wrong? Thanks, Sharon

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 8 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Vertical alignment help needed

Hi Sharon,
Vertical-align is a little confusing, so I will attempt to explain how it works.

Vertical-align can only be applied tio inline elements such as "span", "a".

Lets start by imagining that we have a span contained in a Paragraph and we are applying vertical-align to the span.

The text in a span is really in a line box or space is reserved for each line of text in the span.

Setting values of "top" and "bottom" are applied to the text within the span so the text should move up or down within it's line.

Values of "baseline", "middle", "sub", "super", "text-bottom", "text-top" are applied to the spans line box relative to the line of the surrounding parents line box.
The default value is baseline which would line the text in both elements.
A value of middle aligns the vertical midpoint of the span with the baseline plus half the height of the parents font.

"sub" and "super" move the span into subscript and superscript positions without changing the font-size.

"text-bottom" aligns the bottom of the span to the bottom of the text line of the paragraph.

So simple really Smile
After all that you may find it easier using margins or padding.

Hope that helps

Zearin Galaurum
Zearin Galaurum's picture
Offline
Regular
Maryland, USA
Last seen: 13 years 35 weeks ago
Maryland, USA
Timezone: GMT-5
Joined: 2004-02-07
Posts: 34
Points: 0

Vertical-align and divs

Hmm... I'm curious, why can vertical-align apply only to inline elements? I'm sure there's a structural reason, but I can't think of it.

Anyway I'm going crazy trying to vertically align a div myself! Can you help? It's a floating div that I want to vertically-align: bottom, and after seeing your post I even tried display:inline to see if vertically-align would then work. It didn't. Making a span inside the div didn't do much either. (I'm testing in IE6 first before moving onto testing others.)

Can you help me? You can find my troublemaker at http://tony.gonk.net/test/test.html . It's the div on the bottom right, dark bluegray, and has the W3C buttons in it. That's the culprit.

-- Zearin Galaurum
http//tony.gonk.net

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 39 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Vertical alignment help needed

Zearin,

Vertical align works within the line. For example I used vertical align on some small images I was using as bullets next to some text. The images were sitting on the bottom of the line, so the bottom of the image was the same as the bottom of the text. I wanted the middle of the image to line up with the middle of the text, so forced the images to the middle by
vertical-align: middle;

Your problem is a separate issue - you are trying to get the images to drop to the bottom of the div. At the moment all vertical align is doing is telling the images to sit below or lower in the line.

You have to treat it as a positional problem, not an alignment problem. Send them down there using absolute positioning or have something above them to force them down, or use margins or padding.

Regards
Day

The only way to learn is to do it yourself

Zearin Galaurum
Zearin Galaurum's picture
Offline
Regular
Maryland, USA
Last seen: 13 years 35 weeks ago
Maryland, USA
Timezone: GMT-5
Joined: 2004-02-07
Posts: 34
Points: 0

Vertical-align

Thanks Daybreak_0. (Sorry for the dupe post. It occurred to me after the fact to search the forums rather than starting my own topic.)

Hmm. It looks like I'll have to take your positioning suggestion. Would I be audacious if I thought it's a little strange that you can't vertically align an entire element? Does anyone know if the W3C are working on this, or something? I'm honestly very surprised there's not a way to do this with CSS already, given the very reasoning behind its existence in the first place....

-- Zearin Galaurum
http//tony.gonk.net

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 39 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Vertical alignment help needed

I don't know.

Let me say that there seems to be some fundamental problems with CSS which I think it was Skyrocket pointed out they are trying to fix in CSS3.

The pure CSS enthusiasts believe you should always use CSS and the old guard think Tables are better, but nearly all are coming around to believe a combination is ok depending on what you are doing. Some to a lesser degree than others.

The fact is that even if what you wanted was introduced now you probably would not be able to use it for many years, until the browser supports it, and users have upgraded.

So-
1) Use what you feel comfortable using, but keep pushing yourself out of the comfort area in the direction of pure CSS.
2) Time is money, and in some circumstances, positioning with CSS can take double the time than using a simple table, because of all the hacks, but in say 5-10 more years then CSS may be better as users and browsers have caught up.

Regards
Day

The only way to learn is to do it yourself