HTML and CSS

Help needed with floating nav bar css/html

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: May 2004

Posts: 102

Reputation: kained is an unknown quantity at this point

Solved Threads: 0

kained

Offline

Junior Poster

Help needed with floating nav bar css/html

Jan 7th, 2007

I have a few problems with an assignment for university. Basicly my nav bar on the right is mean't to float but it is moving down with the text in the #main div in my code. What have i done wrong?

Here is my css code.

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

/* CSS Document */
body {
background-image: url(graphics/sfondo_black.jpg);
}
 
body {
margin: 20px 20px 0;
}
 
#main {
border: 1px solid #000;
background-image: url(graphics/sfondo_black.jpg);
}
 
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
 
#main #menu {
border-left: 1px solid #000;
border-bottom: 1px solid #000;
float: right;
width: 230px;
background-image: url(graphics/sfondo_black.jpg);
margin: 0 0 10px 10px;
}
 
p, h1, pre, h2 {
margin: 0 10px 10px;
}
 
#nav{
list-style: none;
text-align:center;
}
 
#nav li {
border: 3px solid;
color: #F3C200;
margin: 0;
width: 180px;
}
 
#nav a:link {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
color: #FF0080;
text-decoration: none;
}
 
#nav a:hover {
color: yellow;
cursor: pointer;
}
p{ font-family:"Trebuchet MS", Verdana, Arial;
color:#FFFFFF;
size:14pt;
}

And here is my html code

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!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=iso-8859-1" />
<title>Welcome To GazDee Games</title>
<link rel="stylesheet" type="text/css" href="gazdee.css"/>
 
</head>
<body>
 
<div id="main">
<img src="graphics/logo.gif" alt="GazDee Games" width="191" height="91" /><br /> <br />
<p>So does this work? I bloody well hope so otherwise I am going to get reall pissed off and can't really work out why this isn't working yet.
<center>
<img src="graphics/bottomnav.gif" alt="navlink" width="292" height="17" border="0" align="absbottom" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="0,2,56,15" href="home.html" />
<area shape="rect" coords="60,3,114,16" href="retro.html" />
<area shape="rect" coords="118,3,157,15" href="new.html" />
<area shape="rect" coords="161,4,202,15" href="kidz.html" />
<area shape="rect" coords="209,0,291,13" href="aboutus.html" />
</map>
</center>
 
 
<div id="menu">
<ul id="nav">
<li><a href="home.html">Home</a></li>
<li><a href="retro.html">Retro</a></li>
<li><a href="new.html">New Releases</a></li>
<li><a href="kidz.html">Kidz</a></li>
<li><a href="aboutus.html">About Us</a></li>
</ul> 
<!--nav bar goes here i think --></div>
 
<br />
</div>
 
 
</body>
</html>
<!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=iso-8859-1" />
<title>Welcome To GazDee Games</title>
<link rel="stylesheet" type="text/css" href="gazdee.css"/>

</head>
<body>

<div id="main">
<img src="graphics/logo.gif" alt="GazDee Games" width="191" height="91" /><br /> <br />
<p>So does this work? I bloody well hope so otherwise I am going to get reall pissed off and can't really work out why this isn't working yet.
<center>
<img src="graphics/bottomnav.gif" alt="navlink" width="292" height="17" border="0" align="absbottom" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="0,2,56,15" href="home.html" />
<area shape="rect" coords="60,3,114,16" href="retro.html" />
<area shape="rect" coords="118,3,157,15" href="new.html" />
<area shape="rect" coords="161,4,202,15" href="kidz.html" />
<area shape="rect" coords="209,0,291,13" href="aboutus.html" />
</map>
</center>


<div id="menu">
<ul id="nav">
<li><a href="home.html">Home</a></li>
<li><a href="retro.html">Retro</a></li>
<li><a href="new.html">New Releases</a></li>
<li><a href="kidz.html">Kidz</a></li>
<li><a href="aboutus.html">About Us</a></li>
</ul> 
<!--nav bar goes here i think --></div>

<br />
</div>


</body>
</html>

Any help would be be greatly appreciated.

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Help needed with floating nav bar css/html

Jan 8th, 2007

floating is calculated top-down:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<b></b>
<a style="float:left;"></a>
(from left-right/top-down, b will always come first)
<b></b>
<a style="float:left;"></a>
(from left-right/top-down, b will always come first)

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
 <a style="float:left;"></a>
<b></b>
(from left-right/top-down, a will always come first)
 <a style="float:left;"></a>
<b></b>
(from left-right/top-down, a will always come first)