vertical aligning some <div>'s

[Chris F.A. Johnson]

On 2008-09-21, Lanmind wrote:
....

Wow I don't understand why it would look like those images. I've
previewed my site at 800x600 and it looks fine. Is that how a Mac set
at 800x592 displays it? (?Mac's equivalent of 800x600?)

The window size is immaterial. It's the font size that makes the
difference.

485x610, really? I don't think anybody would use that. I'm just trying
to fill every possible user display my site might encounter by making
the layout 100% height and width. Is this a bad idea? This idea of a
layout?

Don't design for any particular width, then you will make everyone
happy.

 

[Lanmind]

Wow I don't understand why it would look like those images. I've
previewed my site at 800x600 and it looks fine. Is that how a Mac set
at 800x592 displays it? (?Mac's equivalent of 800x600?)

What dorayme sees is also what I see. It's because of your font sizes.

You have specified font-size 63em; This is, of course, less than two thirds
the size of our favourite font size. The text looks like fly droppings.

So, what to do? Up our *user* font size of course, by several notches. Then
your carefully layed out design falls apart.

Try it for yourself. Just lean on the Ctrl button and spin your mouse wheel
a bit.

BTW if you think the font is too large *on your system* then by all means
reduce your user font size *on your system*. It's bad news if you try to
enforce your preferences on *our systems*. We *will* take offence, we
*wiill* increase our user font size, and break your site.

Thanks : ) What is your fav font size? .75em? .81em?

 

[rf]

"Lanmind" <[email protected]> wrote in message

Thanks : ) What is your fav font size? .75em? .81em?

Precicely what I have set my browsers default size to be, and this
corresponds to exactly 1em.

So you don't need to specify font size at all.

 

[dorayme]

Precicely what I have set my browsers default size to be, and this
corresponds to exactly 1em.

So you don't need to specify font size at all.

Perhaps OP would care to start by looking at:

<http://css-discuss.incutio.com/?page=FontSize>

and following the leads.

 

[rf]

Perhaps OP would care to start by looking at:

<http://css-discuss.incutio.com/?page=FontSize>

While that article attempt to present all sides it defeats its own purpose
by specifying font-size: small in its own CSS, hardly an un-biased thing to
do. Foot, self, shoot, methinks

 

[dorayme]

While that article attempt to present all sides it defeats its own purpose
by specifying font-size: small in its own CSS, hardly an un-biased thing to
do. Foot, self, shoot, methinks

Now that you mention it, I notice in FF just now, not in Safari earlier
which I have set a bit different to combat this sort of nonsense.

Still, you need to be careful jumping to conclusions. Perhaps you know
things I don't about the web page in relation to the author(s) of the
discussion there. Perhaps the authors of the wise advice are not
responsible for that rather bold declaration of idiocy:

body {font-size: small;}

 

[Roy A.]

[...]

Let the content flow. When you're setting height on an element, e.g.
your #header and your #top_wrap, you're designing for your own
resolution and default font size.

In other browsers with different settings, the content could easily
overflow the element, and make it disappear behind the next element.

When you're using 'position: absolute', the element is taken out of
the normal flow, and won't occupy any space. Which also might lead to
overlapping elements.

To get your element centered you could use "position: relative; top:
10%", but I don't think that is wise. You don't know how much space
the content of the #side_bar and the #directions element is going to
occupy (not in percent anyway).

"The offset is a percentage of the containing block's width (for
'left' or 'right') or height (for 'top' and 'bottom').
"http://www.w3.org/TR/CSS21/visuren.html#propdef-top

If you don't want to use a table, I think you would have to rethink
your design. Maybe using em's instead of percentages.
If you don't want to use a table, I think you would have to rethink
your design. Maybe using em's instead of percentages.

I wouldn't know how. Aren't fonts different percentages of different
display sizes

Em is an relative unit, yes.

and in turn would cause a less than uniform design
across many user's displays?

It depends on what you're trying to achieve, there is many ways to get
a sense of uniformity.

Like on my wife's laptop she has a 17" 16:9 high resolution screen and
a simple character like the letter "H" would be a much smaller
percentage of her total screen size than my 15" 4:3 ?1096x764? screen.

It depends on her and your settings.

If I set a <div> to say 15em on my screen it'd look fine but on hers
I think it would be smaller leading to an undesired layout for the
document. Am I wrong : ) ?

If what you think is right, it would be smaller on her screen. And
that might be an undesired layout. You could use 'width: auto',
couldn't you?

What are you doing with the spacer1 div? The height of the header is
3.8% and the height of the spacer1 div is 5.25%. Isn't that 9.05%
together? Couldn't you set that height on the header div, and get rid
of the spacer1 div?

What happens if you change the 'height' of header, spacer1, top_wrap,
side_bar and directions to 'min-height'?

The side_bar and directions divs contains text. You could alt least
make sure there is room for some text, e.g. 15em. What happens if you
set min-width to 15em on the side_bar and the directions divs?


BTW: I liked your spacer2 div, well it works anyway.

 

[rf]

Now that you mention it, I notice in FF just now, not in Safari earlier
which I have set a bit different to combat this sort of nonsense.

Still, you need to be careful jumping to conclusions. Perhaps you know
things I don't about the web page in relation to the author(s) of the
discussion there. Perhaps the authors of the wise advice are not
responsible for that rather bold declaration of idiocy:

Er, perhaps. I get the feeling though that the whole thing is rather dated.
The page in question has an update timestamp of almost a year ago. Plus
many of the "leads" are much older, 2002 and before. A lot has happened
since then. These days one would simply replace

[changing font size]
"The basic answer is that you use the font-size property." with "The basic
answer is that you don't." Then the rest of the article becomes redundant.

A telling point is that the page in question is part of a WIKI so is
therefore not authoritive at all IMHO. Who exactly was the author?


It bears repeating: The browser does a very good job at laying out a web
page to fill the entire canvas, using the viewers choices with regard to
font size, canvas size etc. Web drezigners jump through all sorts of hoops
to stop the browser doing this and then apply "artistic licence" to make the
actual information as hard to find as possible

By way of example a client is building a new site. She makes cakes. What
should she put on her site? Pictures of cakes of course. Do we give a damn
about how the viewers browser organizes those pictures? Do we care about the
font size? Nope. We are selling cakes, not some drezigners ideas about how a
cake site should look on some browser over which we have, or should have,
not much control.

BTW the cakes are very un-ordinary, or is that extra-ordinary. She has way
too much time on her hands:
http://sweetstories.com.au//gallery.html

body {font-size: small;}

Why try to obfuscate things by using the rather obscure small value. Why not
just state up front: viewer be damned, I'm using font-size: .8em;

 

[Neredbojias]

Why try to obfuscate things by using the rather obscure small value.
Why not just state up front: viewer be damned, I'm using font-size:
.8em;

Oh, give me a break! Usually I agree with you, but assigning culpability
to the use of "small" over ".8em" for font-size is totally puerile.

 

[Chris F.A. Johnson]

On 2008-09-21, rf wrote:
....

By way of example a client is building a new site. She makes cakes. What
should she put on her site? Pictures of cakes of course. Do we give a damn
about how the viewers browser organizes those pictures? Do we care about the
font size? Nope. We are selling cakes, not some drezigners ideas about how a
cake site should look on some browser over which we have, or should have,
not much control.

BTW the cakes are very un-ordinary, or is that extra-ordinary. She has way
too much time on her hands:
http://sweetstories.com.au//gallery.html

I have some problems with the site:

1. The enlarged pictures are very slow to appear.

2. <http://cfaj.freeshell.org/testing/sweetstories.jpg>

3. The colours are rather anaemic.

(Though it looks promising overall.)

 

[dorayme]

Still, you need to be careful jumping to conclusions. Perhaps you know
things I don't about the web page in relation to the author(s) of the
discussion there. Perhaps the authors of the wise advice are not
responsible for that rather bold declaration of idiocy:

Er, perhaps. I get the feeling though that the whole thing is rather dated.
The page in question has an update timestamp of almost a year ago. Plus
many of the "leads" are much older, 2002 and before. A lot has happened
since then. These days one would simply replace

[changing font size]
"The basic answer is that you use the font-size property." with "The basic
answer is that you don't." Then the rest of the article becomes redundant.[/QUOTE]

I grabbed the url quick from Google and you are right, there are better,
it was probably too hopeful that OP would come to the better by
following leads...

About font-size, I keep forgetting good urls, and my bookmarks need a
day's work to clean up. If someone would pay me to do it I would jump to
it. I am too mean to pay myself, especially as I would be wanting a lot
for the job and I could not afford it.

Beauregard made one:

<http://tekrider.net/html/fontsize.php>

In my own practice I *mostly* use two sizes. 1em for body content and
..85em for anything I want smaller and that is not all that much,
footers, navigation where it suits. Such a simple system avoids a lot of
trouble.

As for headings, yes, I often do not quite want the various and varying
defaults and as often as not will set these once in a main css sheet.