Navigation Bar

  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

I've actually posted on this site before regarding this issue, but due to lack of time i am not going to trawl through the pages.

Navigation problem

Basically, i've had a problem setting up a navigation bar on a website i am in the process of developing. The navigation bar should span the lenght of the content box. The navigation would pop up with a list of seperate links. At the moment it doesn't display right in either FF or IE yet it's the best i've had it looking. I've searched for tutorials online and nothing seems to come up right, i work on it and it displays okay in one browser but in another it is as incorrect as incorrect can be.

Another problem i have had is any navigation bar i have had seems to complicate the current coding i have on the site. I am by no means relatively good at website design which is why i am having this issue, so alot of what i have done may have been done in an incorrect way.

Would anyone here be able to steer me in the correct direction and help me progress beyond this wall i seem to have come up against.

Any advice would be gratefully appreciated.

Here is the php code for the web page (inside body tags)...

Code: [ Select ]
<body>
<div id="page_container">
<div id="header">
<p>James Campbell Architects &amp; Environmental</p>
</div>
 
<div id="left_column">
<ul>
</ul>
</div>
 
<div id="center_column">
<h2>Welcome</h2>
<p>Example: text position</p>
</div>
 
<div id="right_column">
<p>
<div id="smallboxes">
<div class="smallbox" id="bluecube"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox" id="greencube"></div>
 
<div class="smallbox" id="yellowcube"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
</p>
</div>
 
<div id="footer">
<ul id="navigation"><li id="youarehere"><a href="/2006/index.php">Home</a></li>
<p><li><a href="/2006/about.php">About</a></li>
<li><a href="/2006/projects.php">Projects</a></li>
<li><a href="/2006/services.php">Services</a></li>
<li><a href="/2006/contact.php">Contact Us</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li></p>
</ul></div>
</div>
</body>
  1. <body>
  2. <div id="page_container">
  3. <div id="header">
  4. <p>James Campbell Architects &amp; Environmental</p>
  5. </div>
  6.  
  7. <div id="left_column">
  8. <ul>
  9. </ul>
  10. </div>
  11.  
  12. <div id="center_column">
  13. <h2>Welcome</h2>
  14. <p>Example: text position</p>
  15. </div>
  16.  
  17. <div id="right_column">
  18. <p>
  19. <div id="smallboxes">
  20. <div class="smallbox" id="bluecube"></div>
  21. <div class="smallbox"></div>
  22. <div class="smallbox"></div>
  23. <div class="smallbox"></div>
  24. <div class="smallbox"></div>
  25. <div class="smallbox" id="greencube"></div>
  26.  
  27. <div class="smallbox" id="yellowcube"></div>
  28. <div class="smallbox"></div>
  29. <div class="smallbox"></div>
  30. </div>
  31. </p>
  32. </div>
  33.  
  34. <div id="footer">
  35. <ul id="navigation"><li id="youarehere"><a href="/2006/index.php">Home</a></li>
  36. <p><li><a href="/2006/about.php">About</a></li>
  37. <li><a href="/2006/projects.php">Projects</a></li>
  38. <li><a href="/2006/services.php">Services</a></li>
  39. <li><a href="/2006/contact.php">Contact Us</a></li>
  40. <li><a href="#">Link 1</a></li>
  41. <li><a href="#">Link 2</a></li></p>
  42. </ul></div>
  43. </div>
  44. </body>


and the CSS...

Code: [ Select ]
body{
    margin:0;
    padding:0;
    background: #333;
    font-family: sans-serif;
    font-size: 75%;
    color: #fff;
    text-align: justify;
}
 
div{
margin:0;
padding-top:0;
}
 
h1, h2, h3, p {
     margin:0;
     padding:10px;
 }
 
 
 
 ul{
     margin:0;
     padding:0;
 }
 
 li{
     list-style-type:none;
     color: #fff;
 }
 
 li a{
     display:block;
     background:#000;
     padding:5px 10px 5px 10px;
     color: #fff;
}
 
li a:hover{
     background:#000;
 }
 
 /* Uniquely Identified Containers */
 
 #page_container{
     width:950px;
     margin:0 auto;
     margin-bottom: 50px;
 }
 
 #header{
     background:#000;
     margin-top: 50px;
     border-top: 1px solid #ffff00;
     border-left: 1px solid #ffff00;
     border-right: 1px solid #ffff00;
     border-bottom: 1px solid #666666;
 }
 
 #left_column{
     width:19px;
     float:left;
     background:url(back.gif);
     height: 340px;
     border-left: 1px solid #ffff00;
     padding-top: 60px;
     padding-left: 0px;
 }
 
 #center_column{
     width:549px;
     float:left;
     height: 355px;
     padding-top: 45px;
     padding-left: 50px;
     p width: 200px;
 }
 
#center_column p{
    width: 70%;
}
 
 #right_column{
     width:330px;
     float:left;
     background:url(back.gif);
     height: 355px;
     border-right: 1px solid #ffff00;
     padding-top: 45px;
 }
 
 #footer{
     clear:both;
     background:#000;
     border-bottom: 1px solid #ffff00;
     border-right: 1px solid #ffff00;
     border-left: 1px solid #ffff00;
 }
 
 /* CSS Document */
 
 .smallbox {
     width: 80px;
     height: 80px;
     border: 1px solid #666;
     float: left;
     margin-left: 6px;
     margin-bottom: 7px;
 }
 
 div#smallbox div a:link, div#smallbox div a:visited {
     text-decoration: none;
 }
 
 div#smallbox div a:hover {
 
 }
 #bluecube {
     background-color: #40668C;
     filter:alpha(opacity=75);
     -moz-opacity:0.75;
     opacity: 0.75;
 }
#greencube {
background-color: #335C33;
     filter:alpha(opacity=75);
     -moz-opacity:0.75;
     opacity: 0.75;
 }
 #yellowcube {
     background-color: #FFD699;
     filter:alpha(opacity=75);
     -moz-opacity:0.75;
     opacity: 0.75;
 }
 #yellowcube:link, #yellowcube:visited {
     opacity: .40;
     filter: alpha(opacity=40);
 }
 
 #logo {
    background-image: url('/2006/logo.gif');
    background-position: 0% 0%;
    width: 80px;
    height: 80px;
 }
 
 /*the following is the code for nav bar which can be removed if it fails to work*/
 
#navigation {
    height: 30px;
    width: 948px;
    background:#000;
}
 
#navigation li {
display: inline;
}
 
#navigation a {
float: left;
display: block;
width: 115px;
text-align: center;
padding: 3px 0;
}
 
#navigation li a:hover {
background: ;
color: ;
}
  1. body{
  2.     margin:0;
  3.     padding:0;
  4.     background: #333;
  5.     font-family: sans-serif;
  6.     font-size: 75%;
  7.     color: #fff;
  8.     text-align: justify;
  9. }
  10.  
  11. div{
  12. margin:0;
  13. padding-top:0;
  14. }
  15.  
  16. h1, h2, h3, p {
  17.      margin:0;
  18.      padding:10px;
  19.  }
  20.  
  21.  
  22.  
  23.  ul{
  24.      margin:0;
  25.      padding:0;
  26.  }
  27.  
  28.  li{
  29.      list-style-type:none;
  30.      color: #fff;
  31.  }
  32.  
  33.  li a{
  34.      display:block;
  35.      background:#000;
  36.      padding:5px 10px 5px 10px;
  37.      color: #fff;
  38. }
  39.  
  40. li a:hover{
  41.      background:#000;
  42.  }
  43.  
  44.  /* Uniquely Identified Containers */
  45.  
  46.  #page_container{
  47.      width:950px;
  48.      margin:0 auto;
  49.      margin-bottom: 50px;
  50.  }
  51.  
  52.  #header{
  53.      background:#000;
  54.      margin-top: 50px;
  55.      border-top: 1px solid #ffff00;
  56.      border-left: 1px solid #ffff00;
  57.      border-right: 1px solid #ffff00;
  58.      border-bottom: 1px solid #666666;
  59.  }
  60.  
  61.  #left_column{
  62.      width:19px;
  63.      float:left;
  64.      background:url(back.gif);
  65.      height: 340px;
  66.      border-left: 1px solid #ffff00;
  67.      padding-top: 60px;
  68.      padding-left: 0px;
  69.  }
  70.  
  71.  #center_column{
  72.      width:549px;
  73.      float:left;
  74.      height: 355px;
  75.      padding-top: 45px;
  76.      padding-left: 50px;
  77.      p width: 200px;
  78.  }
  79.  
  80. #center_column p{
  81.     width: 70%;
  82. }
  83.  
  84.  #right_column{
  85.      width:330px;
  86.      float:left;
  87.      background:url(back.gif);
  88.      height: 355px;
  89.      border-right: 1px solid #ffff00;
  90.      padding-top: 45px;
  91.  }
  92.  
  93.  #footer{
  94.      clear:both;
  95.      background:#000;
  96.      border-bottom: 1px solid #ffff00;
  97.      border-right: 1px solid #ffff00;
  98.      border-left: 1px solid #ffff00;
  99.  }
  100.  
  101.  /* CSS Document */
  102.  
  103.  .smallbox {
  104.      width: 80px;
  105.      height: 80px;
  106.      border: 1px solid #666;
  107.      float: left;
  108.      margin-left: 6px;
  109.      margin-bottom: 7px;
  110.  }
  111.  
  112.  div#smallbox div a:link, div#smallbox div a:visited {
  113.      text-decoration: none;
  114.  }
  115.  
  116.  div#smallbox div a:hover {
  117.  
  118.  }
  119.  #bluecube {
  120.      background-color: #40668C;
  121.      filter:alpha(opacity=75);
  122.      -moz-opacity:0.75;
  123.      opacity: 0.75;
  124.  }
  125. #greencube {
  126. background-color: #335C33;
  127.      filter:alpha(opacity=75);
  128.      -moz-opacity:0.75;
  129.      opacity: 0.75;
  130.  }
  131.  #yellowcube {
  132.      background-color: #FFD699;
  133.      filter:alpha(opacity=75);
  134.      -moz-opacity:0.75;
  135.      opacity: 0.75;
  136.  }
  137.  #yellowcube:link, #yellowcube:visited {
  138.      opacity: .40;
  139.      filter: alpha(opacity=40);
  140.  }
  141.  
  142.  #logo {
  143.     background-image: url('/2006/logo.gif');
  144.     background-position: 0% 0%;
  145.     width: 80px;
  146.     height: 80px;
  147.  }
  148.  
  149.  /*the following is the code for nav bar which can be removed if it fails to work*/
  150.  
  151. #navigation {
  152.     height: 30px;
  153.     width: 948px;
  154.     background:#000;
  155. }
  156.  
  157. #navigation li {
  158. display: inline;
  159. }
  160.  
  161. #navigation a {
  162. float: left;
  163. display: block;
  164. width: 115px;
  165. text-align: center;
  166. padding: 3px 0;
  167. }
  168.  
  169. #navigation li a:hover {
  170. background: ;
  171. color: ;
  172. }


Like i say, any help is really appreciated.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Code: [ Select ]
<p><li><a href="/2006/about.php">About</a></li>
<li><a href="/2006/projects.php">Projects</a></li>
<li><a href="/2006/services.php">Services</a></li>
<li><a href="/2006/contact.php">Contact Us</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li></p>
  1. <p><li><a href="/2006/about.php">About</a></li>
  2. <li><a href="/2006/projects.php">Projects</a></li>
  3. <li><a href="/2006/services.php">Services</a></li>
  4. <li><a href="/2006/contact.php">Contact Us</a></li>
  5. <li><a href="#">Link 1</a></li>
  6. <li><a href="#">Link 2</a></li></p>


Why is this surrounded in the p tag?

Code: [ Select ]
<script>
function showNav(id){
document.getElementById(id).style.display = 'block';
}
</script>
<div id="footer">
<a href="/2006/index.php" onmouseover="showNav('navigation')">Home</a>
<ul id="navigation">
<li><a href="/2006/about.php">About</a></li>
<li><a href="/2006/projects.php">Projects</a></li>
<li><a href="/2006/services.php">Services</a></li>
<li><a href="/2006/contact.php">Contact Us</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul></div>
</div>
  1. <script>
  2. function showNav(id){
  3. document.getElementById(id).style.display = 'block';
  4. }
  5. </script>
  6. <div id="footer">
  7. <a href="/2006/index.php" onmouseover="showNav('navigation')">Home</a>
  8. <ul id="navigation">
  9. <li><a href="/2006/about.php">About</a></li>
  10. <li><a href="/2006/projects.php">Projects</a></li>
  11. <li><a href="/2006/services.php">Services</a></li>
  12. <li><a href="/2006/contact.php">Contact Us</a></li>
  13. <li><a href="#">Link 1</a></li>
  14. <li><a href="#">Link 2</a></li>
  15. </ul></div>
  16. </div>


Not sure if this is what you looking for?
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Thanks RD, that has fixed it to a point. My only concern was when you do a mouse over and a sub catagory link appeared it would display all funny.

As a matter of interest, how would i go about creating the links so there is a series of options within that link which is displayed when the mouse hovers over the links?
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

I am not understanding?
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

I'd hoped to have it so if you were to hover over "Projects" with the mouse for example it would pop up with a list of different projects in which you could click on rather than clicking on Projects, seeing the page then clicking on the links listed there.

Does that make sense?
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Still not to certain what you mean. I thought the solution I provided does give you a hover?
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

No, i thought it would too. It fixes the positioning funnily enough.

I should really start from the beginning. I got into it a few years ago then there was a couple of years i didn't do anything and in that time my ability declined to me being a novice.

I've yet to find a tutorial online which demonstrates what i like that will also fit in with what i currently have. There is always one problem here or there.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Hence the reason I really dislike front end design and html :)
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

:lol:

Thanks RD.

Do you know how i would be able to have more options on mouse over?
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Cab you prehaps post a screen shot of what you trying to acheive?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8417
  • Loc: USA

Post 3+ Months Ago

#Gone :shock:

[EDIT:] Also, wouldn't the following be better?
Code: [ Select ]
<script>
function showNav(id)
{
    if(document.getElementById(id).style.display == 'block')
    {
        document.getElementById(id).style.display = 'none';
    }
    else
    {
        document.getElementById(id).style.display = 'block';
    }
}
</script>
<div id="footer">
<a href="javascript&#058;showNav('navigation');">Home</a>
<ul id="navigation">
<li><a href="/2006/about.php">About</a></li>
<li><a href="/2006/projects.php">Projects</a></li>
<li><a href="/2006/services.php">Services</a></li>
<li><a href="/2006/contact.php">Contact Us</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul></div>
</div>
  1. <script>
  2. function showNav(id)
  3. {
  4.     if(document.getElementById(id).style.display == 'block')
  5.     {
  6.         document.getElementById(id).style.display = 'none';
  7.     }
  8.     else
  9.     {
  10.         document.getElementById(id).style.display = 'block';
  11.     }
  12. }
  13. </script>
  14. <div id="footer">
  15. <a href="javascript&#058;showNav('navigation');">Home</a>
  16. <ul id="navigation">
  17. <li><a href="/2006/about.php">About</a></li>
  18. <li><a href="/2006/projects.php">Projects</a></li>
  19. <li><a href="/2006/services.php">Services</a></li>
  20. <li><a href="/2006/contact.php">Contact Us</a></li>
  21. <li><a href="#">Link 1</a></li>
  22. <li><a href="#">Link 2</a></li>
  23. </ul></div>
  24. </div>


[EDIT 2:] @SB: You need to put in display: none; to #navigation... hope that made sense.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

You put the hide in bogey, I figured that SB being a seasoned developer would have put that in himself :)
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

I've done as you both suggest..

Code: [ Select ]
<script>
function showNav(id)
{
if(document.getElementById(id).style.display == 'block')
{document.getElementById(id).style.display = 'none';
}
else
{
document.getElementById(id).style.display = 'block';
}
}
</script>
<div id="footer">
<a href="javascript&#058;showNav('navigation');">Home</a>
<ul id="navigation">
<li><a href="/2006/about.php">About</a></li>
<li><a href="/2006/projects.php">Projects</a></li>
<li><a href="/2006/services.php">Services</a></li>
<li><a href="/2006/contact.php">Contact Us</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul></div>
</div>
  1. <script>
  2. function showNav(id)
  3. {
  4. if(document.getElementById(id).style.display == 'block')
  5. {document.getElementById(id).style.display = 'none';
  6. }
  7. else
  8. {
  9. document.getElementById(id).style.display = 'block';
  10. }
  11. }
  12. </script>
  13. <div id="footer">
  14. <a href="javascript&#058;showNav('navigation');">Home</a>
  15. <ul id="navigation">
  16. <li><a href="/2006/about.php">About</a></li>
  17. <li><a href="/2006/projects.php">Projects</a></li>
  18. <li><a href="/2006/services.php">Services</a></li>
  19. <li><a href="/2006/contact.php">Contact Us</a></li>
  20. <li><a href="#">Link 1</a></li>
  21. <li><a href="#">Link 2</a></li>
  22. </ul></div>
  23. </div>


and CSS,

Code: [ Select ]
#navigation {
    display: none;
    height: 30px;
    width: 948px;
    background:#000;
}

#navigation li {
display: none;
}

#navigation a {
float: left;
display: block;
width: 115px;
text-align: center;
padding: 3px 0;
}

#navigation li a:hover {
background: ;
color: ;
}
  1. #navigation {
  2.     display: none;
  3.     height: 30px;
  4.     width: 948px;
  5.     background:#000;
  6. }
  7. #navigation li {
  8. display: none;
  9. }
  10. #navigation a {
  11. float: left;
  12. display: block;
  13. width: 115px;
  14. text-align: center;
  15. padding: 3px 0;
  16. }
  17. #navigation li a:hover {
  18. background: ;
  19. color: ;
  20. }


however it doesn't display right in either FF or IE.

To be honest, i'm not sure why it displays Home and not anything else.

I really am a novice, so assume i know nothing.

Thanks Bogey and RD.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>James Campbell Architects and Environmental</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>

#navigationProjects {
    display: none;
    z-index: 10;
    position: absolute;
    margin-top: -75px;
    width: 100px;
    border: 1px solid #ff0000;
}

#navigationProjects ul {
    display: inline;
    list-style-type: none;
    
}

#navigationProjects a {
float: left;
display: block;
width: 115px;
text-align: center;
padding: 3px 0;
}

#linkcontainer{
float:left;
height: 30px;
width: 100%;
border: 1px solid #ff0000;
}

</style>
</head>

<body>
<div id="page_container">
<div id="header">
<p>James Campbell Architects &amp; Environmental</p>
</div>

<div id="left_column">
<ul>
</ul>
</div>

<div id="center_column">
<h2>Welcome</h2>
<p>Example: text position</p>
</div>

<div id="right_column">
<p>
<div id="smallboxes">
<div class="smallbox" id="bluecube"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox" id="greencube"></div>

<div class="smallbox" id="yellowcube"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
</p>
</div>

<script>
function showNav(id, parent)
{
if(document.getElementById(id).style.display == 'block')
{document.getElementById(id).style.display = 'none';
}
else
{
document.getElementById(id).style.display = 'block';
document.getElementById(id).style.left = (parent.offsetLeft - 25) + "px";
}
}
</script>
<div id="footer">
<div id="linkcontainer">
<a href="#">Home</a> |
<a href="/2006/about.php">About</a> |
<a href="#" onmouseover="showNav('navigationProjects', this);">Projects
</a> |
<a href="/2006/services.php">Services</a> |
<a href="/2006/contact.php">Contact Us</a>
</div>
</div>
</div>
<div id="navigationProjects">
<ul>
<li><a href="/2006/projects.php?id=1">Link 1</a></li>
<li><a href="/2006/projects.php?id=2">Link 2</a></li>
</ul>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>James Campbell Architects and Environmental</title>
  5. <link rel="stylesheet" type="text/css" href="style.css" />
  6. <style>
  7. #navigationProjects {
  8.     display: none;
  9.     z-index: 10;
  10.     position: absolute;
  11.     margin-top: -75px;
  12.     width: 100px;
  13.     border: 1px solid #ff0000;
  14. }
  15. #navigationProjects ul {
  16.     display: inline;
  17.     list-style-type: none;
  18.     
  19. }
  20. #navigationProjects a {
  21. float: left;
  22. display: block;
  23. width: 115px;
  24. text-align: center;
  25. padding: 3px 0;
  26. }
  27. #linkcontainer{
  28. float:left;
  29. height: 30px;
  30. width: 100%;
  31. border: 1px solid #ff0000;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="page_container">
  37. <div id="header">
  38. <p>James Campbell Architects &amp; Environmental</p>
  39. </div>
  40. <div id="left_column">
  41. <ul>
  42. </ul>
  43. </div>
  44. <div id="center_column">
  45. <h2>Welcome</h2>
  46. <p>Example: text position</p>
  47. </div>
  48. <div id="right_column">
  49. <p>
  50. <div id="smallboxes">
  51. <div class="smallbox" id="bluecube"></div>
  52. <div class="smallbox"></div>
  53. <div class="smallbox"></div>
  54. <div class="smallbox"></div>
  55. <div class="smallbox"></div>
  56. <div class="smallbox" id="greencube"></div>
  57. <div class="smallbox" id="yellowcube"></div>
  58. <div class="smallbox"></div>
  59. <div class="smallbox"></div>
  60. </div>
  61. </p>
  62. </div>
  63. <script>
  64. function showNav(id, parent)
  65. {
  66. if(document.getElementById(id).style.display == 'block')
  67. {document.getElementById(id).style.display = 'none';
  68. }
  69. else
  70. {
  71. document.getElementById(id).style.display = 'block';
  72. document.getElementById(id).style.left = (parent.offsetLeft - 25) + "px";
  73. }
  74. }
  75. </script>
  76. <div id="footer">
  77. <div id="linkcontainer">
  78. <a href="#">Home</a> |
  79. <a href="/2006/about.php">About</a> |
  80. <a href="#" onmouseover="showNav('navigationProjects', this);">Projects
  81. </a> |
  82. <a href="/2006/services.php">Services</a> |
  83. <a href="/2006/contact.php">Contact Us</a>
  84. </div>
  85. </div>
  86. </div>
  87. <div id="navigationProjects">
  88. <ul>
  89. <li><a href="/2006/projects.php?id=1">Link 1</a></li>
  90. <li><a href="/2006/projects.php?id=2">Link 2</a></li>
  91. </ul>
  92. </div>
  93. </body>
  94. </html>


Something like this?
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Yeah, sorry about that RD i did mean to get back to you with a reply showing you what i was after.

That looks what i'm after, but as you may see (by clicking link in original post) it displays way differently to how i believe it should. In IE is different to FF.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Again I am shooting in the dark here :) Post a screen shot or something, need to see what you after
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8417
  • Loc: USA

Post 3+ Months Ago

Rabid Dog wrote:
You put the hide in bogey, I figured that SB being a seasoned developer would have put that in himself :)

I said that because all the links were still visible even before I clicked on 'Home'...
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Yeah the CSS would have to set the initial display value, but your input was appreciated as always :)
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

This seems like a good example on a site of what i am after...

http://www.howtocleananything.com/

I literally typed in "anything" and came across the site in Google. Obviously on the site i am trying to develop the nav is at the bottom so preferably i'd be after the mouseover list to go up, although i am quite interested to see how it would look going down...again i really don't know if that makes alot of sense.

Thanks again.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

ok I had a look and it seems you missing some css styling. I suck with CSS, seems like a job for Joebert, sorry :(
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Thanks RD, you've been very helpful.

If anyone else knows how i could go about fixing this nav bar i'd really appreciate it.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8417
  • Loc: USA

Post 3+ Months Ago

You want a drop up or a drop down menu?
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Drop up would be preferred.

To be honest, i don't really like the idea of the site being confined in this rectangle shape. If it was done otherwise i would have made the navigation system much different, but as it stands this is the preferred look.

Thanks Bogey.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8417
  • Loc: USA

Post 3+ Months Ago

Yeah, there are quite a few of drop ups out there... some CSS solutions and others JavaScript solutions. Let me see if I can dig up some results (I know I've being looking for one and had trouble with it :lol:

JavaScript Solution
CSS Play Solution

Post Information

  • Total Posts in this topic: 24 posts
  • Users browsing this forum: No registered users and 35 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.