13 replies [Last post]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 2 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I have a straight forward sidebar menu. Its constructed with a ul/li/a structure with the <A> element set to display: block. There is nothing fancy about the menu, no images, a simple background colour change on hover and a third colour for the menu item that represents the current page.

Some of the menu items have more than one line of text at default font-sizes. These menu items will go up to three lines on two font-size increases. Again not a problem.

Client wants the menu items to be a standard height at default font-size AND wants the text to be vertically centered. PROBLEM!

Is this possible without either individual styling or using tables?

I tend to think not, but perhaps with a tricky combination of display:inline, line-height, vertical-align and display:block it could be...has anyone tried/acheived this?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 2 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

quickie, menu styling (re: vertical centering)?

I guess tables it is. Sad

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 5 years 28 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

quickie, menu styling (re: vertical centering)?

Bruno has some vertical center solutions, maybe you can make use of it. I did not exactly get what you are trying.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 3 weeks 16 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15650
Points: 2788

quickie, menu styling (re: vertical centering)?

Chris I think the answer does lie with a combination of display:table-cell and inline-block along with vert align it's how I've got around not being able to use line-height in the past. Ichao's links explain well, but I think you probably know the techniques and those links already.

It's such a shame that so much faffing around has to done to achieve some seemingly simple things at times.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 2 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

quickie, menu styling (re: vertical centering)?

Thanks IChao, that is exactly what I was looking for.

Hugo, no I hadn't come across those links before. All the google links show up with position absolute solutions which don't work too well with text that can vary in height/lines.

It turned out tables weren't an alternative anyway, they require javascript to ensure the whole cell area is clickable and hoverable, which is more trouble than its worth.

I am using specific styling for now while I check out Bruno's solution. It doesn't quite drop in to what I'm doing and I can't figure out what the .openm element provides.

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 5 years 28 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

quickie, menu styling (re: vertical centering)?

Chris..S wrote:
... and I can't figure out what the .openm element provides.

The .openm element in the first link is the "If an empty inline-block element ..." in the second link.

While I never fully understood this, Bruno says that this extra element establishes a line box. And this opened line-box of 100% height is the basis for the vertical-align of the centered element to work on.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 27 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9190
Points: 3195

quickie, menu styling (re: vertical centering)?

Chris,

Have you got anything on this? I can get something going in modern browsers, but IE is the bug-a-bear. Even with Ingo's and Bruno's hints and suggestions, I can't make the entire <li> be filled with <a> and its background colors.

I haven't tried, but I can imagine issues using a pure table design.

I based my attempts on this vertical centering demo. It looks great in Firefox and Opera, and you can guess about IE. Perhaps you'll spot the key that I've missed. Obviously the IE hack that works so well with block elements, fails with <a> and its text. Nor could I get anything going with inline-block.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

  <title>menu v+h centering</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    }

ul {
    border: 1px solid black;
    list-style: none;
    margin: 25px auto;
    padding: 5px;
    width: 150px;
    }

li {
    border: 1px solid red; /*for clarity*/
    position: relative;
    display: table;
    height: 4em;
    width: 100%;
    }


a {
    border: 1px solid blue; /*for clarity*/
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 100%;
    width: 100%;
    }

a {
    background-color: #aaa;
    }

a:hover {
    background-color: #ccc;
    }

a span {}

* html a {
    top: 50%;
    left: 0;
    display: block;
    }

* html span {
    position: relative;
    top: -50%;
    }

/*]]>*/

</style>
</head>

<body>
  <ul>
    <li><a href="#"><span>link1<br />
    line 2 of link 1</span></a></li>

    <li><a href="#"><span>link2</span></a></li>

    <li><a href="#"><span>link3<br />
    line2<br />
    and line 3 of link 3</span></a></li>
  </ul>
</body>
</html>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 5 years 28 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

quickie, menu styling (re: vertical centering)?

I stole Gary's code and added Bruno's method for IE6 / IEMac

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta name="author" content="Gary Turner /  Ingo Chao" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>menu v+h centering</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    }

ul {
    border: 1px solid black;
    list-style: none;
    margin: 25px auto;
    padding: 5px;
    width: 150px;
    }

li {
    border: 1px solid red; /*for clarity*/
    position: relative;
    display: table;
    height: 4em;
    width: 100%;
    }


a {  /* link box */
   border: 1px solid blue; /*for clarity*/
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 100%;
    width: 100%;
    }

a {
    background-color: #aaa;
    }

a:hover {
    background-color: #ccc;
    }
    
/* star html hacks read by IE-Mac and IE-Win<7 */

* html a { /* link box */
    display: block; /*table-cell is not supported, and we need that width/height for the maxed clickable area */
    }

* html a span { /* contains the link text */
    display: inline-block; /* these two inline-blocks sit side-by-side in one line */
    vertical-align: middle; /* aligns with respect to the line box of b.openm */
    }

* html b.opnm { /* empty vertical opener extra element */
    
    display: inline-block; /* these two inline-blocks sit side-by-side in one line */
    
    vertical-align: middle; /* I don't understand why, but it is needed in IE6 */
    
    height: 100%; /* opens the line-box to the current height of the link box */
    
    width: 1px; /* IEMac needs a width for inline-block to exist */
    margin-left: -1px; /* compensate for width, keep them in one line */
    
    background: black; /*for clarity*/
}

/*]]>*/

</style>
</head>

<body>
    <ul>
        <li><a href="#"><span>link1<br />
        line 2 of link 1</span><b class="opnm"><!----></b></a></li>

        <li><a href="#"><span>link2</span><b class="opnm"><!----></b></a></li>

        <li><a href="#"><span>link3<br />
        line2 and<br />
        line 3 of link 3</span><b class="opnm"><!----></b></a></li>
    </ul>
</body>
</html>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 2 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

quickie, menu styling (re: vertical centering)?

Yes, I managed it. The problem I had was with Firefox - display:table-cell doesn't work with width:100% - at least not on its own. Menu-items which were shorter than available line length only expanded the table-cell as far as the end of the text, resulting in left-aligned text and ugly :hover changes. The solution was to add display:table to its parent, the <LI> element.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Vertical Centering For Menus</title>

<!--[if lte IE 6]>
  <style>
    body {behavior: url(/javascript/csshover.htc);}
	  img {behavior: url(/javascript/pngbehavior.htc);}
  </style>
<![endif]-->

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/

/* some std css */
* { margin: 0; padding: 0; }
a { text-decoration: none; }
a img { border: none; }

h2, h3, h4, h5, h6, p, dl, ol, ul, dt, dd, li, pre, blockquote { margin: 0.8em 0; }
form { margin: 1em 0; }
ol, ul { padding-left: 2em; }

.menu { list-style: none; margin: 0; padding-left: 0; }
.menu li { margin: 0; }


html {margin: 0; padding: 0;}
body {
  width: 90%;
  margin: 0 auto;
  font: 76% Verdana, Helvetica, Arial, sans-serif;
}
/* end std css */

#banner {
  height: 6em;
  background: #b0323b;
  color: #f4f4f4;
  padding: 0 2em;
}

#banner a {
  color: #ff6;
}
#banner a:hover {
  color: #fd6;
  text-decoration: underline;
}

#navigation {
  width: 180px;
  background: #b0323b;
  padding-bottom: 10em;
  float: left;
}

#navigation a { color: #f4f4f4; }

#navigation ul.menu {
  border-top: 4px solid white;
}

#navigation li {
  border-bottom: 4px solid white;
}

#navigation a:hover {
  background: #e74758;
}

/* !!!! Vertical Centering !!!!*/
/* (based on work by Bruno Fassino (http://www.brunildo.org/test/img_center.html) */
#navigation li {
  display: table;
  width: 100%;
}

#navigation a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 5em;
  padding: 0.5em 0;
}

/* IE Mac only \*//*/
#navigation a {
  display: block;
}

#navigation a i {
  display: inline-block;
  height: 100%;
  width: 1px;
}
/* end */

/* IE Win, not Mac \*/
* html #navigation a { display: block; }
* html #navigation b, * html #navigation i { display: inline-block; vertical-align: middle; zoom:1; }
* html #navigation a b, * html #navigation a i { cursor: pointer; }
* html #navigation i { height: 100%; width: 1px; margin-left: -1px; background: yellow; }
/* end */

/* !!!! end Vertical Centering !!!! */

/*]]>*/-->
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--

//--><!]]>
</script>
</head>
<body>
<div id="page">
<div id="banner">
  <h1>[ Vertical Centering for Menus ]</h1>
	<p>Derived from <a href="http://www.brunildo.org/test/img_center.html">Bruno Fassino's Vertical Centering</a></p>
</div>
<div id="navigation">
	<ul class="menu">
		<li><a href="#"><b>Item #1</b><i></i></a></li>
		<li><a href="#"><b>A really loooonnng menu item #2</b><i></i></a></li>
		<li><a href="#"><b>Item #3</b><i></i></a></li>
		<li><a href="#"><b>This menu item is long enough to go over several lines at normal font size</b><i></i></a></li>
		<li><a href="#"><b>Item #4</b><i></i></a></li>
		<li class="selected"><a href="console.php"><b>Item #5</b><i></i></a></li>
	</ul>
</div><!-- #navigation -->
</div>
</body>
</html> 

Apologies for using <B> and <I>, they make things easier and faster when experimenting, feel free to replace with appropriately classed <SPANS>.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 27 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9190
Points: 3195

quickie, menu styling (re: vertical centering)?

Chris: Very nice looking demo. I'll have to put one of my own up to accompany my centered block demo.

That should make you a hero in your client's eyes. Be sure to play up the extraordinary amount of research you did into IE's shortcomings and work-arounds. Wink

Ingo: Thanks. For some reason I could not wrap my mind around Bruno's examples. Yours made it awesomely clear how it works, if not why. Oh, wait, it's IE—there is no sane reason. Tongue

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 year 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

quickie, menu styling (re: vertical centering)?

kk5st wrote:
Ingo: Thanks. For some reason I could not wrap my mind around Bruno's examples. Yours made it awesomely clear how it works, if not why. Oh, wait, it's IE—there is no sane reason. Tongue

Is it just me or does anyone else get strange black lines that run vertically along the right edge of the text in Ingo's example in IE?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 2 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

quickie, menu styling (re: vertical centering)?

No its not just you.

Read the CSS comments ... the bit where it says "background: black; /* for clarity */". I have the same thing in my page, only yellow. Its the extra element required for IE to force the line box open to the full height of the parent element.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 year 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

quickie, menu styling (re: vertical centering)?

:oops: I was looking for a black border rather than the background.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

aerovelo
aerovelo's picture
Offline
newbie
Denver
Last seen: 7 years 3 weeks ago
Denver
Joined: 2007-08-29
Posts: 2
Points: 0

Is this horse dead yet?

This comment has been moved here.