SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot gymaholic7's Avatar
    Join Date
    May 2001
    Location
    Marietta, GA
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Right Nav Bar in 3 Column Layout

    I've searched the forums best I can and I can't seem to find the answer to my problem. I have a nav bar on the left and right columns and the left one aligns great but the right one is doing something funky. I just want it to align on the left side instead of on the right how it is now. Also, I want it to act on hover like it does on the left side. Does anyone know what I'm doing wrong?

    http://www.prism.gatech.edu/~gtg550r/Website
    HTML Code:
     
        body {
         text-align:center;
         background-color: #6B4F2E;
         padding-top: 50px;
        }
            
        #container {
         width:690px;
         margin-right:auto;
         margin-left:auto;
         margin-top:10px;
         padding:0px;
         text-align:left;
        }
        
        #left {
         width:125px;
         padding:0px;
         float:left;
         background:#000;
        }
            
        #middle {
         width:450px;
         padding:10px;
         float:left;
         background:#FFF;
        }
            
        #right {
         width:75px;
         padding:0px;
         float:left;
         background:#000;
        }
        
        img{
         border: 0;
        }
        
        /* BEGIN LEFT MENU */
        
        #left ul{
         list-style-type: none;
         font-family: Arial, Helvetica, sans-serif;
        }
        
        #left a{
         background-image: url(home.gif);
         background-repeat: no-repeat;
         background-position: bottom right;
         display: block;
         padding: 0px;
         width: 85px;
         height: 65px;
         background-color: transparent;
         border: 0px;
        }
        
        #left a:hover{
         background-color: transparent;
         color: #fff;
         background-image: url(homeover.gif);
         background-repeat: no-repeat;
         background-position: bottom right;
        }
        
        /* END LEFT MENU */
        
    HTML Code:
      &quot;<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
         <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>
          <head>
           <title>Nicole Seekely</title>
           <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />
           <link href=&quot;bujum.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; />
          </head>
          <body> 
           <div id=&quot;container&quot;>
             <div id=&quot;left&quot;> 
              <ul>
              <li class=colorone><a href=&quot;index.html&quot;></a></li>
              <li class=colortwo><a href=&quot;index.html&quot;></a></li>
              <li class=colorthree><a href=&quot;index.html&quot;></a></li>
              <li class=colorfour><a href=&quot;index.html&quot;></a></li>
              <li class=colorfive><a href=&quot;index.html&quot;></a></li>
              <li class=colorsix><a href=&quot;index.html&quot;></a></li>
              </ul>
             </div> 
             <div id=&quot;middle&quot;> 
             <h2>#main-content</h2>
      <p id=&quot;hidden-navigation&quot;><a href=&quot;#navigations&quot; title=&quot;Jump to the main navigation&quot;>Skip to navigation</a></p>
             <p>The discussion for this demonstration can be found at </p>
      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mattis sem in risus. Aliquam congue magna pharetra orci. Quisque varius consequat lacus. Sed et ipsum sit amet est varius eleifend. Phasellus congue lorem ac ipsum. Etiam enim felis, blandit vitae, dignissim eget, viverra id, risus. Pellentesque sit amet elit. Sed fringilla ligula et libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent nec lorem. Sed nec purus non libero dignissim porttitor. </p> 
             </div> 
           <div id=&quot;right&quot;> 
            <ul>
            <li class=colorone><a href=&quot;index.html&quot;></a></li>
            <li class=colortwo><a href=&quot;index.html&quot;></a></li>
            <li class=colorthree><a href=&quot;index.html&quot;></a></li>
            <li class=colorfour><a href=&quot;index.html&quot;></a></li>
            <li class=colorfive><a href=&quot;index.html&quot;></a></li>
            <li class=colorsix><a href=&quot;index.html&quot;></a></li>
            </ul>
           </div>
          </div>
        
         </body>
        </html>
        
    "I don't believe in people I don't know.
    Strangers are just friends I haven't met."
    ~Inspection 12 (Jacksonville natives, wahoo!)

  2. #2
    SitePoint Zealot gymaholic7's Avatar
    Join Date
    May 2001
    Location
    Marietta, GA
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind! I finally figured it out... I just had to set the margins and paddings of the right ul list to 0 instead of having them absent.
    "I don't believe in people I don't know.
    Strangers are just friends I haven't met."
    ~Inspection 12 (Jacksonville natives, wahoo!)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •