I am having a problem with vertical alignment of text in my navbar
I have tried this vertical align css code in three of the classes but no success: vertical-align:text-bottom;
The two images ('grenmenu.gif' 'blumenu.gif') are just 20px by 1px and the background image (main.jpg 697px x 3px) are all working fine. The central navbar is 680px
HTML:
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel=stylesheet type=text/css href=style.css>
</head>
<body>
<div class="navbarcontainer">
<div class="navbar">
<div class="navtabcontainer">
<div class="navtab">
<div class="lit"><a href="literature.htm">Literature</a></div>
<div class="separator">|</div>
<div class="join"><a href="join.htm">Membership?</a></div>
<div class="separator">|</div>
<div class="congress"><a href="congress.htm">Congress 2012</a></div>
<div class="separator">|</div>
<div class="events"><a href="events.htm">Upcoming events</a></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.navbarcontainer {
text-align:center;
}
.navbar {
background-image:url('main.jpg');
background-repeat:repeat-y;
height:20px;
margin-left:auto;
margin-right:auto;
width:697px;
text-align:center;
}
.navtabcontainer {
text-align:center;
}
.navtab {
background-image:url('grenmenu.gif');
background-repeat:repeat-x;
text-align:center;
vertical-align:text-bottom;
font-weight:normal;
font-family:arial;
font-size:7px;
color:#ff0000;
margin-left:auto;
margin-right:auto;
width:680px;
height:20px;
}
.separator {
text-align:center;
vertical-align:text-bottom;
float:left;
padding:0px;
height:20px;
width:1%;
margin-right:0px;
margin-left:0px;
}
.lit a {
text-align:center;
float:left;
text-decoration:none;
color:#ffffff;
height:20px;
width:10%;
vertical-align:text-bottom;
margin-right:0px;
margin-left:0px;
}
.lit a:hover {
background-image:url('blumenu.gif');
background-repeat:repeat-x;
text-align:center;
text-decoration:none;
font-weight:normal;
font-family:arial;
padding:0px;
height:20px;
color:#ccffff;
display:block;
}
.join a {
text-align:center;
float:left;
text-decoration:none;
font-weight:normal;
font-family:arial;
padding:0px;
height:20px;
width:16%;
color:#ffffff;
margin-right:0px;
margin-left:0px;
}
.join a:hover {
background-image:url('blumenu.gif');
background-repeat:repeat-x;
text-align:center;
text-decoration:none;
font-weight:normal;
font-family:arial;
padding:0px;
height:20px;
color:#ccffff;
display:block;
}
.congress a {
text-align:center;
float:left;
text-decoration:none;
font-weight:normal;
font-family:arial;
padding:0px;
height:20px;
width:24%;
color:#ffffff;
margin-right:0px;
margin-left:0px;
}
.congress a:hover {
background-image:url('blumenu.gif');
background-repeat:repeat-x;
text-align:center;
text-decoration:none;
font-weight:normal;
font-family:arial;
padding:0px;
height:20px;
color:#ccffff;
display:block;
}
.events a {
text-align:center;
float:left;
text-decoration:none;
font-weight:normal;
font-family:arial;
padding:0px;
height:20px;
width:17%;
color:#ffffff;
margin-right:0px;
margin-left:0px;
}
.events a:hover {
background-image:url('blumenu.gif');
background-repeat:repeat-x;
text-align:center;
text-decoration:none;
font-weight:normal;
font-family:arial;
padding:0px;
height:20px;
color:#ccffff;
display:block;
}
2 Votes
Answers