Thread: Navigation bar problems
Results 1 to 3 of 3
Related
-
Navigation Forum: HTML Forum
Replies: 5 -
Navigation Forum: HTML Forum
Replies: 1 -
navigation Forum: HTML Forum
Replies: 7
-
02-13-2011, 09:30 PM #1
Navigation bar problems
I am having a problem getting my navigation bar to work right. The link boxes themselves are 6 pixels below the top of the container. The background is also down even farther. Here is the relevant code:
CSS:
body
{
font-family:verdana;
margin:0;
padding:0;
overflow:auto;
background-color:black;
}
div.mainContainer
{
margin-right:auto;
margin-left:auto;
margin-bottom:10px;
margin-top:0;
padding:0px;
width:1024px;
background-color:white;
padding-bottom:15px;
}
h1.mainHeader
{
font-size:50px;
color:#DE4B1B;
font-decoration:bold;
background-color:black;
border:0;
margin:0;
padding:25px;
}
a
{
color:#DE4B1B;
text-decoration:none;
margin:0;
padding:0;
}
#navbar
{
margin:0;
text-decoration:none;
padding:0;
background-color:black;
}
#navbar li
{
font-size:22px;
float:left;
display:inline,block;
padding:0;
text-decoration:none;
}
#navbar a:link, #navbar a:visited
{
border:10px solid black;
background-color:black;
color:white;
}
#navbar a:hover, #navbar a:active
{
border:10px solid black;
background-color:black;
color:#DE4B1B;
}
#navbaron a:link, #navbaron a:visited
{
border:10px solid white;
background-color:white;
color:black;
}
#navbaron a:hover, #navbaron a:active
{
border:10px solid white;
background-color:white;
color:#DE4B1B;
}
HTML:
<html>
<head>
<title>
Home
</title>
<link rel="stylesheet" type="text/css" href="basic.css" />
</head>
<body>
<div class="mainContainer">
<h1 class="mainHeader"><a href="index.html" /><img src="images\headerLogo.jpg" title="Home" border="0" /></a></h1>
<div id="navbar">
<ul>
<li> <div id="navbaron"> <a href="index.html">Home</a> </div> </li>
<li> <a href="about.html">About</a> </li>
<li> <a href="portfolio.html">Portfolio</a> </li>
</ul>
</br></br></br>
</div>
<h2>Home</h2>
<p>Hello world!! <a href="http://www.google.com">google!</a></p>
</div>
</body>
</html>
-
10-07-2011, 04:17 AM #2
Re: Navigation bar problems
Would this tutorial help?:
css.maxdesign.com.au/listutorial/horizontal01.htm
Just paste it into the browser address bar.
-
10-07-2011, 05:28 AM #3
Re: Navigation bar problems
I noticed that that tut employs display:inline, but that is not very handy. Here is a better code, with explanation:
HTML Code:<!DOCTYPE html> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #navDiv { width: 535px; /* widths + margins + borders */ _width: 540px; /* 1px extra per li for IE6 */ margin: auto; } #navDiv ul { list-style: none; margin: 0; padding: 0; } #navDiv li { float: left; /* see text */ width: 100px; border: 1px solid black; margin-right: 5px; } #navDiv a { display: block; width: 100px; /* for IE6 */ text-decoration: none; text-align: center; background: yellow; color: black; } #navDiv a:hover { background: black; color: yellow; } #clearingDiv { clear: left; /* neutralizes the float influence */ } p#onFloat { width: 540px; margin: auto; } </style> </head> <body> <div id="navDiv"> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> <li><a href="#">Link Five</a></li> </ul> </div> <div id="clearingDiv"></div> <br /> <p id="onFloat">With float:left, one can give the list items a width, and the menu items can be put against each other. That is not possible/difficult with display:inline, and display:inline-block is not supported by IE6/7.</p> </body> </html>
Last edited by FrankC; 10-07-2011 at 05:33 AM.
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum