fss layout and wrapping tabs
Laurel Williams
laurel.williams at utoronto.ca
Tue Mar 3 16:05:15 UTC 2009
Hi all but especially Jacob,
Below is the code for a web page with a snippet of html I took from the
fss layout examples. The snippet shows how to create a tabbed menu and
is basically identical to what we are using on the fluidproject website.
I've altered the example slightly (included more tabs, removed centering
and widened the container to 950).
I'm struggling with how to manage the menu wrapping which occurs in
firefox 2 and safari 3 for windows when you increase the font size (in
safari using ctrl ++). About two font sizes bigger creates a wrapping
menu, where the wrapped tab is not very nicely positioned. 1) The lower
tabs are very high and encroach on the upper tab area 2) the lower tabs
wrap to center (also the menu items split on white space, but I know how
to fix that). Screen shot is attached.
My thoughts:
a) I think wrapped tabs are probably ok if they can be made to look
decent, but I'm not sure what the consensus would be amongst the other
team members.
b) alternatively can we find some way to force them not to wrap and
instead we can only access rightmost tabs using the scroll bar? How
would we do that?
c) in our website another problem is that we have a fixed size
background image that extends the menu bar left and right - this does
not change size with the fonts in firefox2 and safari 3 for windows. For
the IPhone and other narrow view ports, we may wish to remove that
background image altogether.
Do people have any thoughts, advice on this problem? I've searched long
and hard on the web, but I am finding lots of similar posted questions,
with no solutions out there.
Laurel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="fluid.reset.css" />
<link rel="stylesheet" type="text/css" href="fluid.layout.css" />
</head>
<body>
<div class="fl-container-950">
<ul class="fl-tabs">
<li class="fl-activeTab"><a href="#_bottom">Active Tab</a></li>
<li><a href="#_bottom">Tab #2</a></li>
<li><a href="#_bottom">Tab #3</a></li>
<li><a href="#_bottom">Tab #4</a></li>
<li><a href="#_bottom">Tab #5</a></li>
</ul>
<div class="fl-tab-content">
Content
</div>
</div>
</body>
</html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: safari-screen-shot.JPG
Type: image/jpeg
Size: 64065 bytes
Desc: not available
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20090303/5b065051/attachment.jpe>