Skip site navigation (1)Skip section navigation (2) 
Date:      Fri, 7 Jan 2005 04:13:04 +0100
From:      Nicholas Wieland <nicholas_wieland@yahoo.it>
To:        Chris Zumbrunn <chris@zumbrunn.com>
Cc:        freebsd-www@freebsd.org
Subject:   Re: Rework of the FreeBSD website [was:FreeBSD'sVisualIdentity:Outdated?]
Message-ID:  <20050107031304.GA1938@pixie.subbacultcha.home>
In-Reply-To: <AC17F3AB-5EFE-11D9-BEAB-000A95C969C6@zumbrunn.com>
References:  <BB0FF3A5-58B9-11D9-BA41-000A95C969C6@zumbrunn.com> <736EAA55-5B8B-11D9-ACB2-000A95C969C6@zumbrunn.com> <20050102110732.GB861@zaphod.nitro.dk> <20050103232207.GA44980@gothmog.gr> <9FC79942-5DE3-11D9-BEAB-000A95C969C6@zumbrunn.com> <AC17F3AB-5EFE-11D9-BEAB-000A95C969C6@zumbrunn.com>
next in thread | previous in thread | raw e-mail | index | archive | help 
 - Chris Zumbrunn :
> The html versions are now available from the following URLs:
> 
> http://top.ch/sitedata/freebsd/freebsdweb1e.html
> http://top.ch/sitedata/freebsd/freebsdweb2e.html
> 
> How does that look?
> 
> There is also a patch http://top.ch/sitedata/freebsd/patch.txt but I'm 
> not sure if it's usable. At least it should provide you with a good 
> overview of the kind of modifications involved.

It looks nice, thanks !
xhtml should contain content and semantics, it would be wonderful to switch 
to xhtml strict in the future, so keep layout and graphics out of the
markup. The main reason for this separation is accessibility for people
with disabilities, but it's also easier to mantain.
A "menu" is nothing more than a list of links, and it should be implemented
with a list of links.
This is a not-tested-and-somewhat-crappy mockup that I did to explain
the concept at 4 in the morning:

<html>

    <head>
        <style type="text/css">@import "screen.css";</style>
    </head>

    <body>

        <div class="navbar">

            <ul>
                <a href=""><li>Overview</li></a>
                <a href=""><li>Download</li></a>
                <a href=""><li>Support</li></a>
                <a href=""><li>Docs</li></a>
                <a href=""><li>Ports</li></a>
                <a href=""><li>Search</li></a>
                <a href=""><li>Index</li></a>
            </ul>

        </div>

    </body>

</html>

As you can see it's really simple, a div, a list, a few links. It's
_not_ accessible, it doesn't have accesskeys and a few other things, but
making it AAA compliant is simple as adding a few attributes.

body {
    background: white;
}

.navbar {
    background: url(bar-bkg.jpg) repeat-x;
    height: 25px;
}

.navbar ul{
    list-style: none;
}

.navbar ul li {
    float: left;
    padding: 5px 10px 5px 10px;
    font-size: small;
}

A simple CSS file named screen.css. 
I use floats instead of inline to render the menu, I just prefer relative 
positioning. If you have questions just ask.

HAND,
  ngw

-- 
checking for life_signs in -lKenny... no
	Oh my god, make (1) killed Kenny ! You, bastards !

nicholas_wieland-at-yahoo-dot-it

Want to link to this message? Use this URL: <https://mail-archive.FreeBSD.org/cgi/mid.cgi?20050107031304.GA1938>