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

Thursday, September 27, 2012

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

body {
padding: 0;
margin: 0;
.header > ul {
width: 800px;
background: #123456;
.header > ul > li {
list-style: none;
display: inline-block;
.header li a {
padding: 10px;
.header h1 {
position: absolute;
left: -1000px;
margin: 0;

.header h1 a {
width: 115px;
height: 39px;
background: url(_logo_115x39.png) top left no-repeat;
padding: 0;

<div class="header">
<li id="logo"><!--logo-->
<a href="#"><h1>Immaculate</h1></a>
</li><!--End logo --> 
<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>
<li id="login" lang="en"><a href="#">Log In</a></li>
</ul><!-- End Navigation--> 

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


Post a Comment

Note: Only a member of this blog may post a comment.

Copyright © 2010 Web Design | Free Blogger Templates by Splashy Templates | Layout by Atomic Website Templates

Vida de bombeiro Recipes Informatica Humor Jokes Mensagens Curiosity Saude Video Games Animals Diario das Mensagens Eletronica Rei Jesus News Noticias da TV Artesanato Esportes Noticias Atuais Games Pets Career Religion Recreation Business Education Autos Academics Style Television Programming Motosport Humor News The Games Home Downs World News Internet Design Entertaimment Celebrities 1001 Games Doctor Pets Net Downs World Enter Jesus Mensagensr Android Rub Letras Dialogue cosmetics Genexus lasofia thebushrajr wingshock tripedes gorduravegetal dainfamia dejavu-transpersonal jsbenfica republicadasbadanas ruiherbon iranianforaryans eaystcheyl fotosdanadir Só Humor Curiosity Gifs Medical Female American Health Madeira Designer PPS Divertidas Estate Travel Estate Writing Computer Matilde Ocultos Matilde futebolcomnoticias girassol lettheworldturn topdigitalnet Bem amado enjohnny produceideas foodasticos cronicasdoimaginario downloadsdegraca compactandoletras newcuriosidades blogdoarmario arrozinhoii