httpd-docs mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Michael.Schro...@telekurs.de
Subject Antwort: Re: New draft of manual style
Date Thu, 29 Aug 2002 08:39:08 GMT

Hi Yoshiki and Joshua,


> As Michael pointed out, it can be done with only css.
> If implementing it doesn't end up in complex html and css,
> I'd like to see it done.  Module docs looks much better if
> directives is listed on side-menu.

it would rather tend to result in cleaner HTML code.

If you want to simulate the <table> style layout with
CSS only (which was exactly what I did with my pages,
they had the <table> layout before I learned how to
do it with CSS alone), then just imagine you already
did it with the table model, but then replace each
table column with a <div> that will be "positioned
absolutely and fixed" with CSS (one CSS definition
for each 'div#id').

You then have the document content and the navigation
cleanly separated in two <div> tags with ids like
<div id="navigation"> and <div id="content">, and
because they are positioned via CSS and not via
their order inside the HTML 'tag stream' you are
free to use any order you like.
You can have the navigation on top of the file or on
the bottom - the rendering position will be determined
by the CSS code only. (That is, as long as the client
does understand CSS, which fortunately even includes
Netscape 4 here; if not, then the two <div> are just
displayed in the order they appear in the HTML file.)

And you can change the display arrangement by simply
editing the CSS definition, you would not have to
touch the HTML code at all!
Now add this to the abilitiy to provide alternative
style sheets (which Kess likes so much), then you can
even have different layout models for the navigation
and let the reader select the one he likes most ...



The CSS code for my gzip_cnc pages
     http://www.schroepl.net/projekte/gzip_cnc/
related to this navigation layout is the following:

/* give <div id="content"> an absolute position and
   a variable column width */
#content{position:absolute;left:220px;right:30px;}
/* give <div id="nav"> an absolute position and
   a fixed column width (plus some display stuff) */
#nav{
position:absolute;top:30px;left:0px;width:170px;
font-size:14px;font-weight:bold;margin:2px 2px 2px 30px;
}
/* make <div class="nav"> be positioned 'fixed',
   i. e. let it be scrolled together with the content,
   but hide this from M$IE who doesn't handle it correctly
   but will ignore everything that uses the [] selector */
#nav[id]{position:fixed;}
/* formatting for links and lines inside the navigation */
#nav a{color:#00c;background-color:transparent;text-decoration:none;}
#nav p, #nav a:hover{color:#000;background-color:#fff;}
/* make links inside navigation hover over the full
   width of the <div> column => "display:block" */
#nav p, #nav a:hover, #nav a{
display:block;padding:3px;margin:2px;width:150px;font-size:15px;line-height
:18px;}


Would you consider this stuff to be maintainable?


Regards, Michael



---------------------------------------------------------------------
To unsubscribe, e-mail: docs-unsubscribe@httpd.apache.org
For additional commands, e-mail: docs-help@httpd.apache.org


Mime
View raw message