Currently, my website (Freelance Traveller,
http://www.freelancetraveller.com) has slightly messy CSS to give the
following appearance (view fixed font):
+------------------------+
|Header |
+----+-------------------+
|Nav |Content |
|Menu| |
| | |
| | |
| | |
| | |
| | |
+----+-------------------+
|Footer |
+------------------------+
The header and nav menu have black background; the content is an
off-white background, and the footer has a thick border-left to make it
appear as though the nav background extends to the bottom. In order to
make the design work, the content ended up with a thick margin-left and
border-left.
Right now, the nav and the borders on the content and footer are sized
in px. I was going to simply change to ems, but then I thought that it
would be a good idea to clean up the CSS _if I could_. It took me quite
a bit of work to find a _simple_ way of doing it that would extend the
shorter of the two columns (nav or content, usually nav) _without_ nasty
hacks like resetting padding and margins by thousands of pixels - or at
least something that _appeared_ to do it. The solution I found was
display: table-cell. The HTML structure is currently
<div class="masthead"></div>
<div class="nav"><div>
<div class="content"></div>
<div class="footer"></div>
Those classes COULD be converted to IDs, as there's never more than one
of each. I haven't done that yet, as there's over 1000 pages that I'd
have to do it on.
However, I use a linked style sheet, so I would just have to change the
one CSS file. The key change would be to change the nav and content divs
to "display: table-cell"; this would appear to allow me to cut out some
fiddling of margins and padding that were needed because floating the
nav (as I had been doing) took it out of the document flow.
There are some other changes that I am contemplating. However, I wanted
to try to tap the collected wisdom here before doing so. Thus, some
questions:
First, is display: table-cell a viable solution for the layout issue?
caniuse suggests that if I don't feel a need to support IE7 or earlier,
I should be OK, but caniuse doesn't always tell the whole story.
Second, does a DIV whose width is set in ems get sized based on its own
font-size, or that of its parent element? This is important, as the
nav's own font size is set to 0.75 em - so if I want it to be 15ems of
the parent font size, but it uses the smaller em size of its own
font-size, I'd have to set it to 20 ems, and the border of the footer
(which would need to remain) would need to be calculated separately as
well.
Unrelated to the structure/display issue, but something that it's been
suggested I consider:
Is there a way that I can put a link at the beginning of the page that
jumps directly to the content that would be 'visible' to "voice
browsers" for the visually impaired, but not to the general
graphical-browser user population?
--
Jeff Zeitlin, Editor
Freelance Traveller
The Electronic Fan-Supported
Traveller® Fanzine and Resource
edi...@freelancetraveller.com
http://www.freelancetraveller.com
http://freelancetraveller.downport.com/
®Traveller is a registered trademark of
Far Future Enterprises, 1977-2014. Use of
the trademark in this notice and in the
referenced materials is not intended to
infringe or devalue the trademark.
Freelance Traveller extends its thanks to the following
enterprises for hosting services:
CyberNET Web Hosting (http://www.cyberwebhosting.net)
The Traveller Downport (http://www.downport.com)
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
