943,931 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Help needed with floating nav bar css/html
Ad:
Permalink
Jan 7th, 2007
0

Help needed with floating nav bar css/html

Expand Post »
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.
HTML and CSS Syntax (Toggle Plain Text)
  1. /* CSS Document */
  2. body {
  3. background-image: url(graphics/sfondo_black.jpg);
  4. }
  5.  
  6. body {
  7. margin: 20px 20px 0;
  8. }
  9.  
  10. #main {
  11. border: 1px solid #000;
  12. background-image: url(graphics/sfondo_black.jpg);
  13. }
  14.  
  15. /* Looks like you have to specify the width of #menu
  16. or IE5 Mac stretches it all the way across the div, and
  17. Opera streches it half way. */
  18.  
  19. #main #menu {
  20. border-left: 1px solid #000;
  21. border-bottom: 1px solid #000;
  22. float: right;
  23. width: 230px;
  24. background-image: url(graphics/sfondo_black.jpg);
  25. margin: 0 0 10px 10px;
  26. }
  27.  
  28. p, h1, pre, h2 {
  29. margin: 0 10px 10px;
  30. }
  31.  
  32. #nav{
  33. list-style: none;
  34. text-align:center;
  35. }
  36.  
  37. #nav li {
  38. border: 3px solid;
  39. color: #F3C200;
  40. margin: 0;
  41. width: 180px;
  42. }
  43.  
  44. #nav a:link {
  45. font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
  46. color: #FF0080;
  47. text-decoration: none;
  48. }
  49.  
  50. #nav a:hover {
  51. color: yellow;
  52. cursor: pointer;
  53. }
  54. p{ font-family:"Trebuchet MS", Verdana, Arial;
  55. color:#FFFFFF;
  56. size:14pt;
  57. }

And here is my html code
HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Welcome To GazDee Games</title>
  6. <link rel="stylesheet" type="text/css" href="gazdee.css"/>
  7.  
  8. </head>
  9. <body>
  10.  
  11. <div id="main">
  12. <img src="graphics/logo.gif" alt="GazDee Games" width="191" height="91" /><br /> <br />
  13. <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.
  14. <center>
  15. <img src="graphics/bottomnav.gif" alt="navlink" width="292" height="17" border="0" align="absbottom" usemap="#Map" />
  16. <map name="Map" id="Map"><area shape="rect" coords="0,2,56,15" href="home.html" />
  17. <area shape="rect" coords="60,3,114,16" href="retro.html" />
  18. <area shape="rect" coords="118,3,157,15" href="new.html" />
  19. <area shape="rect" coords="161,4,202,15" href="kidz.html" />
  20. <area shape="rect" coords="209,0,291,13" href="aboutus.html" />
  21. </map>
  22. </center>
  23.  
  24.  
  25. <div id="menu">
  26. <ul id="nav">
  27. <li><a href="home.html">Home</a></li>
  28. <li><a href="retro.html">Retro</a></li>
  29. <li><a href="new.html">New Releases</a></li>
  30. <li><a href="kidz.html">Kidz</a></li>
  31. <li><a href="aboutus.html">About Us</a></li>
  32. </ul> 
  33. <!--nav bar goes here i think --></div>
  34.  
  35. <br />
  36. </div>
  37.  
  38.  
  39. </body>
  40. </html>
Any help would be be greatly appreciated.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Junior Poster
kained is offline Offline
126 posts
since May 2004
Permalink
Jan 8th, 2007
0

Re: Help needed with floating nav bar css/html

floating is calculated top-down:

HTML and CSS Syntax (Toggle Plain Text)
  1. <b></b>
  2. <a style="float:left;"></a>
  3. (from left-right/top-down, b will always come first)

HTML and CSS Syntax (Toggle Plain Text)
  1.  <a style="float:left;"></a>
  2. <b></b>
  3. (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.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: pdf help
Next Thread in HTML and CSS Forum Timeline: Server side sends HTML over HTTP to browser





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC