HTML Forum

**chrisb** · 06-20-2005, 06:56 AM

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

**chrishirst** · 06-20-2005, 07:42 AM

use a full and valid doctype otherwise IE will be in quirks mode.

**chrisb** · 08:05 AM

Yep, sorry, will do thanks, but that does not solve the problem to making the navigation go in the right place is it as I have not defined where the menu goes?

Thanks

Chris

**chrishirst** · 06-20-2005, 08:34 AM

one thing is to avoid using position:absolute

use floats and position:relative to make elements sit in the right places rather than absolute

I'd suggest TT but I see you've posted there already, Have a look at CSS Creator and I have some CSS Page Templates you can dissect.

**chrisb** · 06-20-2005, 08:56 AM

Cheers Chris - appreciate that!

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!