I always have trouble with vertical alignment. What I have here is a set of CSS tabs which can have a single or multiple lines of text. So, the line-height technique won’t work here. What might be the best approach?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="reset.css?v=1.0" type="text/css">
<style type="text/css">
/* reset stylesheet */
body {
margin:0;
padding:0;
font-size:100.0%;
}
/* end reset */
body {
background: #fffff;
/*min-width:1002px;*/
}
#breadcrumbs {
background: yellow;
color:black;
padding: .2em .5em .2em .5em;
}
#nav ul, #nav ul li {
padding:0;
margin:0;
}
#nav ul {
border-top:1px solid gray;
}
#nav ul li {
float:left;
list-style: none outside none;
width:10%;
margin: 0 .6em 0 .6em;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
}
#nav ul li, #nav ul li a {
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
}
#nav ul li a, #nav ul li a:hover {
display:block;
text-align:center;
text-decoration: none !important;
color: #B7B7B7;
font-weight: bold;
font-size: 1.2em;
overflow:hidden;
height: 75px;
vertical-align:middle;
}
#nav ul li a:hover, #nav ul li a.selected {
margin-top:-1px;
color: #8B8B8B;
background:yellow;
border-top:1px solid yellow;
}
</style>
</head>
<body>
<div id="sectionheader">
<div id="announcement"></div>
<div id="logo"></div>
<div id="logosplash"></div>
</div>
<div id="sectionnav">
<div id="breadcrumbs">Home » Page1</div>
<div id="nav">
<ul id="branchtabs">
<li><a href="">This Best Tab Here Here</a></li>
<li><a href="">Tab</a></li>
<li><a href="">This Tab Here</a></li>
<li><a href="">This Tab Here</a></li>
<li><a href="">This Tab Here</a></li>
</ul>
</div>
</div>
<div id="sectioncontent">
</div>
<div id="sectionfooter">
</div>
</body>
</html>
The easiest way i know of doing it is with display: table and display: table-cell as they allow you to use some of the the properties normally used for tables only. See the following link for a small demo i put together using no extra elements.
Looks like the table-cell was actually the way to go, once I moved those rules to the correct elements. I eventually got it so that the li width worked properly, the tabs worked properly, and the vertical centering worked properly.
Is there a better way to do this, or is this pretty much the only way to go?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="reset.css?v=1.0" type="text/css">
<style type="text/css">
/* reset stylesheet */
body {
margin:0;
padding:0;
font-size:100.0%;
}
/* end reset */
body {
background: #fffff;
/*min-width:1002px;*/
}
#breadcrumbs {
background: yellow;
color:black;
padding: .2em .5em .2em .5em;
}
#nav ul, #nav ul li {
padding:0;
margin:0;
}
#nav ul {
border-top:1px solid gray;
}
#nav ul li {
display: table;
float:left;
list-style: none outside none;
width:10%;
margin: 0 .6em 0 .6em;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
}
#nav ul li a, #nav ul li a:hover {
display: table-cell;
text-align:center;
vertical-align:middle;
text-decoration: none !important;
color: #B7B7B7;
font-weight: bold;
font-size: 1em;
overflow:hidden;
height: 75px;
}
#nav ul li:hover, #nav ul li.selected{
background:yellow;
}
#nav ul li a:hover, #nav ul li.selected a{
position:relative;
top:-1px;
color: #8B8B8B;
border-top:1px solid yellow;
padding-top:1px;
height:73px; /* li height - (a border + a padding) */
}
#nav ul li, #nav ul li a {
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
</style>
</head>
<body>
<div id="sectionheader">
<div id="announcement"></div>
<div id="logo"></div>
<div id="logosplash"></div>
</div>
<div id="sectionnav">
<div id="breadcrumbs">Home » Page1</div>
<div id="nav">
<ul id="branchtabs">
<li class="selected"><a href="">This is a mighty test with line</a></li>
<li><a href="">smallish test</a></li>
<li><a href="">bigger testaroonie</a></li>
<li><a href="">test</a></li>
<li><a href="">test test</a></li>
</ul>
</div>
</div>
<div id="sectioncontent">
</div>
<div id="sectionfooter">
</div>
</body>
</html>
Yeah, that’s what I would do. Just remove the overflow:hidden from the ul, which isn’t needed anyway. (I should have removed it. It just made testing easier. )
This is what I posted above, but with overflow: hidden removed from the ul and the border on breadcrumbs. The breadcrumb border is hidden when the li is selected or hovered: