9 replies [Last post]
florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 8 years 3 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

my main website is http://www.chokebore.net.

check out the navigation menu on the next pages : table hell !

i would like to change it to css. i tried once but it was horrible...

any general directions to give me ? i'm looking for maximum cross-browser compliance and simplicity !

thanks !

I'm a perfectionist
and perfect is a skinned knee

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 19 hours 42 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5151
Points: 2749

Navigation Lists

Hi Florent,
Instead of tables for navigation the trend seems to be lists.
http://www.alistapart.com/stories/taminglists/ is a good article to get you started.

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 8 years 3 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

look at my horrible table-based navigation menu !

very interesting article.

but i'm not sure it will help for what i need.

what i want to achieve (well, what i have achieved, only with tables Evil ) is a navigation menu that 'feels' like a windows menu (you know, the horizontal menu file, edit, view, tools, etc., and when you click on an option a box opens underneath it, the left side of the box being aligned with the left of the option, and the right side being free so that no options inside the box will wrap)

hope this is clear enough...

probably the easiest solution would be to set border styles for my tables...

i guess that answers my questions Laughing out loud unless anyone can think of something better !

I'm a perfectionist
and perfect is a skinned knee

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 8 years 3 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

look at my horrible table-based navigation menu !

time to bring this topic back from the dead...

so this is my navigation menu :

so far, this was the code i used :

<DIV ALIGN="center">
<TABLE WIDTH="600" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR><TD HEIGHT="20" ALIGN="center" CLASS="xxs">c h o k e b o r e . n e t</TD></TR>
<TR><TD HEIGHT="1" BGCOLOR="#808080"><IMG SRC="images/0.gif" WIDTH="1" HEIGHT="1" BORDER="0"></TD></TR>
<TR>
<TD>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
<TR ALIGN="center">
<TD CLASS="xxs" HEIGHT="20">|&news&|</TD>
<TD CLASS="xxs"><A HREF="band.html" CLASS="x">|&chokebore&|</A></TD>
<TD CLASS="xxs"><A HREF="reviews.html" CLASS="x">|&reviews&|</A></TD>
<TD CLASS="xxs"><A HREF="pics.html" CLASS="x">|&pictures&|</A></TD>
<TD CLASS="xxs"><A HREF="videos.html" CLASS="x">|&videos&|</A></TD>
<TD CLASS="xxs"><A HREF="sounds.html" CLASS="x">|&sounds&|</A></TD>
<TD CLASS="xxs"><A HREF="lyrics.html" CLASS="x">|&lyrics&|</A></TD>
<TD CLASS="xxs"><A HREF="tabs.html" CLASS="x">|&tablatures&|</A></TD>
<TD CLASS="xxs"><A HREF="links.html" CLASS="x">|&links&|</A></TD>
<TD CLASS="xxs"><A HREF="info.html" CLASS="x">|&info&|</A></TD>
</TR>
<TR><TD HEIGHT="1" COLSPAN="10" BGCOLOR="#808080"><IMG SRC="images/0.gif" WIDTH="1" HEIGHT="1" BORDER="0"></TD></TR>
<TR><TD HEIGHT="2" COLSPAN="10"></TD></TR>
<TR>
<TD COLSPAN="10">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="1" BGCOLOR="#808080">
<TR><TD>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="10" BGCOLOR="#ffffff">
<TR><TD CLASS="xxs">news / updates<BR><A HREF="upcoming.html" CLASS="x">upcoming releases</A><BR><A HREF="dates.html" CLASS="x">tour dates</A><BR><A HREF="newsletter.html" CLASS="x">newsletter</A><BR><A HREF="http://board.chokebore.net/" TARGET="_blank" CLASS="x">message board</A><BR><A HREF="http://www.chokebore.net/forum CLASS="x">old forum</A></TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR><TD>
<BR><BR>

(...)

as you may have noticed this is pure table-based layout.

i'm working on turning it to straight css.

here's what i have so far :

<DIV CLASS="main">

<DIV CLASS="head">c h o k e b o r e . n e t</DIV>

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
<TR>
<TD CLASS="menu">|&news&|</TD>
<TD CLASS="menu"><A HREF="band.html" CLASS="x">|&chokebore&|</A></TD>
<TD CLASS="menu"><A HREF="reviews.html" CLASS="x">|&reviews&|</A></TD>
<TD CLASS="menu"><A HREF="pics.html" CLASS="x">|&pictures&|</A></TD>
<TD CLASS="menu"><A HREF="videos.html" CLASS="x">|&videos&|</A></TD>
<TD CLASS="menu"><A HREF="sounds.html" CLASS="x">|&sounds&|</A></TD>
<TD CLASS="menu"><A HREF="lyrics.html" CLASS="x">|&lyrics&|</A></TD>
<TD CLASS="menu"><A HREF="tabs.html" CLASS="x">|&tablatures&|</A></TD>
<TD CLASS="menu"><A HREF="links.html" CLASS="x">|&links&|</A></TD>
<TD CLASS="menu"><A HREF="info.html" CLASS="x">|&info&|</A></TD>
</TR>
<TR><TD HEIGHT="2" COLSPAN="10"></TD></TR>
<TR>
<TD COLSPAN="10">
<DIV CLASS="border">news / updates<BR><A HREF="upcoming.html" CLASS="x">upcoming releases</A><BR><A HREF="dates.html" CLASS="x">tour dates</A><BR><A HREF="newsletter.html" CLASS="x">newsletter</A><BR><A HREF="http://board.chokebore.net/" TARGET="_blank" CLASS="x">message board</A><BR><A HREF="http://www.chokebore.net/forum CLASS="x">old forum</A></DIV>
</TD>
</TR>
</TABLE>

and here's the css that goes with it :

BODY, DIV, P, TD {font-family:Verdana,Arial,sans-serif;font-size:12px}

BODY {margin:0pt;scrollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#C0C0C0;
scrollbar-darkshadow-color:#C0C0C0;
scrollbar-track-color:#FAFAFA;
scrollbar-arrow-color:#C0C0C0;
scrollbar-base-color:#FFFFFF;
text-align:center}

HR {height:1px;border: 0px solid #808080;border-top-width:1px;margin-top:-7px}

.xxl {font-size:22px}
.xl {font-size:20px}
.l {font-size:18px}
.m {font-size:16px}
.s {font-size:14px}
.xs {font-size:12px}
.xxs {font-size:10px}
.w {color:#FFFFFF}
.x {color:#C0C0C0}
.b {background-color:#FFFFFF;color:#808080;font-family:Verdana,Arial,sans-serif;font-size:10px;border-bottom:#808080 1px solid;border-left:#808080 1px solid;border-right:#808080 1px solid;border-top:#808080 1px solid}

A, A:Visited, A:Active {text-decoration:none}
A:Hover {text-decoration:underline}

A:Hover.x {color:#808080;text-decoration:none}

.nav {font-size:10px}

.a {background-color:#FFFFFF;color:#808080;font-family:Verdana,Arial,sans-serif;border-bottom:#808080 1px solid;border-left:#808080 1px solid;border-right:#808080 1px solid;border-top:#808080 1px solid}

.main {margin-left:auto;margin-right:auto;width:600px}

.head {font-size:10px;text-align:center;padding:5px;border-bottom:1px solid #808080}

.menu {font-size:10px;text-align:center;height:20px;border-bottom:1px solid #808080}

.border {font-size:10px;text-align:left;float:left;border:#808080 1px solid;padding:10px}

.date {font-size:10px;border-bottom:1px solid #808080;margin-bottom:5px}

.just {text-align:justify}

.right {font-size:10px;text-align:right;width:110px;margin-left:20px;float:right;border:#808080 1px solid;padding:10px;margin-bottom:10px;clear:right}

.foot {font-size:10px;text-align:center;padding:5px;border-top:1px solid #808080;margin-top:10px}

the problem is : i'm still using a table for the menu !

do you see a way of not using it ? knowing that

florent wrote:
what i want to achieve (well, what i have achieved, only with tables ) is a navigation menu that 'feels' like a windows menu (you know, the horizontal menu file, edit, view, tools, etc., and when you click on an option a box opens underneath it, the left side of the box being aligned with the left of the option, and the right side being free so that no options inside the box will wrap)

I'm a perfectionist
and perfect is a skinned knee

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 8 years 3 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

look at my horrible table-based navigation menu !

okay...

i started over

this is what i got now :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<HEAD>
<TITLE>chokebore : news</TITLE>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="content-language" CONTENT="en">
<LINK REL="STYLESHEET" TYPE="text/css" HREF="style.css">
</HEAD>

<BODY BGCOLOR="#ffffff" TEXT="#808080" LINK="#c0c0c0" VLINK="#c0c0c0" ALINK="#c0c0c0">

<DIV CLASS="main">

<DIV CLASS="head">c h o k e b o r e . n e t</DIV>

<DIV CLASS="menu">
|&news&|
<A HREF="band.html">|&chokebore&|</A>
<A HREF="reviews.html">|&reviews&|</A>
<A HREF="pics.html">|&pictures&|</A>
<A HREF="videos.html">|&videos&|</A>
<A HREF="sounds.html">|&sounds&|</A>
<A HREF="lyrics.html">|&lyrics&|</A>
<A HREF="tabs.html">|&tablatures&|</A>
<A HREF="links.html">|&links&|</A>
<A HREF="info.html">|&info&|</A>
</DIV>

<DIV CLASS="border" STYLE="position:relative;left:0px">
news / updates<BR>
<A HREF="upcoming.html">upcoming releases</A><BR>
<A HREF="dates.html">tour dates</A><BR>
<A HREF="newsletter.html">newsletter</A><BR>
<A HREF="http://board.chokebore.net/" TARGET="_blank">message board</A><BR>
<A HREF="http://www.chokebore.net/forum forum</A>
</DIV>

<BR CLEAR="all"><BR>

css looks like this :

BODY, DIV, P, TD {font-family:Verdana,Arial,sans-serif;font-size:12px}

BODY {margin:0pt;scrollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#C0C0C0;
scrollbar-darkshadow-color:#C0C0C0;
scrollbar-track-color:#FAFAFA;
scrollbar-arrow-color:#C0C0C0;
scrollbar-base-color:#FFFFFF;
text-align:center}

HR {height:1px;border: 0px solid #808080;border-top-width:1px;margin-top:-7px}

.xxl {font-size:22px}
.xl {font-size:20px}
.l {font-size:18px}
.m {font-size:16px}
.s {font-size:14px}
.xs {font-size:12px}
.xxs {font-size:10px}
.w {color:#FFFFFF}
.x {color:#C0C0C0}
.b {background-color:#FFFFFF;color:#808080;font-family:Verdana,Arial,sans-serif;font-size:10px;border-bottom:#808080 1px solid;border-left:#808080 1px solid;border-right:#808080 1px solid;border-top:#808080 1px solid}

A, A:Visited, A:Active {text-decoration:none}
A:Hover {text-decoration:underline}

.menu A:Hover, .border A:Hover {color:#808080;text-decoration:none}

.nav {font-size:10px}

.a {background-color:#FFFFFF;color:#808080;font-family:Verdana,Arial,sans-serif;border-bottom:#808080 1px solid;border-left:#808080 1px solid;border-right:#808080 1px solid;border-top:#808080 1px solid}

.main {margin-left:auto;margin-right:auto;width:600px}

.head {font-size:10px;text-align:center;line-height:20px;border-bottom:1px solid #808080}

.menu {font-size:10px;text-align:center;line-height:20px;border-bottom:1px solid #808080;margin-bottom:2px}

.border {font-size:10px;text-align:left;float:left;border:#808080 1px solid;padding:10px 13px 10px 13px}

.date {font-size:10px;border-bottom:1px solid #808080;margin-bottom:5px}

.just {text-align:justify}

.foot {font-size:10px;text-align:center;line-height:20px;border-top:1px solid #808080;margin-top:10px}

basically, i just let go the table and used relative positionning instead. my question is : is css positionning absolutely reliable on a cross-browser point of view :?:

I'm a perfectionist
and perfect is a skinned knee

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 7 years 28 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

look at my horrible table-based navigation menu !

Positioning should be fairly safe cross-browser, but you never know what subtle traps lie in wait for you on some obscure platform Smile

There seems to be a reasonable cross-section of browsers and operating systems in this forum, though, so when you think things are up and running, why not post it up for a full site test, and see what problems people find?

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 8 years 3 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

look at my horrible table-based navigation menu !

thanks sven ! i'll do that. Smile

I'm a perfectionist
and perfect is a skinned knee

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 8 years 3 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

look at my horrible table-based navigation menu !

okay, i'm back !

so i completely re-wrote the site using the ideas submitted above, including absolute positionning for the "sub-menu" boxes (class : sub)

please be so kind to check it out in a few browsers. with me it works in ie 6 and ns 7.

BUT i went to a cybercafé yesterday and they were using mac os x with ie for mac v5.2 i think. and it looked horrible !
www.chokebore.net/index.html : as you can see i used the vertical centering hack that was pointed by sven (i think) in one of my previous posts. works perfectly with ie and ns, but with ie for mac, the result is something like :

------------------------------------------------------
|             | img that |                           |
|             | should be|                           |
|             |vertically|                           |
|             | centered |                           |
|             ------------                           |
|             ------------------------------------   |
|                               updated 2003/06/19   |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
------------------------------------------------------

and on the www.chokebore.net/news.html page, the 3 right-floating divs are forsaken to the bottom of the page !

anyone with a mac see this ? or is it just that ie for mac v5.2 is too old (i think it's from april 2002)

I'm a perfectionist
and perfect is a skinned knee

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 8 years 3 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

look at my horrible table-based navigation menu !

florent wrote:
it works in ie 6 and ns 7.

woops !

there's a bug in the first (index) page with ns7 !!! Oups

there is more than 1px of margin between the image's bottom and the 1px horizontal line beneath it... what the ... ?

I'm a perfectionist
and perfect is a skinned knee

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 8 years 3 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

look at my horrible table-based navigation menu !

florent wrote:
on the www.chokebore.net/news.html page, the 3 right-floating divs are forsaken to the bottom of the page !

i may have found the answer to my own problem by fooling around with div widths on the news page...

i found out about a strange bug (or is it a bug ?) with ie6 and ns7 : when you have some text inside a div, part of it being written in italic, and the text wraps inside the italic part, then the div's width is boosted by a few pixels (i counted 3px in ie6 and ns7)

and if my left div gets any wider, then the floated divs to the right will be slided down below the left div...

maybe this happens to a larger extent with ie for mac ? anybody got a mac in here ?

I'm a perfectionist
and perfect is a skinned knee