Simple example of using CSS positioning instead of tables
Jukka K. Korpela
instead of tables for layout. I've been looking for a
_simple_ example, but with no luck, so I decided to try and
design one. But would this really be a _good_ example:
Suppose you would like to have a set of site navigation links
on the left. A very simple idea, which could be implemented using
a two-cell table. But the CSS approach has several benefits,
including the fact that it can be made to degrade gracefully
to purely linear presentation when CSS support is switched off.
And it could be done so that then the nav links are _after_
the content proper, which is often desirable. (E.g., blind
users don't like to hear all the links first every time they
move from a page to another within a site.)
The simple idea is to make the document body consist of two <div>
elements, one of which contains the content proper and the other
contains the nav links. Then I use CSS to make latter <div> take
some specific width, using font size as unit, and using a suitable
value corresponding to the widths of the links. And the <div> that
has the content proper is absolutely positioned so that it will
appear to the right of the nav links.
This means something like the following (omitting link markup for
simplicity, but with some tuning of the list element presentation
to make it compact):
<style type="text/css"><!--
#nav { width:5em; border: solid 0.1em #060; padding:0.3em; }
#content { position: absolute; top: 1em; left: 7em; }
#nav hr { display: none; }
#nav ul { margin: 0 0 0 1em; padding: 0; }
#nav li { margin: 0; padding: 0; }
--></style>
<div id="content">
<p>Lorum ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laroreet.</p>
<p>Multi sunt, qui ad id, quod non proposuerant scribere,
malicuius verbi placentis decore vocentur.</p>
</div>
<div id="nav">
<hr>Site index:
<ul>
<li>foo
<li>bar
<li>zap
</ul>
</div>
There's a demo at http://www.cs.tut.fi/~jkorpela/styles/layout.html
Questions:
1. Is this correct use of CSS, in principle and practically?
2. Is it useful?
3. Is it simple enough to convince the reader that CSS can actually
be used for simple layout?
4. Could it be made even simpler, without making the answer to
1, 2, or 3 negative?
Of course, to really work as a suggestive example, it would need some
explanations, e.g. what the CSS rules means, how to find info on how
they can modified, why padding properties are used here etc.
(I'd hate to remove the <hr> which is turned off in CSS but which
creates a useful divider when CSS is off.)
PeterMcC
"Jukka K. Korpela" <jkor...@cs.tut.fi> wrote in message
news:e2a0930a.02032...@posting.google.com...
Thanks for the example.
Sorry to raise a question rather than answer one of those that you've
already got.
I'm re-doing a site using CSS and ems instead of tables and px (and
hoping to feel virtuous as a result ) and I've used the template from
BlueRobot http://bluerobot.com/web/layouts/layout1.html.
As I know even less about IDs than I do about classes, I gave classes
to the divs rather than IDs. Have I done a bad thing? I've also,
incidentally, changed the px to ems.
And, having looked back at the questions again, I can give you a
couple of brief answers:
> 2. Is it useful?
Yes - and it's very good of you to take the trouble to put it there.
> 3. Is it simple enough to convince the reader that CSS can actually
> be used for simple layout?
It ought to be - the similar example at BlueRobot convinced me, though
that may not be much of a recommendation :)
--
PeterMcC
Kae Verens
> #content { position: absolute; top: 1em; left: 7em; }
> #nav hr { display: none; }
> #nav ul { margin: 0 0 0 1em; padding: 0; }
> #nav li { margin: 0; padding: 0; }
> --></style>
> <div id="nav">
> <hr>Site index:
> <ul>
> <li>foo
> <li>bar
> <li>zap
> </ul>
> </div>
> Questions:
> 1. Is this correct use of CSS, in principle and practically?
> 2. Is it useful?
> 3. Is it simple enough to convince the reader that CSS can actually
> be used for simple layout?
> 4. Could it be made even simpler, without making the answer to
> 1, 2, or 3 negative?
> (I'd hate to remove the <hr> which is turned off in CSS but which
> creates a useful divider when CSS is off.)
I would add a display:block to the nav definition so you could simply place
links in there without needing to apply line-breaking elements to separate
them.
#nav a { display:block; }
<div id="nav">
<hr />Site index:
<a href="foo.html">foo</a>.
<a href="bar.html">bar</a>.
<a href="zap.html">zap</a>.
</div>
The '.'s are added to comply with a WAI suggestion not to follow a link with
a link. The above degrades to a horizontal line of links in non CSS
browsers.
Nice idea with the <hr>, by the way.
Kae
Rijk van Geijtenbeek
wrote:
>Rather often people ask how one could use CSS positioning
>instead of tables for layout. I've been looking for a
>_simple_ example, but with no luck, so I decided to try and
>design one.
[..]
>There's a demo at http://www.cs.tut.fi/~jkorpela/styles/layout.html
>
>Questions:
>1. Is this correct use of CSS, in principle and practically?
Yes. But everything besides the navigation bar has to go in the
'content' div. If you want to put a separate footer beneath the content
over the full length of the page, you're in trouble with this approach.
>2. Is it useful?
Yes.
>3. Is it simple enough to convince the reader that CSS can actually
> be used for simple layout?
Yes. That's the main virtue of this example above the Glish example
mentioned by PeterMcC.
>4. Could it be made even simpler, without making the answer to
> 1, 2, or 3 negative?
The styles for the navigation list could be dropped.
>Of course, to really work as a suggestive example, it would need some
>explanations, e.g. what the CSS rules means, how to find info on how
>they can modified, why padding properties are used here etc.
>
>(I'd hate to remove the <hr> which is turned off in CSS but which
>creates a useful divider when CSS is off.)
Browser compatibility:
It doesn't 'work' properly in browsers that support only CSS1 and no
CSS positioning (aka Opera 3.5-3.62) The fall back is readable enough.
To overcome this, you could use floating instead of absolute
positioning, like http://www.alistapart.com/ does. But to get that to
work properly, things like the Tantek hack etc are needed, introducing
the complexity you seek to avoid.
Display oddities:
- In Netscape 4.7, the left margin for the UL element gets added to the
default margins.
- In Mozilla .9.9, the first P element starts a bit low, in comparison
with Opera and MSIE. Undoubtedly because of different UA styles.
Maybe you could mention these issues, or even give a little explanation
on how to overcome them. A rule like
#content p:first-child {margin-top: 0;}
would help Mozilla. A solution for Netscape would require hacks to hide
styles for this browser, a link to Koch's page on this might be useful.
--
.. if you're not going to do anything more | Rijk van Geijtenbeek
exciting in XHTML than you were doing in | mailto:ri...@iname.com
HTML, it's hard to explain why it would be | http://rijk.op.het.net
productive to change. (Alan Flavell)
Ben M
> instead of tables for layout. I've been looking for a
> _simple_ example, but with no luck, so I decided to try and
> design one. But would this really be a _good_ example:
Snipped the example
> Questions:
> 1. Is this correct use of CSS, in principle and practically?
I think so.
> 2. Is it useful?
To a CSS beginner (which is the target audience) certainly.
> 3. Is it simple enough to convince the reader that CSS can actually
> be used for simple layout?
Yes.
> 4. Could it be made even simpler, without making the answer to
> 1, 2, or 3 negative?
The only suggestion I have is to perhaps use % values for the widths and
positioning etc rather than ems, the reason behind this is that it will be
more familiar to people who have laid out pages using tables before. I also
think %'s are conceptually simpler (not that ems are particularly hard or
anything), the focus of the example is to demonstrate simple CSS layout
rather than get into a discussion of what an em unit is.
regards,
Ben Meadowcroft
http://www.benmeadowcroft.com
PeterMcC
"Tina Holmboe" <ti...@cubitus.andreasen.se> wrote in message
news:mllo8.27913$n4.54...@newsc.telia.net...
<snipped examples - sorry if over done. Summary: discussion and
examples of a simple CSS layout using two divs>
I notice that in all the examples of <div> used in this thread, IDs
have been used rather than classes. My understanding is that, where
there's a choice, class is to be prefered over ID - is there a
particular reason for their use with <div>? Or is there a particular
flaw in my understanding?
--
PeterMcC
Darin McGrew
"Jukka K. Korpela" <jkor...@cs.tut.fi> wrote:
>> 4. Could it be made even simpler, without making the answer to
>> 1, 2, or 3 negative?
Ben M <cee....@virgin.net> wrote:
> The only suggestion I have is to perhaps use % values for the widths and
> positioning etc rather than ems, the reason behind this is that it will be
> more familiar to people who have laid out pages using tables before. I also
> think %'s are conceptually simpler (not that ems are particularly hard or
> anything), the focus of the example is to demonstrate simple CSS layout
> rather than get into a discussion of what an em unit is.
I like the use of ems. It shows that CSS layout can be based on (and thus,
can adapt to) the size of the user's font. It isn't that complex a concept
that it should cause problems for those migrating from table-based layout
to CSS-based layout.
--
Darin McGrew, mcg...@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da...@htmlhelp.com, http://www.HTMLHelp.com/
The Rallye Club, da...@ncscc.org, http://www.TheRallyeClub.org/
Upcoming Car Rallye: "Rallyemaster Down" (Saturday, April 6)
Thomas Lotze
> And the <div> that
> has the content proper is absolutely positioned so that it will
> appear to the right of the nav links.
What happens if there's something very wide inside the content proper, an
image or a complex table for instance?
Reason for asking is, I did such a navigation-left-content-right layout
for my own homepage, and when I experimented with several ways to achieve
it, I found that certain things like floats or absolute and relative
positioning prevent some browsers from applying appropriate scrollbars.
Sorry for not being more specific; I don't really remember which browser
got wrong what.
The quintessence of it was to put content proper only in such elements
that don't get too fancy CSS applied. What I do now is
- put the content proper inside a div with a wide left padding
- put the menu inside a div slightly narrower than that padding
- put both inside a third div with no padding, the content div first with
no special positioning and the menu div positioned absolutely at the left
- put an <hr> between them and switch it off by CSS, just as you do.
I could have positioned the menu inside the padded div itself, but IE6
will get this wrong (positioning it wrt the content edge instead of the
padding edge as the spec prescribes).
Cheers, Thomas
--
Thomas Lotze
thomas.lotze at gmx.net http://www.thomas-lotze.de/
Thomas Lotze
> #nav a { display:block; }
>
> <div id="nav">
> <hr />Site index:
> <a href="foo.html">foo</a>.
> <a href="bar.html">bar</a>.
> <a href="zap.html">zap</a>.
> </div>
>
> The '.'s are added to comply with a WAI suggestion not to follow a link with
> a link. The above degrades to a horizontal line of links in non CSS
> browsers.
Two thoughts:
- You could enclose the periods in spans with display:none set, so
they're out of sight when not needed. But then markup gets more complex
again, so you could just as well enclose the links in divs so they won't
be displayed in a line of CSS is off in the first place.
- You could add some top or bottom margin or padding to the links so if a
link uses more than one line, it's easy to see what belongs together.
See my homepage for an example (see sig).
Jukka K. Korpela
> I would add a display:block to the nav definition so you could simply
> place links in there without needing to apply line-breaking elements
> to separate them.
>
> #nav a { display:block; }
Making each link a block on its own? That's what I considered too, since
it would be somewhat easier than using <ul> and then tuning its
presentation. But I'd then just use <div><a ...>...</a></div>
The use of <ul> looks somewhat more natural, though.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Arjun Ray
ti...@cubitus.andreasen.se (Tina Holmboe) wrote:
| "PeterMcC" <pe...@mccourt.org.uk> exclaimed in <0Omo8.8973$51.300227@wards>:
|> My understanding is that, where there's a choice, class is to be
|> prefered over ID - is there a particular reason for their use with
|> <div>?
I think it was for demonstration purposes.
| [...] ID gives the element a document-wide unique identification string.
| This can then be used for quite a few things where explicit adressing of
| one and ONLY one element is needed.
Yes, but it's also important to remember that the uniqueness is document
wide only. An ID is not a globally unique identifier, and is inherently
not "reusable". In general, ID selectors should not be used in external
stylesheets, only in <style> elements.
(Let's not discuss browser bug workarounds.)
George Lund
<ar...@nmds.com.invalid> writes
>Yes, but it's also important to remember that the uniqueness is document
>wide only. An ID is not a globally unique identifier, and is inherently
>not "reusable". In general, ID selectors should not be used in external
>stylesheets, only in <style> elements.
Isn't useful to be able to refer to a document element that may be
common to many pages but is allowed only once within each? Like a
navigation bar, or a menu, or similar - class could be used but in some
cases the element might be the target of a link too.
--
George Lund
Alan J. Flavell
> I like the use of ems.
So do I; but I dislike authors who, even though they have espoused the
em unit, WILL assume that my default font size is larger than I wanted
it to be, and insist on setting their body text to 0.8em or less.
(Perhaps other browsers might take a leaf out of Opera's book, and
provide the reader with a minimum font size setting, below which the
author's silly demands would get ignored).
cheers
Sander Tekelenburg
Hash: SHA1
In article <e2a0930a.02032...@posting.google.com>,
jkor...@cs.tut.fi (Jukka K. Korpela) wrote:
> Rather often people ask how one could use CSS positioning instead of
> tables for layout. I've been looking for a _simple_ example, but with
> no luck
I did a small site like that once. See <http://henkhaverhoek.nl>. (The
main difference from your approach being that I used float to position
things.)
What I like about this sort of approach is that it helps keep the HTML
simple. You can just quickly mark up your content and be done with it.
The only 'ugliness' is the odd DIV that you really only need for the
CSS.
I think that, if you are going to publish an example, you should point
out this advantage: very clean HTML - easy to write and to maintain.
At <http://henkhaverhoek.nl> I made things a bit more ugly, and in that
sense it probably is not the best example for your cause. By using some
SPANs to make it possible to hide certain things (hide HR, like you
did), and to make it possible to convert some things into different
things: the menu is structured thusly:
<span class="link">link</span><span class="hide"> | </span><span class
= "link">link</span><span class ="hide> | </span><span
class="link">link</span>
Ugly HTML, but it makes it possible to use CSS to hide some
presentational characters (" | "), and to present each link as a list
item.
To avoid problems with Communicator/IE3, I just hid all CSS from them
using @import. The only remaining 'problems' I am aware of is that some
browsers don't deal well with the background image in the 'content
area', and that Mac IE 5 insists on displaying a horizontal scrollbar
no matter what. iCab doesn't deal with it too well of course - I really
wish they'd disable their CSS by default until they've got it working.
OmniWeb just screws up completely, but then, its users seem to care
mostly about its interface, so... ;)
Considering the SPAN-ugliness this may not be the sort of thing you
would want to use when you want to set up a simple example for
first-timers. But conceptually, and as a working example, it seems to
me like what you are looking for.
[Note that, against my wishes, the owner of the site insisted that I
defined colours in HTML, to 'support' Communicator... That would
probably be improper for the example you're building ;)]
[...]
> And it could be done so that then the nav links are _after_ the
> content proper, which is often desirable.
Exactly! The number of improperely marked up CSS-dependant sites[*] is
getting too large. There is no good reason for a site to be presented
poorly just because the visitor doesn't allow author CSS.
This is a good example of how the key to good CSS is proper use of
HTML. That's where it starts. And in that sense, I fear that, no matter
how good your example will work, may w3bd335ign3rz will not get it.
> (E.g., blind users don't like to hear all the links first every time
> they move from a page to another within a site.)
As a seeing user I don't care much for navigation links at the top
either. When I go to a page, I go there for its content, not to go to
another page... Content should be as early at the top as possible.
[...]
> Questions: [...] 3. Is it simple enough to convince the reader that
> CSS can actually
> be used for simple layout?
Yes, but it won't convince them of the need to write proper HTML. I
don't know what would though...
[*] Stuff like <http://SkyandTelescope.com/>.
-----BEGIN PGP SIGNATURE-----
Version: PGPfreeware 7.0.3 for non-commercial use <http://www.pgp.com>
iQA/AwUBPKJnhusywKfXgqKdEQKzyQCg+omfEvxpKq7L0PdX1tLD5VWDZGEAoJsa
rEDcUOzN8ICwPMjdD8/C7iLe
=41uF
-----END PGP SIGNATURE-----
--
Free- and shareware at <http://www.euronet.nl/%7Etekelenb/software/>
Henri Sivonen
<Pine.LNX.4.40.020327...@lxplus033.cern.ch>,
"Alan J. Flavell" <fla...@mail.cern.ch> wrote:
> (Perhaps other browsers might take a leaf out of Opera's book, and
> provide the reader with a minimum font size setting, below which the
> author's silly demands would get ignored).
Mozilla and Konqueror also have such a setting.
--
Henri Sivonen
hsiv...@niksula.hut.fi
http://www.hut.fi/u/hsivonen/
Jan Roland Eriksson
wrote:
[...]
>In general, ID selectors should not be used in external
>stylesheets, only in <style> elements.
And a <STYLE> element should never have been invented in the first
place, same goes for a <SCRIPT> element of course.
>(Let's not discuss browser bug workarounds.)
Ok; but you need neither of a <STYLE> element or inline styling to
make the current fad of ad hoc CSS tricks to "work".
It can all be done through <LINK... only :)
--
Rex .. <r...@css.nu> .. <http://css.nu/>
Lauri Raittila
<ri...@iname.com> wrote:
>To overcome this, you could use floating instead of absolute
>positioning, like http://www.alistapart.com/ does. But to get that to
>work properly, things like the Tantek hack etc are needed, introducing
>the complexity you seek to avoid.
The problem with float is that you must but it in the beginning of
the document and that way you lose one advantage. That's why I only
use it for Table of contents on my site that's still on beta testing
(http://members.surfeu.fi/zwak/new/cv.html - only in Finnish)
It seems that even Netscape 4(.68) understands absolute positioning
when it is simple enaugh.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Andrew McFarland
wrote:
<snip/>
>There's a demo at http://www.cs.tut.fi/~jkorpela/styles/layout.html
<snip/>
I've been working on something similar at
http://http://aamcf.co.uk/temp/div
Mozilla users can use the alternative stylesheet to view it with a
frames style layout too (the LHS remains fixed on screen)
Andrew
--
http://aamcf.co.uk/
Stan Brown
comp.infosystems.www.authoring.stylesheets:
>Suppose you would like to have a set of site navigation links
>on the left. A very simple idea, which could be implemented using
>a two-cell table. But the CSS approach has several benefits,
>including the fact that it can be made to degrade gracefully
>to purely linear presentation when CSS support is switched off.
>And it could be done so that then the nav links are _after_
>the content proper, which is often desirable. (E.g., blind
>users don't like to hear all the links first every time they
>move from a page to another within a site.)
Thanks so much for providing this example. I've downloaded it and
will play around with some variations.
One suggestion: put considerably more text there, maybe just
repeating the existing paragraphs half a dozen times. That will show
more clearly that the width of the nav menu is reserved for the
entire length of the page.
(A project for myself is to see if I can make the page text wrap
under the nav box, rather than preserve the width of the box as
empty space all down the page.)
One thing that would be very helpful to me: can you make it work
also in Netscape 4.x? I have Netscape 4.5, and the nav box is about
twice as wide as in Opera 6.01; bulleted links are horizontally
centered in NS4 and left justified in Opera. Worst of all, in NS4
the content div overlaps the nav div: the first character of each
content line is inside the box.
--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://oakroadsystems.com
My reply address is correct as is. The courtesy of providing a correct
reply address is more important to me than time spent deleting spam.
Stan Brown
comp.infosystems.www.authoring.stylesheets:
>Exactly! The number of improperely marked up CSS-dependant sites[*] is
>getting too large.
>
I'll say. It displays fairly fast in NS4 with JS turned off (though
I have to scroll waaaaaaaaaay down to get to the content), but it
totally stalls out Opera 6.01.
Berislav Lopac
news:MPG.170e4814c...@news.odyssey.net...
> (A project for myself is to see if I can make the page text wrap
> under the nav box, rather than preserve the width of the box as
> empty space all down the page.)
Sure you can. Just use float:left;
Arjun Ray
<G.A....@warwick.ac.uk> wrote:
| In message <ck84aus61kcpukf86...@4ax.com>, Arjun Ray
| <ar...@nmds.com.invalid> writes
|> An ID is not a globally unique identifier, and is inherently not
|> "reusable". In general, ID selectors should not be used in external
|> stylesheets, only in <style> elements.
|
| Isn't [it] useful to be able to refer to a document element that may
| be common to many pages but is allowed only once within each?
Isn't "common" == "resuable" here?;-)
| Like a navigation bar, or a menu, or similar - class could be used
Isn't a (sub)class the natural usage here, given that any example you
can come up with has a (taxonomic) *description*?
| but in some cases the element might be the target of a link too.
That's for addressing, not typing.
Jukka K. Korpela
> There's a demo at http://www.cs.tut.fi/~jkorpela/styles/layout.html
Thanks to all who participated in the most interesting discussion that
arose. I have now changed the page in the above address to a document
that, in addition to illustrating the technique, explains it a bit and
reviews the discussion.
I realized, in particular, that drawing a border around the navigational
block will easily trigger Netscape 4.x bugs. This was too confusing, so I
changed the example use just background color to make the navigational
area somewhat different from content proper in appearance.
--
Yucca, http://www.cs.tut.fi/~jkorpela/