Navigation bar and footer

[thewebkid]

I am trying to place the navigation area underneath the header and above all the other content and also trying to place a footer on the page:

I don't think I have the proper code, I was hoping you could tell me what's wrong with my code:

Code: Select all

#links 
{
    width: 150;
    float: left;
    margin-right: 10px;
    border-right: solid 1px black;
    padding: 0px 10px 10px 5px
}

Here is the footer I was trying to create:

Code: Select all

#add 
{ border-top: solid 1px black;
    margin-top: 10px;
    padding-top: 5px
    display: clear;
    vertical-align: bottom 
}

Could you tell me what's wrong with the code?

[Marc]

Have you got any HTML so we can see what's going on around about?

[thewebkid]

Oops once again...sorry

Code: Select all

<div id="wrapper">
    <!-- Adrian Rodriguez Logo -->
    <div id="head">
    <p><a href="index.htm">
    <img src="images/logo.jpg" width="800" height="200" 
    alt="Adrian Rodriguez: Web developer and Graphic Designer" />
    </a>
    </p>
    </div>
    
    <!-- Links -->
    <div id="links">
    <p><a href="index.htm">Home</a>
       <a href="bio.htm">About Me</a>
       <a href="gal.htm">Portfolio</a>
       <a href="contact.htm">Contact</a>
       <a href="http://gdfc.freeforums.org">Forums</a>
       <a href="resrc.htm">Resources</a>
     </p>
    </div>
    
    <!-- Body Content -->
    <div id="content">
    <p id="first">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
     Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam 
     nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
     vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
     sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  
     sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
     At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet.
    </p>
    
    <!-- Self Photo -->
    <p id="second">vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
     sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  
     sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
     At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    
    <!-- Address -->
    <div id="add">
    <address>
    4296 Hwy 63 Black Rock, Arkansas 72415
    </address>
    
    </div>



</div>

[Stuart]

Try making the width of the link box 100%. Like this:

Code: Select all

#links 
{
    width: 100%;
    float: left;
    margin-right: 10px;
    border-right: solid 1px black;
    padding: 0px 10px 10px 5px
}

That should work as it takes up the page width and pushes the text below it.

[Monie]

You might want to use an ordered list:

HTML: Select all

<ol id="navlinks">
<li class="first"><a href="index.htm">Home</a></li>
<li><a href="bio.htm">About Me</a></li>
<li><a href="gal.htm">Portfolio</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="http://gdfc.freeforums.org">Forums</a></li>
<li class="last"><a href="resrc.htm">Resources</a></li>
</ol>

and in your css:

HTML: Select all

 #navlinks li {
    display: inline;
    margin-right: 0.4em;
    padding-left: 0.75em;
    border-left: 1px solid #99C;
    color: #99C;
}
#navlinks li.first {
    border-left: 0;
}
#navlinks {
    width: 800px;
    margin: 0 auto;
}

[thewebkid]

cool thanks I will try it