chiprivers Posted October 30, 2007 Share Posted October 30, 2007 Me again guys! The following HTML and CSS files are used to structure and style my sites header and nav bar. I can't for the life of me work out to vertically position the nav link text within the nav bar. I have tried applying padding and margins to both the '#nav a' and the '#nav' but nothing is working!! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Template Script</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="header"> <img id="hdr_logo" src="images/hdr_logo.jpg" alt="site logo" title="site logo"> </div> <div id="nav"> <a href="#">nav bar link</a> <a href="#">nav bar link</a> <a href="#">nav bar link</a> </div> </body> </html> body {width: 95%; font-family: verdana; font-size: 62.5%; text-align: center; padding: 0 0 0 0; margin: 0 auto 0 auto} /* header display */ /* ============================================ */ #header {width: 100%; height: 78px; padding: 10px 10px 10px 10px; margin: 0 0 0 0} #hdr_logo {float: left; margin: 20px 15px 5px 5px} /* nav bar display */ /* ============================================ */ #nav {width: 100%; height: 28px; background-color: #009999;background-image: url(images/navbg.gif); background-repeat: repeat-x; background-position: 0px 0px; text-align: left; padding: 0 0 0 0; margin: 0 0 0 0} #nav a {font-family: rockwell, verdana; font-size: 1.4em; font-weight: normal; color: #FFFFFF; text-decoration: none; margin: 10px 1.5em 0.5em 1.5em} #nav a:hover {color: #6A2C6F} Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted October 30, 2007 Share Posted October 30, 2007 Usually a good idea to put lists of links in a list: <div id="nav"> <ul> <li><a href="#" title="">Link Text</a></li> <li><a href="#" title="">Link Text</a></li> <li><a href="#" title="">Link Text</a></li> <li><a href="#" title="">Link Text</a></li> </ul> </div> Then in the css you can use {display:block; width:100px; height:100px;} to give a size to the <a> elements. Padding and line-height can then help you to position the link text as you wish. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.