SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation help please

    Hi Guys,

    I'm trying to build a CSS version of my current <table> site www.thisisslough.com

    Now I have started on it and here's my code:


    HTML Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    body {
      text-align: center;
      }
    
    #container {
      margin: 0 auto;
      width: 100%;
      text-align: left
      } 
    
    #navigator {background-color: #FFFFFF;
    width: auto;
    position: absolute;
    text-align: left;
    padding: 8px;}
    
    .navigationbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .navigationbutton a {padding: 4px;
    text-decoration: none;
    display: block;
    color: #ffffff;
    background-color: #000099;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;}
    
    .sectionbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .sectionbutton a {padding: 4px;
    background-color: #0066ff;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    border-top: 2px #ffe5c3 solid;
    border-left: 2px #ffe5c3 solid;
    border-bottom: 2px #7f6645 solid;
    border-right: 2px #7f6645 solid;
    display: block;}
    
    .mainbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .mainbutton a {padding: 4px;
    background-color: #cccccc;
    font-weight: bold;
    text-decoration: none;
    color: #4f5942;
    border-top: 2px #edf8de solid;
    border-left: 2px #edf8de solid;
    border-bottom: 2px #727f5e solid;
    border-right: 2px #727f5e solid;
    display: block;}
    
    .mainbutton a:hover {border-top: 2px #727f5e solid;
    border-left: 2px #727f5e solid;
    border-bottom: 2px #727f5e solid;
    border-right: 2px #727f5e solid;
    background-color: #eeeeee;}
    
    .centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }
    </style>
    </head>
    
    <body>
    <img src="banner.jpg" width="743" height="98">
      <div id="container">
    <div id="navigator"> 
      <p class="navigationbutton"><a href="../index.html">Navigation</a></p>
      <p class="sectionbutton"><a href="../../index.html">Sections</a></p>
      <p class="mainbutton"><a href="../../../../index.html">Latest News</a></p>
      <p class="mainbutton"><a href="../../../../../index.html">Latest Business</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">E-Commerce</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Cinema</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Leisure</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Eating Out</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Contact Us</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Message Board</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Motoring</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Advertiser</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Observer</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Public Notices</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Property</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Job Search</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Local Links</a>
      <p class="mainbutton"><a href="../../../../../../link.html">Motor Search</a> 
    </div>
      </div>
    </body> 
    </html>
    Now my problem is that on my Mac and PC I want to be able to see the site well on both, so I used a #container.

    Now though I want my navigation bar to sit just above the left hand edge of the banner as it is on my tabled www.thisisslough.com site, but I don't know how to do it. Any ideas please?

    I've tried setting the navigation:
    margin-left: 16.0px;
    margin-right: 96.5px;

    But it does not move?

    PLEASE HELP!!!!!

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope this helps :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html> 
    <head> 
    <title>Come friendly bombs...</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <style type="text/css"> 
    body { 
    margin:0;
    padding:0;
    background-color:white;
    } 
    #container { 
    margin: 0 auto; 
    width: 743px; 
    } 
    #navigator {
    width: auto; 
    position: absolute; 
    text-align: left; 
    margin:0;
    padding: 0;
    list-style:none;
    } 
    #navigator li {
    margin:0;
    padding:0;
    }
    #navigator .navigationbutton {
    font-weight: bold; 
    text-align: center; 
    margin-bottom: 3px; 
    margin-top: 3px;
    } 
    #navigator .navigationbutton a {
    padding: 4px; 
    text-decoration: none; 
    display: block; 
    color: #ffffff; 
    background-color: #000099; 
    border-top: 2px #cce3ff solid; 
    border-left: 2px #cce3ff solid; 
    border-bottom: 2px #31557f solid; 
    border-right: 2px #31557f solid;
    } 
    #navigator .sectionbutton {
    font-weight: bold; 
    text-align: center; 
    margin-bottom: 3px; 
    margin-top: 3px;
    } 
    #navigator .sectionbutton a {
    padding: 4px; 
    background-color: #0066ff; 
    font-weight: bold; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 2px #ffe5c3 solid; 
    border-left: 2px #ffe5c3 solid; 
    border-bottom: 2px #7f6645 solid; 
    border-right: 2px #7f6645 solid; 
    display: block;
    } 
    #navigator li {
    font-weight: bold; 
    text-align: center; 
    margin-bottom: 3px; 
    margin-top: 3px;
    } 
    #navigator a {
    padding: 4px;
    background-color: #cccccc; 
    font-weight: bold; 
    text-decoration: none; 
    color: #4f5942; 
    border-top: 2px #edf8de solid; 
    border-left: 2px #edf8de solid; 
    border-bottom: 2px #727f5e solid; 
    border-right: 2px #727f5e solid; 
    display: block;
    } 
    #navigator a:hover {
    border: 2px #727f5e solid; 
    background-color: #eeeeee;
    } 
    .centeredImage { 
    text-align:center; 
    margin:0px; 
    padding:0px; 
    } 
    </style> 
    </head> 
    <body> 
    <div id="container">
    <img src="banner.jpg" width="743" height="98" />  
    <!-- You really should change the name of this image - some ad-blockers block images called 'banner' -->
    <ul id="navigator"> 
    <li class="navigationbutton"><a href="../index.html">Navigation</a></li>
    <li class="sectionbutton"><a href="../../index.html">Sections</a></li>  
    <li><a href="../../../../index.html">Latest News</a></li>  
    <li><a href="../../../../../index.html">Latest Business</a></li>  
    <li><a href="../../../../../../link.html">E-Commerce</a></li> 
    <li><a href="../../../../../../link.html">Cinema</a></li> 
    <li><a href="../../../../../../link.html">Leisure</a></li> 
    <li><a href="../../../../../../link.html">Eating Out</a></li> 
    <li><a href="../../../../../../link.html">Contact Us</a></li> 
    <li><a href="../../../../../../link.html">Message Board</a></li> 
    <li><a href="../../../../../../link.html">Motoring</a></li> 
    <li><a href="../../../../../../link.html">Advertiser</a></li>
    <li><a href="../../../../../../link.html">Observer</a></li> 
    <li><a href="../../../../../../link.html">Public Notices</a></li> 
    <li><a href="../../../../../../link.html">Property</a></li>
    <li><a href="../../../../../../link.html">Job Search</a></li> 
    <li><a href="../../../../../../link.html">Local Links</a></li>  
    <li><a href="../../../../../../link.html">Motor Search</a></li> 
    </ul>  
    </div> 
    </body> 
    </html>

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    use A DTD

    give main #container a width
    give #navigator a with

    float #navigator left float . content right, clear float

    Did you test yours Bon ?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 123435 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    
    body{
      text-align: center;
      }
    
    #container {
      margin: 0 auto;
      width: 743px;
      text-align: left
      } 
    
    #navigator {
    float:left;
    background-color: #FFFFFF;
    /*width: auto;
    position: absolute;*/
    text-align: left;
    margin: 8px 8px 8px 0 ;
    width:150px;
    }
    
    .content{
    display:inline;
    background: #ffff66;
    float:right;
    border:1px solid #ff0000;
    text-align: left;
    width:570px;
    margin: 8px 8px 8px 0 ;
    }
    
    
    .navigationbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .navigationbutton a {padding: 4px;
    text-decoration: none;
    display: block;
    color: #ffffff;
    background-color: #000099;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;}
    
    .sectionbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .sectionbutton a {padding: 4px;
    background-color: #0066ff;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    border-top: 2px #ffe5c3 solid;
    border-left: 2px #ffe5c3 solid;
    border-bottom: 2px #7f6645 solid;
    border-right: 2px #7f6645 solid;
    display: block;}
    
    .mainbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .mainbutton a {padding: 4px;
    background-color: #cccccc;
    font-weight: bold;
    text-decoration: none;
    color: #4f5942;
    border-top: 2px #edf8de solid;
    border-left: 2px #edf8de solid;
    border-bottom: 2px #727f5e solid;
    border-right: 2px #727f5e solid;
    display: block;}
    
    .mainbutton a:hover {border-top: 2px #727f5e solid;
    border-left: 2px #727f5e solid;
    border-bottom: 2px #727f5e solid;
    border-right: 2px #727f5e solid;
    background-color: #eeeeee;}
    
    .centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }
    
    .fcl{clear:both;}
    </style>
    </head>
    
    <body>
    <div><img src="banner.jpg" width="743" height="98" alt="" /></div>
    <div id="container">
    <div id="navigator"> 
      <p class="navigationbutton"><a href="../index.html">Navigation</a></p>
      <p class="sectionbutton"><a href="../../index.html">Sections</a></p>
      <p class="mainbutton"><a href="../../../../index.html">Latest News</a></p>
      <p class="mainbutton"><a href="../../../../../index.html">Latest Business</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">E-Commerce</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Cinema</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Leisure</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Eating Out</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Contact Us</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Message Board</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Motoring</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Advertiser</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Observer</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Public Notices</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Property</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Job Search</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Local Links</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Motor Search</a></p>
    </div>
    <div class="content">12345<br /><br /><br /><br /><br /><br /><br /></div>
    <div class="fcl"></div>
    </div>
    </body>
    </html>

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Did you test yours Bon ?
    Yes, I did. I didn't change so much of it though - the original code posted uses absolute positioning - I left it like that. It would be better to do what you suggested (as I'd normally do it that way) but I thought the poster may have had some kind of reason for wanting to use absolute positioning...

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Please test again in IE

  6. #6
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    OK, I didn't test it very well - I often forget to check IE. Stupid mistake... I'll fix it now...

  7. #7
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Guys!!!

    I used all4nerds version as I want the site centred. One last thing i'm confused on. On my tabled site www.thisisslough.com:

    I have a three panel layout.

    Now on all4nerds code he floats the .content to the right. Now I see you can't float an panel center, so how do I go about creating a third panel like on my existing site if .content is already aligned right ?

    Many, many thanks

    Chris

    PS: Also just to ask, what does <div class="fcl"></div> do?

    & love the <title> BonRouge !!

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    bring in a 3 colum maybe ?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 123435 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    
    body{
      text-align: center;
      }
    
    #container {
      margin: 0 auto;
      width: 743px;
      text-align: left
      } 
    
    #navigator {
    float:left;
    background-color: #FFFFFF;
    /*width: auto;
    position: absolute;*/
    text-align: left;
    margin: 8px 8px 8px 0 ;
    width:150px;
    }
    
    .content{
    padding:5px;
    display:inline;
    background: #ffff66;
    float:left;
    border:1px solid #ff0000;
    text-align: left;
    width:405px;
    margin: 8px 0px 8px 0 ;
    }
    
    .contentr{
    padding:5px;
    display:inline;
    background: #ffff66;
    float:right;
    border:1px solid #ff0000;
    text-align: left;
    width:140px;
    margin: 8px 8px 8px 0 ;
    }
    
    
    .navigationbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .navigationbutton a {padding: 4px;
    text-decoration: none;
    display: block;
    color: #ffffff;
    background-color: #000099;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;}
    
    .sectionbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .sectionbutton a {padding: 4px;
    background-color: #0066ff;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    border-top: 2px #ffe5c3 solid;
    border-left: 2px #ffe5c3 solid;
    border-bottom: 2px #7f6645 solid;
    border-right: 2px #7f6645 solid;
    display: block;}
    
    .mainbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .mainbutton a {padding: 4px;
    background-color: #cccccc;
    font-weight: bold;
    text-decoration: none;
    color: #4f5942;
    border-top: 2px #edf8de solid;
    border-left: 2px #edf8de solid;
    border-bottom: 2px #727f5e solid;
    border-right: 2px #727f5e solid;
    display: block;}
    
    .mainbutton a:hover {border-top: 2px #727f5e solid;
    border-left: 2px #727f5e solid;
    border-bottom: 2px #727f5e solid;
    border-right: 2px #727f5e solid;
    background-color: #eeeeee;}
    
    .centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }
    
    .fcl{clear:both;}
    
    .work{border:1px solid #0000ff;}
    </style>
    </head>
    
    <body>
    <div><img src="banner.jpg" width="743" height="98" alt="" /></div>
    <div id="container">
    <div id="navigator"> 
      <p class="navigationbutton"><a href="../index.html">Navigation</a></p>
      <p class="sectionbutton"><a href="../../index.html">Sections</a></p>
      <p class="mainbutton"><a href="../../../../index.html">Latest News</a></p>
      <p class="mainbutton"><a href="../../../../../index.html">Latest Business</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">E-Commerce</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Cinema</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Leisure</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Eating Out</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Contact Us</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Message Board</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Motoring</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Advertiser</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Observer</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Public Notices</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Property</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Job Search</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Local Links</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">Motor Search</a></p>
    </div>
    <div class="content"><div class="work">12345<br /><br /><br /><br /><br /><br /><br /></div></div>
    <div class="contentr"><div class="work">12345<br /><br /><br /><br /><br /><br /><br /></div></div>
    <div class="fcl"></div>
    </div>
    </body>
    </html>

  9. #9
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK... I cleaned up what I'd posted and tested it properly...
    I think you really should have the menu marked up as a list...
    And I added a right column...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html> 
    <head> 
    <title>Come friendly bombs...</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <style type="text/css"> 
    body { 
    margin:0;
    padding:0;
    background-color:white;
    } 
    #container { 
    margin: 0 auto; 
    width: 743px; 
    position:relative;
    } 
    #navigator {
    width: 150px; 
    float:left;
    text-align: left; 
    margin:0;
    padding: 0;
    list-style:none;
    }
    #navigator li {
    margin:0;
    padding:0;
    height:20px;
    line-height:20px;
    font-weight: bold; 
    text-align: center; 
    }
    #navigator .navigationbutton {
    font-weight: bold; 
    text-align: center; 
    } 
    #navigator a {
    height:20px;
    line-height:20px;
    }
    #navigator .navigationbutton a {
    height:20px;
    line-height:20px;
    text-decoration: none; 
    display: block; 
    color: #ffffff; 
    background-color: #000099; 
    border-top: 2px #cce3ff solid; 
    border-left: 2px #cce3ff solid; 
    border-bottom: 2px #31557f solid; 
    border-right: 2px #31557f solid;
    } 
    #navigator .sectionbutton {
    font-weight: bold; 
    text-align: center; 
    } 
    #navigator .sectionbutton a {
    background-color: #0066ff; 
    font-weight: bold; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 2px #ffe5c3 solid; 
    border-left: 2px #ffe5c3 solid; 
    border-bottom: 2px #7f6645 solid; 
    border-right: 2px #7f6645 solid; 
    display: block;
    } 
    #navigator a {
    background-color: #cccccc; 
    font-weight: bold; 
    text-decoration: none; 
    color: #4f5942; 
    border-top: 2px #edf8de solid; 
    border-left: 2px #edf8de solid; 
    border-bottom: 2px #727f5e solid; 
    border-right: 2px #727f5e solid; 
    display: block;
    } 
    #navigator a:hover {
    border: 2px #727f5e solid; 
    background-color: #eeeeee;
    } 
    #content {
    margin:0 150px;
    }
    * html #content {
    height:1px;
    }
    #right {
    float:right;
    width:150px;
    }
    .centeredImage { 
    text-align:center; 
    margin:0; 
    padding:0; 
    } 
    #clear {
    clear:both;
    margin-top:-1px;
    height:1px;
    overflow:hidden;
    }
    
    </style> 
    </head> 
    <body> 
    <div id="container">
    <img src="banner.jpg" width="743" height="98" />  
    <!-- You really should change the name of this image - some ad-blockers block images called 'banner' -->
    <div id="right">
    Right content goes here</div>
    <ul id="navigator"> 
    <li class="navigationbutton"><a href="../index.html">Navigation</a></li>
    <li class="sectionbutton"><a href="../../index.html">Sections</a></li>  
    <li><a href="../../../../index.html">Latest News</a></li>  
    <li><a href="../../../../../index.html">Latest Business</a></li>  
    <li><a href="../../../../../../link.html">E-Commerce</a></li> 
    <li><a href="../../../../../../link.html">Cinema</a></li> 
    <li><a href="../../../../../../link.html">Leisure</a></li> 
    <li><a href="../../../../../../link.html">Eating Out</a></li> 
    <li><a href="../../../../../../link.html">Contact Us</a></li> 
    <li><a href="../../../../../../link.html">Message Board</a></li> 
    <li><a href="../../../../../../link.html">Motoring</a></li> 
    <li><a href="../../../../../../link.html">Advertiser</a></li>
    <li><a href="../../../../../../link.html">Observer</a></li> 
    <li><a href="../../../../../../link.html">Public Notices</a></li> 
    <li><a href="../../../../../../link.html">Property</a></li>
    <li><a href="../../../../../../link.html">Job Search</a></li> 
    <li><a href="../../../../../../link.html">Local Links</a></li>  
    <li><a href="../../../../../../link.html">Motor Search</a></li> 
    </ul> 
    <div id="content">
    content goes here
    </div> 
    <div id="clear"></div>
    </div> 
    </body> 
    </html>

  10. #10
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys - really appreciate this and am learning a lot. Going by what you guys did before I tried to add two more table colums in css so it is the same as my www.thisisslough.com site with a topbar (homepage, date etc) and bottombar (copyright).

    So I tried this code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 123435 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    
    body{
      text-align: center;
      font-family: Verdana, Helvetica, Arial, sans-serif;
      font-size: 11px;
      }
    
    #container {
      margin: 0 auto;
      width: 743px;
      text-align: left
      } 
    
    #navigator {
    float:left;
    background-color: #FFFFFF;
    /*width: auto;
    position: absolute;*/
    text-align: left;
    margin: 8px 8px 8px 0 ;
    width:150px;
    }
    
    .contentm{
    padding:5px;
    display:inline;
    background: #ffffff;
    float:left;
    border:1px solid #000000;
    text-align: left;
    width:405px;
    margin: 8px 0px 8px 0 ;
    }
    
    .contentt{
    padding:5px;
    display:inline;
    background: #ffffff;
    float:left;
    border:1px solid #000000;
    text-align:center;
    width: 743px;
    margin: 8px 0px 8px 0 ;
    }
    
    .contentb{
    padding:5px;
    display:inline;
    background: #ffffff;
    float:left;
    border:1px solid #000000;
    text-align: center;
    width: 743px;
    margin: 8px 0px 8px 0 ;
    }
    
    .contentr{
    padding:5px;
    display:inline;
    background: #ffffff;
    float:right;
    border:1px solid #000000;
    text-align: left;
    width:140px;
    margin: 8px 8px 8px 0 ;
    }
    
    
    .navigationbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .navigationbutton a {padding: 4px;
    text-decoration: none;
    display: block;
    color: #ffffff;
    background-color: #000099;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;}
    
    .sectionbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .sectionbutton a {padding: 4px;
    background-color: #0066ff;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    border-top: 2px #ffe5c3 solid;
    border-left: 2px #ffe5c3 solid;
    border-bottom: 2px #7f6645 solid;
    border-right: 2px #7f6645 solid;
    display: block;}
    
    .mainbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .mainbutton a {padding: 4px;
    background-color: #cccccc;
    font-weight: bold;
    text-decoration: none;
    color: #4f5942;
    border-top: 2px #edf8de solid;
    border-left: 2px #edf8de solid;
    border-bottom: 2px #727f5e solid;
    border-right: 2px #727f5e solid;
    display: block;}
    
    .mainbutton a:hover {border-top: 2px #727f5e solid;
    border-left: 2px #727f5e solid;
    border-bottom: 2px #727f5e solid;
    border-right: 2px #727f5e solid;
    background-color: #eeeeee;}
    
    .centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }
    
    .fcl{clear:both;}
    
    .work{border:4px solid #0000ff;}
    </style>
    </head>
    
    <body>
    <div><img src="slough.jpg" width="743" height="98" alt="" /></div>
    <div class="contentt">top date and homepage content</div>
    <div id="container">
    <div id="navigator"> 
      <p class="navigationbutton"><a href="file:///C%7C/Documents%20and%20Settings/Chris%20Boxall/Desktop/index.html">Navigation</a></p>
      <p class="sectionbutton"><a href="file:///C%7C/Documents%20and%20Settings/Chris%20Boxall/index.html">Sections</a></p>
      <p class="mainbutton"><a href="file:///C%7C/index.html">Latest News</a></p>
      <p class="mainbutton"><a href="file:///C%7C/index.html">Latest Business</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">E-Commerce</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Cinema</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Leisure</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Eating Out</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Contact Us</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Message Board</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Motoring</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Advertiser</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Observer</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Public Notices</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Property</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Job Search</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Local Links</a></p>
      <p class="mainbutton"><a href="file:///C%7C/link.html">Motor Search</a></p>
    </div>
      <div class="contentm">Maintext<br />
        <br /><br /><br /><br /><br /><br /></div>
    <div class="contentr">lefttext<br /><br /><br /><br /><br /><br /><br /></div>
    <div class="fcl"></div>
    </div>
    <div class="contentb">bottom copyright content</div>
    </body>
    </html>
    ...and it does seem to work, but the tables are not centred to go with the other format. I guess it's something fairly straightforward?

    Cheers

    Chris

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    wrappe the div's with a width of 743px in the #container

    or give al div's with a width of 743px a margin:0 auto;


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
  •