Re: How to acheive a nav bar without tables.

On Thu, 11 Oct 2001, John Snelson wrote:

> I thought I had come up with the perfect way to create a nav bar to the
> left of my document, by floating it, and setting the width to 10
> percent, so that the rest of the page content flowed around it.
> 
> However, when I view this in netscape 4, my header for the page, in an
> <h1/> tag, does not flow around the floating navbar. My content in <p/>
> tags does, however.
> 
> I know netscape has a broken implementation of stylesheets, but is there
> a method of doing this properly, or a workaround to allow netscape users
> to at least read my nav bar?
> 
> John
> 

Try the following, which works for me on Navigator 4.5, IE5 and
Opera 5. The image "navbar.gif is a pattern which is then
repeated down the left margin as the background to the navigation
links.

<style type="text/css">
body
{
  background: white url(navbar.gif) repeat-y;
  color: black;
  margin-left: 129px;
  margin-right: 20px;
  font-family: sans-serif;
}

.navbar
{
  position:absolute;
  top: 100px;
  left: 5px;
  width: 110px;
  height: auto;
  padding-left: 5px;
  color: yellow;
  font-weight: bold;
}

a {text-decoration : none}
.navbar :link {color: yellow}
.navbar :visited {color: yellow}
.navbar :active {color: #FF8080}
.navbar :hover {color: #FF8080}
</style>
</head>
<body>
<div class="navbar">
<p><a href=".....">link 1</a></p>
<p><a href=".....">link 2</a></p>
<p><a href=".....">link 3</a></p>
...
</div>
<body>
<h1>Top level heading</h1>
....

Regards,

-- Dave Raggett <dsr@w3.org> or <dave.raggett@openwave.com>
W3C Visiting Fellow, see http://www.w3.org/People/Raggett 
tel/fax: +44 122 586-6240 (or 7351) +44 771 213 7629 (mobile)

Received on Thursday, 11 October 2001 08:32:33 UTC