No replies
Guy
Guy's picture
Offline
Enthusiast
Cambridge, UK
Last seen: 11 years 24 weeks ago
Cambridge, UK
Timezone: GMT+1
Joined: 2004-04-26
Posts: 54
Points: 0

the css

body
{
background-color: #333;
font-family: verdana;
font-size: 12pt;
margin:10px;
font-size: 10px;
color: #fff;
}

#container
{
width:600px;
margin: 0 auto;
border: 1px #fff solid;
background-color: #000000;
}

#banner
{
background-color:#000;
margin:0;
}

#nav
{
float: right;
width: 120px;
border: 1px #fff solid;
text-align:center;
}

#content
{
border: 1px #fff solid;
margin-right: 122px;
}

#footer
{
clear: both;
border: 1px #fff solid;
}

#nav ul li
{
margin:0;
display: inline;
}

#nav ul li a
{
padding: 0px 5px;
text-decoration: none;
border: 1px #fff solid;
color: #ff0000;
}

#nav ul li a:hover
{
border: 1px #fff solid;
color: #000;
background-color:#ff0000;
}

#nav ul li a#current
{
border: 1px #fff solid;
color: #003399;
border-color: #fff;
background-color:#fff;
}

p
{
padding:10px;
}

the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="ROBOTS" content="ALL" />
    <meta name="Author" content="Guy Chisholm">
    <style type="text/css"  media="screen">@import "../sitetech/sheet1.css";</style>
    <title>=-Home</title>
</head>
<body>
<div id="container">
   <div id="banner">
      <img src="../img/banner2.gif" alt="">
   </div>
      <div id="nav">
         <br />
         Navigation 1<br /><br />
         Navigation 2<br /><br />
         Navigation 3<br /><br />
         Navigation 4<br /><br />
         Navigation 5<br /><br />
         Navigation 6<br /><br />
         Navigation 7<br /><br />
         Navigation 8<br /><br />
         Navigation 9<br /><br />
         Navigation 10<br /><br />
         Navigation 11<br /><br />
         Navigation 12<br /><br />
      </div>
      <div id="content">
	<p>blah blah blah blah blah blah blah blah bla</p>
      </div>
      <div id="footer">
         Footer
      </div>
   </div>
</body>
</html>

(sorry about the use of break lines there, it wont be in the final thing!)

I was fiddling about with fixed positioning to make the nav bar element slide down in its little column! Now i got this to work in mozilla really nicely, and still remains the same in ie, by adding this code:
position: fixed; margin-left: 478px;
to the nav element, but in opera it decided to make the margin left attribute set from the browser window border as opposed to from the content elements border (see picture)!

Any help much appriciated!

(hope u can see the very compressed printscreen image!)

Cheers,

Who discovered we could get milk from cows, and what did he THINK he was doing at
the time? - Billy Connolly