How to center some text nicely between two floats

Hi,

There is a little problem with the header on the page I recently
converted from frames to proper HTML+CSS. The top part with the
navigation used to be the top frame but is now included via SSI. On a
broad screen, it looks good, but if you make the viewport small, the
slogan text in the middle overlaps with the navigation buttons.

http://www.weltladen-tuebingen.de/

I experimented with the following:
- put the slogan line between the floats. This results in the right
float being pushed down
- instead of position:relative and top:1em (they belong together,
obviously, the one does nothing without the other), tried margin-top: 1
em, but that shifts the floats down as well.

So what I want is that the slogan is nicely centered between the floats,
both vertically and horizontally, but that it doesn’t overlap with the
line below if the viewport gets small. I do not really understand why
clear:both on the line doesn’t work as expected. float: center; would
be the solution, but this doesn’t exist.

Any hints most welcome.

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 <gcne0g$so3$1 (AT) newsserv (DOT) zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02 (AT) sneakemail (DOT) com> wrote:

Hi,

There is a little problem with the header on the page I recently
converted from frames to proper HTML+CSS. The top part with the
navigation used to be the top frame but is now included via SSI. On a
broad screen, it looks good, but if you make the viewport small, the
slogan text in the middle overlaps with the navigation buttons.

http://www.weltladen-tuebingen.de/

I experimented with the following:
- put the slogan line between the floats. This results in the right
float being pushed down
- instead of position:relative and top:1em (they belong together,
obviously, the one does nothing without the other), tried margin-top: 1
em, but that shifts the floats down as well.

So what I want is that the slogan is nicely centered between the floats,
both vertically and horizontally, but that it doesn’t overlap with the
line below if the viewport gets small. I do not really understand why
clear:both on the line doesn’t work as expected. float: center; would
be the solution, but this doesn’t exist.

You could set a min-width so that, if the viewport is shrunk, you
don't observe the behaviour (the user gets a horizontal scroll-bar
instead)

As far as three things on the same line, you can have two left floats
(#logo, #slogan) and leave the right content in the main flow. Or, do
what you're currently doing but with the min-width to prevent collapse
I'm sure there will be plenty of other (better) suggestions...

David Stone schreef:

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

Hi,

There is a little problem with the header on the page I recently
converted from frames to proper HTML+CSS. The top part with the
navigation used to be the top frame but is now included via SSI. On a
broad screen, it looks good, but if you make the viewport small, the
slogan text in the middle overlaps with the navigation buttons.

http://www.weltladen-tuebingen.de/

I experimented with the following:
- put the slogan line between the floats. This results in the right
float being pushed down
- instead of position:relative and top:1em (they belong together,
obviously, the one does nothing without the other), tried margin-top: 1
em, but that shifts the floats down as well.

So what I want is that the slogan is nicely centered between the floats,
both vertically and horizontally, but that it doesn’t overlap with the
line below if the viewport gets small. I do not really understand why
clear:both on the line doesn’t work as expected. float: center; would
be the solution, but this doesn’t exist.

You could set a min-width so that, if the viewport is shrunk, you
don't observe the behaviour (the user gets a horizontal scroll-bar
instead)

Sorry, but doesn’t work (a scroll-bar, yes, but the text is still wrapped).

As far as three things on the same line, you can have two left floats
(#logo, #slogan) and leave the right content in the main flow.

Myes, but I’d like a big enough gap between the floats. And specifying
an explicit margin/padding will give similar problems with small viewports.

Thanks anyway, 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 wrote:

if you make the viewport small, the
slogan text in the middle overlaps with the navigation buttons.

http://www.weltladen-tuebingen.de/

- instead of position:relative and top:1em (they belong together,
obviously, the one does nothing without the other), tried margin-top: 1
em, but that shifts the floats down as well.

Margins are subject to margin collapsing rules, which affects spacing of
elements around it. Margins and floats can be even trickier.

I do not really understand why
clear:both on the line doesn’t work as expected.

Relative positioning does not do what you probably think it does - it
offsets the element's position without affecting the other elements
around it. That's why the line doesn't shift down when the slogan line
wraps - it behaves as though slogan is staticly positioned.
http://brainjar.com/css/positioning/

Go back to static positioning on slogan, but try padding-top:1em instead
of margin-top, then you'll avoid the margin collapsing issues.

--
Berg

On Fri, 10 Oct 2008 15:19:43 +0200, Hendrik Maryns wrote:

David Stone schreef:
In article <gcne0g$so3$1 (AT) newsserv (DOT) zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02 (AT) sneakemail (DOT) com> wrote:

Hi,

There is a little problem with the header on the page I recently
converted from frames to proper HTML+CSS. The top part with the
navigation used to be the top frame but is now included via SSI. On a
broad screen, it looks good, but if you make the viewport small, the
slogan text in the middle overlaps with the navigation buttons.

http://www.weltladen-tuebingen.de/

I experimented with the following:
- put the slogan line between the floats. This results in the right
float being pushed down
- instead of position:relative and top:1em (they belong together,
obviously, the one does nothing without the other), tried margin-top: 1
em, but that shifts the floats down as well.

So what I want is that the slogan is nicely centered between the floats,
both vertically and horizontally, but that it doesn't overlap with the
line below if the viewport gets small. I do not really understand why
clear:both on the line doesn't work as expected. float: center;
would be the solution, but this doesn't exist.

You could set a min-width so that, if the viewport is shrunk, you don't
observe the behaviour (the user gets a horizontal scroll-bar instead)

Sorry, but doesn't work (a scroll-bar, yes, but the text is still
wrapped).

As far as three things on the same line, you can have two left floats
(#logo, #slogan) and leave the right content in the main flow.

Myes, but I'd like a big enough gap between the floats. And
specifying an explicit margin/padding will give similar problems with
small viewports.

Thanks anyway, H.

It looks like your min-width would have to be about 1100px to get it so
the title doesn't wrap - which is too wide for most people.

I would play with the position-top of #slogan so you are able to fit two
lines of text there, and then you can go with a min-width of about 900
(which is still too wide for many people). It's too bad your address has
such a long line in it - perhaps you can break that up into two?

Bergamot schreef:

Hendrik Maryns wrote:
if you make the viewport small, the
slogan text in the middle overlaps with the navigation buttons.

http://www.weltladen-tuebingen.de/

- instead of position:relative and top:1em (they belong together,
obviously, the one does nothing without the other), tried margin-top: 1
em, but that shifts the floats down as well.

Margins are subject to margin collapsing rules, which affects spacing of
elements around it. Margins and floats can be even trickier.

I do not really understand why
clear:both on the line doesn’t work as expected.

Relative positioning does not do what you probably think it does - it
offsets the element's position without affecting the other elements
around it. That's why the line doesn't shift down when the slogan line
wraps - it behaves as though slogan is staticly positioned.
http://brainjar.com/css/positioning/

Go back to static positioning on slogan, but try padding-top:1em instead
of margin-top, then you'll avoid the margin collapsing issues.

That’s a valuable suggestion. It starts looking stupid for a very small
viewport, but that is because then the last word is on a line /below/
the floats, and the centering is changed. A trick would be to make the
floats bigger, by splitting the first address line, as edgy suggested,
and putting some padding around the logo (I think I’ll try to scale it
up with Gimp, but that’s for later).

Thanks all, 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

Op 10-10-08 16:21 heeft Bergamot als volgt van zich laten horen:

Hendrik Maryns wrote:
if you make the viewport small, the
slogan text in the middle overlaps with the navigation buttons.

http://www.weltladen-tuebingen.de/

- instead of position:relative and top:1em (they belong together,
obviously, the one does nothing without the other), tried margin-top: 1
em, but that shifts the floats down as well.

Margins are subject to margin collapsing rules, which affects spacing of
elements around it. Margins and floats can be even trickier.

I do not really understand why
clear:both on the line doesn’t work as expected.

Relative positioning does not do what you probably think it does - it
offsets the element's position without affecting the other elements
around it. That's why the line doesn't shift down when the slogan line
wraps - it behaves as though slogan is staticly positioned.
http://brainjar.com/css/positioning/

Go back to static positioning on slogan, but try padding-top:1em instead
of margin-top, then you'll avoid the margin collapsing issues.

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?

H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
www.lieverleven.be
http://catb.org/~esr/faqs/smart-questions.html

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.

--

WARNING: Due to extreme spam, googlegroups.com is blocked. Due to ignorance |
by the abuse department, bellsouth.net is blocked. If you post to |
Usenet from these places, find another Usenet provider ASAP. |
Phil Howard KA9WGN (email for humans: first name in lower case at ipal.net) |

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

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.

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.

H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
www.lieverleven.be
http://catb.org/~esr/faqs/smart-questions.html

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...

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.

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;

}

--
dorayme