[Design with CSS 3767] Re: vertical-alignment of inlined elements

hello, too lazy to signup pastebin so just inline in the reply.

Be scarse with id's i kept a few of yours here, but just because i was lazy.

A class will be just as fast, and some element like a h1 inside a #header, will always be unique in that location

so just useing the xpath of the html is a friendlier way to go.

like #header h1 ... and #header h1 a

i removed some excessive html, i hope this is waht you ment

oh and i added some seo for your logo, just added the text to the h1 and moved is way out of the viewport and replaced it with the background image in css

screen readers / search engines will see the text, users will see the logo

css:

body {

padding: 0;

margin: 0;

}

.header > ul {

padding:0;

margin:0;

width: 800px;

height:38px;

background: #123456;

display:block;

}

.header > ul > li {

padding:0;

margin:0;

list-style: none;

height:38px;

display: inline-block;

float:left;

}

.header li a {

display:inline-block;

padding: 10px;

}

.header h1 {

position: absolute;

left: -1000px;

padding:0;

margin: 0;

}

.header h1 a {

width: 115px;

height: 39px;

background: url(_logo_115x39.png) top left no-repeat;

padding: 0;

}

html:

<div class="header">

<ul>

<li id="logo"><!--logo-->

<a href="#"><h1>Immaculate</h1></a>

</li><!--End logo --> 

<!--Navigation-->

<li id="one"><a href="#" title="Hem">one</a></li>

<li id="two"><a href="#">two</a></li>

<li id="three"><a href="#">three</a></li>

<li id="four"><a href="#">four</a></li>

<li id="language-option">

<ul id="language-option-nav">

<li id="ch"><a href="#">ch</a></li>

<li id="en"><a href="#">en</a></li>

</ul>

</li>

<li id="login" lang="en"><a href="#">Log In</a></li>

</ul><!-- End Navigation--> 

</div>

On Wednesday, September 26, 2012 3:25:53 AM UTC+2, MiB wrote:

I have a problem of vertical alignment of inlined list items in the horizontal navigation menu of a header. I can't use floats because of the rest of the layout.

I was thinking that I could use a larger line-height for the list items, but it doesn't really help that much this time. The list items more or less just sit there, at least when I use the Google Droid font. I also tried vertical-alignment, but nothing.

The basic structure is header -> header-content ->navigation > li > a
All of the list items are set to display:inline.
There's also a list item enclosed h1 element which has an enclosed image:  li > h1 >img and a submenu in there: li > ul > >li > a, of which the image complicates things as it has a fixed height of 39px.

The header div sets the height of 4 ems and also a background color.  It's within these 4 ems that I need to vertically align the content of my navigation.

I need some ideas how to accomplish this kind of vertical alignment. Suggestions? :-)

You can find a full code example of the problem here: http://pastebin.com/zcLspjJz

--
--
You received this because you are subscribed to the "Design the Web with CSS" at Google groups.
To post: css-design@googlegroups.com
To unsubscribe: css-design-unsubscribe@googlegroups.com