15 replies [Last post]
tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

I've searched on this and haven't found the topic I am looking for.

I have a menu at the top of my page which is created from an unordered list.

It is horizontal and contains 8 links.

Two of the links are two-word titles. Because of the length of the DIV - the two word titles wrap... which is fine or else the text would have to be too small to exist on one line.

The problem is that, for the life of me, I can't get the text to vertically align in the middle. And I can't go tell the client that they can only use one word titles.

Here is the DIV code for the stlye in question. BTW - I have tried vertical-align: middle; to no avail everywhere in the code.

-------------------------------------------------

#nav ul {
margin: 0;
padding: 0;
background-color: #66CC00;
position: absolute;
left: -9000px;
z-index: 10000;
}
#nav a {
display: block;
font-size: 11px;
text-decoration: none;
text-align: center;
padding: 10px 6px 10px 0px;
border-right: 1px solid #6699CC;
color: #ffffff;
line-height: 1;
}

------------------------------------------------------------

Thanks - this is my last major structural battle.

tg

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 38 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

UL Horizontal Menu > Vertical Alignment Issue

What do you mean by line-height: 1; ?

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

UL Horizontal Menu > Vertical Alignment Issue

DanA wrote:
What do you mean by line-height: 1; ?

line-height sets the distance between lines. it will multiply the line-height you set by the font size...

tiger2808, is it possible to give us a live link, or at least all your css and xhtml code?

larmyia

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

UL Horizontal Menu > Vertical Alignment Issue

work is here:
http://www.fizzcreative.com/balloon/

(the menu issue should be apparent)

the relevant CSS is located here:
http://www.fizzcreative.com/balloon/p7pm/p7pmh0.css

hope this helps...

have to run an errand - will check back in when I get back. Thanks.

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

UL Horizontal Menu > Vertical Alignment Issue

do you mean that with those 2 menu items you want them to sit in the middle of their "rectangle" and therefore not aligned with the other menu items??

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

UL Horizontal Menu > Vertical Alignment Issue

Yes - the two items circled here:
http://www.fizzcreative.com/balloon/images/menuAlignIssue.jpg

I would like them moved up so they dont extend past the blue.

If CSS would work like tables (which I am trying to get away from) they all actually fit on one line (if they were in a table). But the equal witdhs of the boxes means to me, atleast, that it can't be done to resemble tables.

I can post a crude mock of what I'd like to accomplish if need be.

Thanks!

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

UL Horizontal Menu > Vertical Alignment Issue

Look at this:
http://www.fizzcreative.com/balloon/images/desired.jpg

except for the sloppy mockup - this is what I would like to achieve.

Thanks

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

UL Horizontal Menu > Vertical Alignment Issue

I'm sure someone better versed could come up with something better, but this works in ff.

I think I'd give a class to these 2 renegade menu items (prob in the <li>) and then use negative margins.

I tried this with your current code:

#menuMain li a.p7PMtrg {
margin-top: -5px;
}

obviously it affects the other elements named .p7PMtrg (hence my idea of putting a class on the <li> which wouldn't affect what you've already done. of course on the <a> would work too.

note: only tested in ff.

larmyia

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

UL Horizontal Menu &gt; Vertical Alignment Issue

I understand what you did, but have a broader question...

Is this an instance where it may be easier to address it as a table as opposed to a UL with CSS?

While I am trying to integrate a lot more CSS into my work - I'm wondering if this is a proper place. Because - at larger font sizes this portion of the layout easily corrupts.

Any thoughts?

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

UL Horizontal Menu &gt; Vertical Alignment Issue

tiger I think part of your dilemma rises from the fact your still developing with a table mindset. I think in order to move forward you need to change your way of thinking. tables are only for tabular data, and a list of links is better (not perfectly possibly, but better) represented by <ul>

I don't deny that there are times that parts of layout may seem easier with tables, but if developed from scratch with a css-p in mind, I think this is not usually the case.

my solution related to your particular problem.

but keep in mind that if at some time in the future your client decides he wants his menu on the left, or where ever, changing it will take you minutes on one css page, rather than adjusting table menus on every page.

I wonder if your font problems rise from your menu construction (ie using position: absolute). when choosing your menu design you need to take accessibility into consideration.

I'm sure there's another way of doing it so that it does resize well...

imho css-p is the only way to go, but go to another forum, and you'll find another opinion. this forum is about standards, accessibitiy and semantically correct markup. we believe it is the way forward.

hth

larmyia

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

UL Horizontal Menu &gt; Vertical Alignment Issue

I agree.

I made some simple, yet understandably rookie, observations regarding the page I am creating. Particularly - why my bottom menu is so fluid as opposed to my top menu. And why does my top menu look like a jumbled mess at larger font sizes.

With that in mind, and with the fact the top menu was created using a Project 7 extension - I have begun rebuilding the page to create:
1 - a fluid expandable page
2 - work on fixing the top menu to share the same fluis characteristics the bottom menu does. To do that, I need to understand how P7 did what they did. And I'm in the middle of that now.

It's all taking time, but I agree with you, and I'd rather do it right the first time!

I'm currently rebuilding at:
http://www.fizzcreative.com/balloon/index2.html

Thanks for the moment!

tg

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

UL Horizontal Menu &gt; Vertical Alignment Issue

Opps...

Currently flustered..

Cannot get my menu to center align to match my bottom menu...

Page is at:
http://www.fizzcreative.com/balloon/index2.html

Bottom menu (exhibiting correct behavior) is governed by #navfooter located at:
http://www.fizzcreative.com/balloon/styles2X.css

While my cludgy top menu is governed by:
http://www.fizzcreative.com/balloon/p7pm/p7pmh0X.css

I have tried putting text-align: right; in all the statements in which I think they belong, only to remove them after they did not work.

This went from "this isn't that hard" to "maybe I better try it this way" to "this is sort of making me mad!"

Any help is appreciated. I will continue different things in the interim in hopes of a solution.

Thanks!

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

UL Horizontal Menu &gt; Vertical Alignment Issue

I appreciate this is no help to you, but I would have thought #menuMain {margin: 0 auto;} would have worked (it doesn't).

will try and attack this later on when I get back

larmyia

ps sorry i can't be of more help. I know how frustrated you must be!

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

UL Horizontal Menu &gt; Vertical Alignment Issue

I went to projectSeven's website and poked around. The sites states that it connot be center aligned...
here is the link:
http://www.projectseven.com/support/answers.asp?id=169

so I will make due. It is okay and i have worked out some major issues.

Thanks for the follow up.

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

UL Horizontal Menu &gt; Vertical Alignment Issue

oic. so are you going to use the P7_centerTag script? lmk how you get on.

sorry I wasn't more help.

larmyia

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

UL Horizontal Menu &gt; Vertical Alignment Issue

Really I don't know.

I'm not thrilled with the work that has gone into an appearance that is not entirely consistant between browsers. And I don't know how to fix that.

Being CSS - the menu can grow with font - but once it outgrows the space - it wraps, the bg only wraps in certain browsers - and anarchy ensues...