Member Avatar for kained

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.

/* 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

<!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.

  • 2 Contributors
  • 1 Reply
  • 142 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by MattEvans
Member Avatar for MattEvans

floating is calculated top-down:

<b></b>
<a style="float:left;"></a>
(from left-right/top-down, b will always come first)
<a style="float:left;"></a>
<b></b>
(from left-right/top-down, a will always come first)

if you want your navbar div to always be in the top left area, place its code before the main div code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.