[RESOLVED] html\css vertical alignment of a div tag not working
I'm unable to make the menu text align in the middle of the 'fixedmenu' divtag, i dont understand why.
index.html
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Car 2000</title>
<link href="css/layouts.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center" id="fixedbody">
<div align="center" id="fixedheader">
<img src="images/logo_h.gif" alt="Car 2000" width="270" height="160" /><img src="images/right_h.gif" alt="Car 2000" width="630" height="160" />
</div>
<div class="menutext" id="fixedmenu">
HOME : ABOUT : SERVICES : CONTACT : BOOK NOW</div>
</div>
</body>
</html>
styles.css
Code:
.menutext {
font-family:Tahoma, "Courier New", Consolas, "Colonna MT";
font-size:30px;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
layouts.css
Code:
#fixedbody {
height: 900px;
width: 900px;
overflow: hidden;
margin:auto;
}
#fixedheader {
height: 160px;
width: 900px;
overflow: hidden;
}
#fixedmenu {
height: 64px;
width: 900px;
overflow: hidden;
background-image: url(../images/menubar_900.gif);
}
Re: html\css vertical alignment of a div tag not working
Vertical-align doesn't always work like you'd expect it to work. Please do read this page for more info, but what you'll need to do is add "line-height: 64px;" to your #fixedmenu declaration. You can remove "vertical-align: middle;" from .menutext, because it is not doing anything for you.
Re: html\css vertical alignment of a div tag not working
Thanks for the help much appreciated, though i already came up with a workaround, thought i'd post my solution incase anyone else needs it.
changes to index.html
HTML Code:
<div id="fixedmenu">
<div id="fixedmenutext">
<span class="main_nav_links"><a href="index.html">HOME</a> : <a href="about.html">ABOUT</a> :<a href="services.html"> SERVICES</a> : <a href="contact.html">CONTACT</a> : <a href="book.html">BOOK NOW</a></span></div>
</div>
changes to layout.css
Code:
#fixedmenutext {
height: 50px;
width: 800px;
overflow: hidden;
vertical-align: middle;
margin: auto;
padding-top: 12px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
changes to styles.css
Code:
.main_nav_links {
font-family: Tahoma;
font-size: 30px;
font-style: normal;
font-weight: bold;
text-transform: capitalize;
color: #000000;
text-align: center;
vertical-align: middle;
text-decoration: none;
margin-top: 5px;
margin-bottom: 5px;
left: auto;
top: auto;
right: auto;
bottom: auto;
}
.main_nav_links A:link {
text-decoration: none;
color: #000000;
}
.main_nav_links A:visited {
text-decoration: none;
color: #000000;
}
.main_nav_links A:active {
text-decoration: none;
color: #003366;
}
.main_nav_links A:hover {
text-decoration: none;
color: #FFFFFF;
}
Re: html\css vertical alignment of a div tag not working
It's your choice, but I would not recommend your solution. You've gone from using a single div, to using two divs and a span; you should never use more DOM elements (and CSS properties) than are necessary because it makes messier, harder-to-maintain code. It also inflates the file size of the page, which makes the page take longer to load, and can negatively impact your SEO. You may not be interested in these aspects at the moment, but FYI for future development I guess.
