How to center some text nicely between two floats

phil-news-nospam (AT) ipal (DOT) net wrote:

CSS2 has display modes
to mimic tables but this is not widely implemented

Actually, it *is* widely implemented - by the mozilla-based browsers,
Opera, and KHTML/Webkit - and has been for quite a while.

(reportedly unsupported in IE).

Not reportedly - it's a fact. This may persuade you to avoid using
display:table, but I think it depends on the project. I'd just as soon
let IE use some fallback.

--
Berg

Hendrik Maryns schrieb:

Op 23-11-08 21:59 heeft phil-news-nospam (AT) ipal (DOT) net als volgt van zich
laten horen:
Layouts using tables is "wrong" but it still works. CSS2 has display modes
to mimic tables but this is not widely implemented (reportedly unsupported
in IE). Where I find I cannot achieve the desired layout in CSS, I revert
back to the old time hack of using tables.

Hey, thanks for your input. I suppose this is something one should
complani about at w3c, isn’t it? But I can barely imagine they aren’t
aware of this deficit already.

Why do you think that complaining at _W3C_ is the appropriate thing when
implementation support in _IE_ is missing?

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Hendrik Maryns wrote:

Op 23-11-08 21:59 heeft phil-news-nospam (AT) ipal (DOT) net als volgt van zich
laten horen:

Where I find I cannot achieve the desired layout in CSS, I revert
back to the old time hack of using tables.

Hey, thanks for your input. I suppose this is something one should
complani about at w3c, isn’t it? But I can barely imagine theyaren’t
aware of this deficit already.

http://www.w3.org/Style/CSS/current-work#layout

Johannes Koch schreef:

Hendrik Maryns schrieb:
Op 23-11-08 21:59 heeft phil-news-nospam (AT) ipal (DOT) net als volgt van zich
laten horen:
Layouts using tables is "wrong" but it still works. CSS2 has display
modes
to mimic tables but this is not widely implemented (reportedly
unsupported
in IE). Where I find I cannot achieve the desired layout in CSS, I
revert
back to the old time hack of using tables.

Hey, thanks for your input. I suppose this is something one should
complani about at w3c, isn’t it? But I can barely imagine they aren’t
aware of this deficit already.

Why do you think that complaining at _W3C_ is the appropriate thing when
implementation support in _IE_ is missing?

I don’t. I suppose I misread the post and frankly, I do not care too
much about IE users. So where can I read up on this table mimicking CSS?

TIA, H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html

dorayme schreef:

In article <ggcg7k0ehe (AT) news1 (DOT) newsguy.com>, phil-news-nospam (AT) ipal (DOT) net
wrote:

On Sat, 11 Oct 2008 14:00:59 +0200 Hendrik Maryns <ialpjx302 (AT) sneakemail (DOT) com
wrote:

| I?ve had a shot at it now, but there is still one problem: if the text
| gets wrapped, the padding-top is no longer wanted. I want it to be
| *vertically centered* between the two floats. Is there really no way to
| achieve this?

You have taller things on one or the other side of something, or both, and
you want the shorter thing to be aligned vertically so the middle match up.
You can't just code some padding in a box because you don't know how tall
these things will be rendered in the browser.

I've seen quite a number of hacks on achieving this by many advocates who
(often strongly) urge people to avoid using markup tables to do layouts.
None of them work completely or correctly.

Layouts using tables is "wrong" but it still works. CSS2 has display modes
to mimic tables but this is not widely implemented (reportedly unsupported
in IE). Where I find I cannot achieve the desired layout in CSS, I revert
back to the old time hack of using tables.

Indeed. Sometimes though, where you cannot achieve what you want without
tables, it can spur you to consider whether what you want to achieve is
more worthwhile than something even better that does not have such
demanding requirements.

Just took a look at OP's site. He obviously wants to preserve an ability
for the users browser to be quite narrow. But he should consider a
min-width of 700 or 800px, not only because it eases the problem he is
facing but because narrow browser widths with this design and bigger
than average text is a fairly ugly result at the top banner...

The OP being me, I hope you can clear me up: by ‘bigger than average
text’, do you mean the slogan only, or the body text? AFAIR, I didn’t
specify a body text size (though my collaborator might have done so).

Why not bite the bullet and make the slogan (is it just a slogan?) an
image. The size of the image will be big enough to not cause
inconvenience to people liking bigger text. It is not as if it is
something anyone will be reading in a studied way.

True :-)

Something like:

div id="header"
div id="logo"><img src="bild/logo.png" alt="Logo" height="105"
width="157"></div
div id="adresse"><strong>Hier finden Sie uns:</strong><br
Aktionszentrum Arme Welt e.V.<br
Weltladen <br
Lange Gasse 64<br
72070 Tübingen<br
Tel.: 07071/23062</div
div id="slogan"><img src="bild/slogan.png" alt="Ein Stück Welt von
Morgen" height="105" width="300"></div
div id="linie-oben"
hr

and

#logo {
float: left;
}

#adresse {
float: right;
text-align: right;
}

#slogan {
font-weight: bold;
font-style: italic;
text-align: center;

}

I suppose you leave this in for the case the alt text is shown?

Thanks, H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html

Hendrik Maryns schrieb:

So where can I read up on this table mimicking CSS?

In the CSS 2.1 spec, section 17.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Johannes Koch schreef:

Hendrik Maryns schrieb:
So where can I read up on this table mimicking CSS?

In the CSS 2.1 spec, section 17.

Right. I was hoping for more of a cookbook-like page, but if nothing
helps, I’ll have to fight through that text.

H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html

In article <ggeceo$283$1 (AT) newsserv (DOT) zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02 (AT) sneakemail (DOT) com> wrote:

Johannes Koch schreef:
Hendrik Maryns schrieb:
So where can I read up on this table mimicking CSS?

In the CSS 2.1 spec, section 17.

Right. I was hoping for more of a cookbook-like page, but if nothing
helps, I’ll have to fight through that text.

I find setting up a page to play with the examples provided in the
specs a useful exercise. It also provides an opportunity to explore
the level of support amongst the browsers I'm most concerned with!

In article <gge5ni$lqe$2 (AT) newsserv (DOT) zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02 (AT) sneakemail (DOT) com> wrote:

dorayme schreef:
In article <ggcg7k0ehe (AT) news1 (DOT) newsguy.com>, phil-news-nospam (AT) ipal (DOT) net
wrote:

On Sat, 11 Oct 2008 14:00:59 +0200 Hendrik Maryns
ialpjx302 (AT) sneakemail (DOT) com
wrote:

Just took a look at OP's site. He obviously wants to preserve an ability
for the users browser to be quite narrow. But he should consider a
min-width of 700 or 800px, not only because it eases the problem he is
facing but because narrow browser widths with this design and bigger
than average text is a fairly ugly result at the top banner...

The OP being me, I hope you can clear me up: by ‘bigger than average
text’, do you mean the slogan only, or the body text? AFAIR, I didn’t
specify a body text size (though my collaborator might have done so).


Just talking about the particular heading problem when user uses bigger

text view (eg. in average browser View menu). I was not concerned with
your body text. If someone tend to look at webpages with bigger than
average text as set by themselves, then the problem I refer to arises
for your heading.

Why not bite the bullet and make the slogan (is it just a slogan?) an
image. The size of the image will be big enough to not cause
inconvenience to people liking bigger text. It is not as if it is
something anyone will be reading in a studied way.

True :-)

Something like:

div id="header"
div id="logo"><img src="bild/logo.png" alt="Logo" height="105"
width="157"></div
div id="adresse"><strong>Hier finden Sie uns:</strong><br
Aktionszentrum Arme Welt e.V.<br
Weltladen <br
Lange Gasse 64<br
72070 Tübingen<br
Tel.: 07071/23062</div
div id="slogan"><img src="bild/slogan.png" alt="Ein Stück Welt von
Morgen" height="105" width="300"></div
div id="linie-oben"
hr

and

#logo {
float: left;
}

#adresse {
float: right;
text-align: right;
}

#slogan {
font-weight: bold;
font-style: italic;
text-align: center;

}

I suppose you leave this in for the case the alt text is shown?

Yes, that is right.

--
dorayme

In article <gge5gk$lqe$1 (AT) newsserv (DOT) zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02 (AT) sneakemail (DOT) com> wrote:

I do not care too
much about IE users. So where can I read up on this table mimicking CSS?

Be careful with this wild view, Hendrik! IE users are the almost
overwhelming majority in the world!

And you will be disappointed with the results of css table instructions
in IE.

--
dorayme