Menu Help Please

7724 · Jun 20, 2005

Hi Guys,

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

http://www.thisisslough.com

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

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

http://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!!!!! ;-)

ChrisHunt · Jun 21, 2005

Here's one way to do it. Mark up your pages like this:

Code:

<div id="container">
  <div id="header">
    ... header graphic and top bar here ...
  </div>
  <div id="menubar">
    ... menu and other left hand column stuff here ...
  </div>
  <div id="main">
    ... main content here ...
  </div>
  <div id="adbar">
    ... right hand column stuff here ...
  </div>
  <div id="footer">
    ... page footer here ...
  </div>
</div>

Then your CSS can be something like :

Code:

body {
  text-align: center;
  }

#container {
  margin: 0 auto;
  width: 743px;
  text-align: left
  }

#menubar {
   width: 125px;
   float: left;
}

#main {
   width: 466px;
   float: left;
}

#adbar {
   width: 120px;
   float: left;
}

#footer {
  clear: left;
}

I pulled the widths out of your existing code, they don't add up at the moment, but should do once you've added in the necessary padding and/or borders.

This is probably the simplest way of coding it. It would be better to use some method that allows you to put the #main <div> higher in the markup than the two side columns, but that's gonna be more tricky. If you're interested, I suggest you start at

http://glish.com/css/

in search of a better method.

Whatever you do, get your layout working first before you start worrying about how to render your nav buttons. I'd start with broad divs, then layout css, then think about how to markup your content in the simplest way, then do the presentational css last of all.

A tip though, when you get that far, use a <ul> for the nav buttons - it'll save you a lot of unnecessary classes.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Menu Help Please

7724

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor