Re: Style problem (DIV sizing)

[dorayme]

In article <gfq3no$r1d$1@o xygen.pond.sub. org>,
hu47121+nospam@ usenet.kitty.su b.org (Hannah) wrote:

Hi!
>
On this page:

http://www.lifesong.de/veranstaltungen.html

firefox 2 shows the page (especially the boxes) as I want them to
display (let the width scale according to viewport size, let the
"background " image scale accordingly, let the text wrap freely and the
height adjust).
>

Surely you don't really want this to look like this in FF or any browser:

<http://dorayme.890m.co m/pics/unhappyscrollba rs.png>

There is so little point in scrollbars coming up for a not very wide
left side menu. A sign that the design is wrong.

And there are other things wrong. First, validate your HTML and CSS at

<http://validator.w3.or g/>

and

<http://jigsaw.w3.org/>

However, ....

--
dorayme

[dorayme]

Re: Style problem (DIV sizing)

In article <gfqa03$6gs$1@o xygen.pond.sub. org>,
hu47121+nospam@ usenet.kitty.su b.org (Hannah) wrote:

Hi!
>
dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article <gfq3no$r1d$1@o xygen.pond.sub. org>,
hu47121+nospam@ usenet.kitty.su b.org (Hannah) wrote:

>

On this page:

http://www.lifesong.de/veranstaltungen.html

firefox 2 shows the page (especially the boxes) as I want them to
display ...

>

Surely you don't really want this to look like this in FF or any browser:

>

<http://dorayme.890m.co m/pics/unhappyscrollba rs.png>

>

There is so little point in scrollbars coming up for a not very wide
left side menu. A sign that the design is wrong.

>
You're right in principle. How to fix that?
>

Well done fixing the validation errors. How to fix the scrollbars? Well,
I would simplify some things. Can't see the need for your navigation
div? Lets drop it and apply some of your styles direct to ul at least
and make a few changes to be more compact and with an eye on fixing the
ugly overlap problem we have been noticing:

First I strongly recommend:

body {font-size: 100%;}

Don't mess about at this top level with anything else.

And then perhaps:

ul.navigation {
margin: 1% 0 0 0;
padding: 0 0 0 1%;
width: 10em;
position: fixed;
list-style: none;
color: #0000E0;
}

span.navigation current { color: #000000; }
span.impressumc urrent { color: #000000;}
ul.navigation a:link { color: #0000E0; }
ul.navigation a:visited { color: #0020E0; }

and a small change to your .main:

div.main {
position: absolute;
text-align: left;
left: 12em;
top: 0pt;
}


I would be wary of using "Fantasy" as backup, using less than 100% for
body font-size, using such big fonts so spread out. Tighten up your
margins and padding. People have all sors of screens, including small.
There is so much unnecessary scrolling, even of the normally acceptable
vertical kind!

Just some thoughts for you.

When testing more, I see that there's even more wrong (if the viewport
is even more narrow so the right part has to be scrolled, the text
scrolls "into" the left part!).

See above. The design works nicer for changes along those lines. Others
would code quite differently but I see what you are doing and it is
quite interesting...

--
dorayme