3 replies [Last post]
briandgarside
Offline
Regular
Toronto
Last seen: 13 years 5 weeks ago
Toronto
Timezone: GMT-5
Joined: 2003-12-06
Posts: 20
Points: 0

Hi folks;

I've been trying to re-create the horizontal mouseover/images navigation on TSN.ca (www.tsn.ca) in CSS.

I came up with a great solution, but unfortunately it's a ridiculous hack.

Take a look at http://www.tsn.ca/darkside/css/ to see what I'm talking about.

Here's what I'm doing;

<div id="digibar"><ul><span class="left"><li class="tvsched"><a href="/broadcast/schedule.asp?Channel=TSN">TV SCHEDULE</a></li></span><span class="right"><li><a href="/">TSN</a></li><li><a href="http://www.rds.ca">RDS</a></li><li><a href="/classic/">ESPN CLASSIC CANADA</a></li><li><a href="/oln/">OUTDOOR LIFE NETWORK</a></li><li><a href="/nhl_network/">NHL NETWORK</a></li></span></ul></div>

I then use the following to put stuff on the left and right of the nav bar.

#digibar .left {float: left; padding-left: 5px; padding-top: 2px;}

#digibar .right {float: right; padding-right: 5px; padding-top: 2px;}

The span which is inside of the unordered list moves the schedule to the left, and the rest of the stuff to the right. It works in IE and Mozilla for sure, I'm not sure about Opera, and I know it won't work in Netscape 4.7

Why the re-work of the code? Already I've been able to save a significant amount of page weight, the more page weight I can save, the lower our bandwidth bill will be, and the happier my bosses will become.

Any help would be greatly appreciated.[/code]

Visit Chronicology updated (almost) daily.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 19 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Separating a horizontal list left/right without hacks

Hi briandgarside,
Can you use two UL and float one left and the other right?

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 17 years 13 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

Separating a horizontal list left/right without hacks

The first problem I see with the way you have things set up is that your code won't validate with a span tag nested inbetween a <ul> and <li>.

You could try seperating the tv schdule link out of the list with the other links since even though they are visually on the same level, structurally the tv schedule link seems to be a level deeper than the rest.

or you could try the following:

#digibar { position: relative; width: 774px; height: 22px; border: 1px solid #fff; border-right: 0px; background: #000 url(/images/elements/diginets/digibar_bg.gif); padding: 0; margin: 0; text-align: right; font: bold 10px verdana, geneva, arial, sans-serif; color: #fff;}
#digibar ul { float: right; margin: 0; padding: 0; }
#digibar ul li { display: inline; margin: 0; padding: 0; }
#digibar ul li.tvsched { position: absolute; left: 5px; }

I havn't thoroughly tested it, but it worked in safari.

briandgarside
Offline
Regular
Toronto
Last seen: 13 years 5 weeks ago
Toronto
Timezone: GMT-5
Joined: 2003-12-06
Posts: 20
Points: 0

I should have mentioned...

That the reason I wanted to fix this was because it wouldn't validate. Thanks for the class=tvsched suggestion, I'll give it a shot.

Visit Chronicology updated (almost) daily.