Vertically align text in responsive css menu (with a logo on right)

HTML & CSS
21

[FONT=Verdana]Post #17 errata:

.header ul {
and
.header li {

should have been classed as

.menu ul {
and
.menu li {

[/FONT]

22

Again thanks for the help… really great solution, I was trying a lot of things, but wasn’t successful at all. I think this might help many others too. How come that I can’t align text to right side (when resizing browser down and menu gets into second line)? I tried with text-align and with float, but it doesn’t want to stay on right side - this is not such a big deal, but it would be nice since menu is meant to be on right by default.

I’ve uploaded your code to server, so others will be able to see it in action:
http://ninostar.atwebpages.com/responsive-css-menu.html

23

You should be able to change float: left to float: right here:

.menu li {
border: 1px solid lime;
float: [COLOR="#FF0000"]right[/COLOR];
text-align: left;
font: 1em Georgia, serif;
padding: 0;
margin: .25em .6em;
}

But you may want to reorder the links in that case, as they will appear in reverse order. It’s not ideal.

24

Changed float attribute and text order… problem is that “home” gets in second line, instead of “contact”… you can check online (on previously mentioned link).

25

You haven’t updated the page online yet.

26

I’ve uploaded it again… menu is now always on right, but you will see what happens when you resize browser down.

27

Instead of float: right on the LIs, you could use display: inline-block. Then they will drop as you want, and the HTML order is better (back to the original order).

28

Another way to change the direction of alignment of the menu items without changing their order in HTML is to change:


.menu li {[COLOR="#FF0000"]float:left|right;[/COLOR]}

to:


.menu li {[COLOR="#0000FF"]display:inline-block;[/COLOR]}

FYI:the direction of menu item alignment is inherited from:


.menu {text-align:right}

There is one more nuance that is only noticable at very narrow window widths and when menu items contain multiple words.
The alignment of the text within the menu item is set in .menu li a {}. To change that behavior from left justify to right justify, change:


.menu li a {text-align:[COLOR="#FF0000"]left[/COLOR];}

to:


.menu li a {text-align:[COLOR="#0000FF"]right[/COLOR];}

The attached screen shot demonstrates this behavior I’m referring to.

Off Topic:

Edit: sorry Ralph, I didn’t turn the page and see yours and the OP’s exchanges before posting this.

May as well add the current version:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?953882-Vertically-align-text-in-responsive-css-menu-%28with-a-logo-on-right%29
Thread: Vertically align text in responsive css menu (with a logo on right)
2013.01.14 09:34
ninostar

Tested in IE 8 & 9, Firefox 18 and Chrome 24
-->
<head>
    <title>Sliding Menu Items 3</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

.header {
    outline:1px solid #00f;
    width:90%;
    display:table;
    table-layout:fixed;
    vertical-align:middle;
    margin:0 auto;
}
.logo {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border:1px solid #0ff;
    width:200px;
}
h1 {
    background-color:#ddd;
    width:200px;
    padding:.4em 0 .6em;
    margin:0;
}
.menu {
    display:table-cell;
    text-align:right;
    vertical-align:middle;
    padding:0 10px;
}
.menu ul {
    list-style-type:none;
    display:inline-block;
    border:1px solid #f00;
    padding:0;
    margin:0;
}
.menu li {
    border:1px solid #0f0;
/*    float:left; */
    display:inline-block;
    padding:0;
    margin:0;
}
.menu li a {
    display:block;
    text-align:left;
    font:1em Georgia,serif;
    padding:.25em .6em;
    margin:0;
}
    </style>
</head>
<body>
<div class="header">
    <div class="logo"><h1>Logo</h1></div>
    <div class="menu">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">OUR SERVICES</a></li>
            <li><a href="#">ORDER NOW</a></li>
            <li><a href="#">MEET OUR TEAM</a></li>
            <li><a href="#">CONTACT US</a></li>
        </ul>
    </div>
</div>
</body>
</html>