How to center some text nicely between two floats

[Hendrik Maryns]

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

[David Stone]

In article <gc**********@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gt*******@sneakemail.comwrote:

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

[Hendrik Maryns]

David Stone schreef:

In article <gc**********@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gt*******@sneakemail.comwrote:

>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

[Bergamot]

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

[edgy]

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

David Stone schreef:

>In article <gc**********@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gt*******@sneakemail.comwrote:

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

[Hendrik Maryns]

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

[Hendrik Maryns]

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