I have happily lived for 15 years (our first web server started in 1993)
without CSS, but I now decided to learn and experiment with it.
My personal preference has always been that the width of items in my
pages are USUALLY not set in fixed values, but as percentages (e.g. for
frames in frameset, or tables w.r.t the display area), since a priori I
cannot know what screen or window size users will use, and the browser
window can be arbitrarily resized in the horizontal direction, ideally
with no horizontal scrollbar unless really needed. Similarly I do not
use absolute font names or sizes (otherwise said I care for content and
logical layout but not for a precise look being the same everywhere).
Some of my colleagues however have written pages which define pages with
fixed fonts, or a fixed width. Unfortunately if the window is not wide
enough, one has to scroll horizontally.
I hoped one could cure that, and apparently one can do something on a
simple (single column) document with something like :
body {width: 20cm; max-width: 80%;}
(on a larger window the document has a fixed size and the part at the
right is unused, as now; if one resizes the window smaller, however the
document is always contained in the window, and no horizontal scroll bar
is required)
I then tried to develop a frameless frame-like appearance.
body {width: 100%; }
#myhead {position: fixed ; top: 0 ; left: 0; right:0; bottom: auto;
width: 100%; height: 4.5em; background: white; z-index: 1}
#main {position: absolute: top: 4.5em ; left: auto; right: auto;
bottom: auto; height: auto; width: 76%; margin: 2%; z-index: 0}
#sub {position: fixed ; top: 4.5em ; right: 0; bottom: 0 ; left: auto;
width: 18%; background: aqua; margin: 0 1%; zindex: 1}
Using appropriate DIVs there is a title area on the top, occupying the
entire width (myhead), a navigation area on the right (sub), and the
document goes in the main area (with vertical scroll bars scrolling it
only). I can resize the window horizontally and everything remains
visible.
<div id=myhead>space for a fixed page title</div>
<div id=main ... the bulk of the page </div>
<div id=sub ... the navigation area </div>
+---------------------------------+
| myhead |
+---------------------------------+
| | *|
| main | sub *|
| | *|
+---------------------------------+
So far so good (except that the "sub" area is not aligned flush right,
but has some 10 pixels to its right. Why ?). That's how *I* like it.
Now what if I want to combine the two things ? I.e. do as my colleagues
like. I.e. use body {width: 20cm; max-width: 80%;} and the myhead, main
and sub classes ?
I'd expect to produce an overall area which is normally 20 cm wide with
unused space on the right, or 80% of the window if resized smaller, and
that this overall area is divided into three parts as in the drawing
above (is not "body" the container of everything ?)
Instead it looks like ONLY the "main" area is rescaled to the smaller
width, and the other two still make reference to the window width.
What am I doing wrong ?
--
----------------------------------------------------------------------
no****@mi.iasf. cnr.it is a newsreading account used by more persons to
avoid unwanted spam. Any mail returning to this address will be rejected.
Users can disclose their e-mail address in the article if they wish so.
