W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2003

RE: navigation banner in css.

From: Mirabella, Mathew J <Mathew.Mirabella@team.telstra.com>
Date: Wed, 22 Jan 2003 09:46:18 +1000
Message-ID: <73388857A695D31197EF00508B08F2980A00EC12@ntmsg0131.corpmail.telstra.com.au>
To: "W3C-WAI-IG List" <w3c-wai-ig@w3.org>

Thanks Iris and Charles.
I did find the specific css i was looking for.  it was sent by mat may recently.  below is the details for anyone interested.

Mat May wrote...
One thing I want to recommend here is the CSS used for the link bar. 
It's possible to flow links in a bar together with very minimal HTML 
and CSS. For example:

HTML:
<div class="topnav">
<a href="">Home</a>
<a href="">About</a>
<a href="">Services</a>
<a href="">Resources</a>
<a href="">Contact</a>
</div>

CSS:
	.topnav a { display: block; float: left; width: 20%; text-align: 
center; background-color: black; color: white; text-decoration: none; 
font-family: Verdana, sans-serif; }

You can stylize each link with borders, etc., but this is much easier 
to deal with and keep up than throwing them in tables. (A bonus: when 
you declare the A element as a block element using "display: block", 
the entire area is clickable, not just the word.)



-----Original Message-----
From: iris [mailto:iristopa@yahoo.com]
Sent: Wednesday, 22 January 2003 7:29 AM
To: w3c-wai-ig@w3.org
Subject: Re: navigation banner in css.



--- "Mirabella, Mathew J"
<Mathew.Mirabella@team.telstra.com> wrote:
> 
> all.
> Recently, someone sent an example of a bit of css
> that does the job of creating a navigation banner of
> links rather than using a table for layout.  I have
> misplaced this.  Could someone please send that
> information to me again?
> Thanks.
> Mat.

hi mat

if you mean tableless css layout, i've just converted
some of my sites.  have a look if you want:
http://www.demos.ac.uk/ (header is still in a table)
http://www.cch-uk.org/ (all css)

i also put some resources together here for anyone
wanting to learn about CSS layout:
http://www.jarmin.com/accessibility/resources/html.html
scroll down to CSS Layout

hope that helps and it wasn't anything more specific
you were looking for.

iris



=====
*******************************
omnia mea mecum porto

<http://www.jarmin.com/>
<http://www.demos.ac.uk/>
*******************************

__________________________________________________
Do you Yahoo!?
Yahoo! Mail Plus - Powerful. Affordable. Sign up now.
http://mailplus.yahoo.com
Received on Tuesday, 21 January 2003 18:48:01 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 19 July 2011 18:14:08 GMT