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

[ninostar]

Hi,

I'm trying to vertically align to center text in responsive css menu with a logo on right side. I've tried to add "vertical-align: middle" to all appropriate divs (ul, ul li, ul li a), but the problem is that text (menu) stays in almost same position.

Regards

[polyhedra]

The property "vertical-align" is a tough cookie, and will only work for images and content nested in tables. That being said, I would suggest adding a line height equal to the height of your logo image to to the "ul"

It might look something like this..

ul {
 list-style: none;
 line-height: 50px;
}

img{
 height: 50px;
 width: 150px;
}

[ninostar]

Hi,

Thanks for reply... sadly that didn't worked. Menu even got broader then it was before.

I use hgroup tag and ul in one div tag.

<div id="menu">
      <a href="/index.html">
      <hgroup id="title">
        <img id="logo" src="images/logo.png"/>
      </hgroup>
      </a>
      <ul>
        <li class="selected"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Order</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

[ralph.m]

You could try putting the line height on the <a>s themselves, and set them to display: block. We'd need to see your full code to know exactly what conditions you are working in, though.

I use hgroup tag ...

Have you checked what that element is actually for?

[ninostar]

You could try putting the line height on the <a>s themselves, and set them to display: block. We'd need to see your full code to know exactly what conditions you are working in, though.

Have you checked what that element is actually for?

No, didn't checked so far. I've tried to find solution on internet and one blog it was described as solution how to add logo with css menu. So, I've added it and it seems to work. However I have problems with getting logo and menu automatically vertically aligned to logo. If menu would be fixed, this won't be a problem, but since it needs to be responsive I don't know how to make it.

Should I paste all related css in here? Oh and thanks for helping me out...

[ralph.m]

Should I paste all related css in here?

Ideally a link, or the full page code (with CSS in the head), so we can see this in context.

[ninostar]

Ideally a link, or the full page code (with CSS in the head), so we can see this in context.

Here's the link to what I'm doing:
http://ninostar.atwebpages.com/

[ralph.m]

Cool. OK, try this:

#menu ul {margin: 0; float: right;}

#menu ul li {float: left;}

#menu li a {display: block; line-height: 70px;}

[ninostar]

Hmm, seems not to work when resizing browser down... have uploaded new css on provided link

[ralph.m]

Hmm, seems not to work when resizing browser down...

The menu has to drop when there's no longer room for it. You need to decide what you want to do when it gets too wide for the space available.

[ninostar]

The menu has to drop when there's no longer room for it. You need to decide what you want to do when it gets too wide for the space available.

Don't I do that with "float: left/right"? Menu should move below like it did before, but it should auto align (vertically) when that happens...

[ralph.m]

it should auto align (vertically) when that happens...

Auto align with what, though?

[ronpat]

ninostar, there doesn't seem to be any code that tells the page how to behave below a width of about 752px. Is that the issue?

[ninostar]

No, I've just started with converting website from psd to html. Since some words in menu will be longer, they should automatically align (vertically) in the middle of logo when changing size of browser - I'm sorry if I don't find right words to describe what I wish to achieve, so I've attached two samples of how menu should look like (first sample is when you shrink down browser and second one is with fully opened browser).

http://ninostar.atwebpages.com/sample.html

[polyhedra]

Great I see... This code will work if you add it to the end of your global stylesheet. But, it would be smart to move them thoughtfully into already existing selectors, making it easier to go in and edit your CSS smoothly in the future.

#menu {
  min-width: 700px;
}

 div#slider div#menu ul{
  padding: 0;
  border: 1px solid red;
  float: left;
}

[ninostar]

Thanks for help, but this didn't solved the issue entirely. As you can see on previously mentioned link, menu isn't fully responsive, as right before you resize browser to tablet size, part of menu (contact) disappears on right side of browser - it should be automatically moved below (as seen on sample page).

http://ninostar.atwebpages.com/sample2.html

[ronpat]

ninostar, Thank you for posting the example images. Please try this test page and see if it works the way you wish. There are lots of outlines and borders and one gray background so you can see how everything moves. Tested in IE 8 & 9, Firefox 18 and Chrome 24

<!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
-->
<head>
    <title>Rolling Menu Items</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-left:15px;
}
.header ul {
    list-style-type:none;
    display:inline-block;
    border:1px solid #f00;
    padding:0;
    margin:0;
}
.header li {
    border:1px solid #0f0;
    float:left;
    text-align:left;
    font:1em Georgia, serif;
    padding:0;
    margin:.25em .6em;
}
    </style>
</head>
<body>
<div class="header">
    <div class="logo"><h1>Logo</h1></div>
    <div class="menu">
        <ul>
            <li>HOME</li>
            <li>ABOUT US</li>
            <li>OUR SERVICES</li>
            <li>MAKE YOUR ORDER NOW</li>
            <li>MEET OUR TEAM</li>
            <li>CONTACT US</li>
        </ul>
    </div>
</div>
</body>
</html>

[ninostar]

Thanks for help... your code works fine, but will have to implement it to my design. It's late here, so will update all of you tomorrow. Again thanks to all for help

[ralph.m]

Nice work, Ron. An interesting solution to study.

[ronpat]

Off Topic:

Nice work, Ron. An interesting solution to study.

I hope that's a good thing. The code seems a bit complicated, so I imagine there is an easier way to accomplish this. It's a start, though.

[ronpat]

Post #17 errata:

.header ul {
and
.header li {

should have been classed as

.menu ul {
and
.menu li {

[ninostar]

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

[ralph.m]

How come that I can't align text to right side (when resizing browser down and menu gets into second line)?

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

.menu li {
border: 1px solid lime;
float: right;
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.

[ninostar]

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).

[ralph.m]

You haven't updated the page online yet.