Navigation help please

**7724** · Jun 20, 2005, 04:05

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!!!!!

**BonRouge** · Jun 20, 2005, 06:52

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>

**all4nerds** · Jun 20, 2005, 06:58

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>

**BonRouge** · Jun 20, 2005, 07:10

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...

**all4nerds** · Jun 20, 2005, 07:12

Hello

Please test again in IE

**BonRouge** · Jun 20, 2005, 07:14

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

**7724** · Jun 20, 2005, 07:16

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 !!

**all4nerds** · Jun 20, 2005, 07:27

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>

**BonRouge** · Jun 20, 2005, 07:35

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>

**7724** · Jun 20, 2005, 08:18

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

**all4nerds** · Jun 20, 2005, 08:29

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;

User Tag List

Thread: Navigation help please

Thread Tools

Display

Navigation help please

Bookmarks

Bookmarks

Posting Permissions