display:inline-problem

[johannes]

Hallo.
auf http://johannesswo.jo.funpic.de/mamaphp/content/home.php
versuche ich, einen footer zu realisieren:
Die elemente sind untereinander angeordnet, trotz display:inline; ...
Wie bringe ich die grafiken und texte dazu, sich vertikal anzuordnen?

relevanter code:

  
<!-- start footer-->  
<div style="  
 text-align:center;  
 font-family: sans-serif;  
 font-weight:bold;  
 height:50px;  
 background-image: url(./bgcolor.jpg);  
        color:white;  
 border-top:2px solid black;  
 padding:0px;  
 margin:0px;  
 text-align:center;  
 display:block;  
">  
<div style="  
        border:1px solid green;  
        display:inline;  
">  
    <p>  
    <a href="http://validator.w3.org/check?uri=referer">  
    <img style="border:none;"  
        src="http://www.w3.org/Icons/valid-html401"  
 alt="Valid HTML 4.01 Strict" height="31" width="88">  
    </a>  
    </p>  
  
    <p>  
    <a href="http://jigsaw.w3.org/css-validator/">  
    <img style="border:0;width:88px;height:31px"  
       src="http://jigsaw.w3.org/css-validator/images/vcss"  
       alt="Valid CSS!" />  
    </a>  
    </p>  
  
    <a href="fragen.html">fragen?</a>  
    <a href="kontakt.html">   kontakt  </a>  
    <a href="Impressium.php">Impressium</a>  
</div>  
</div>  
<!--end footer-->  

#footer
{

[kungschu]

Hallo.

Ich würde das Ganze in eine horizontale Liste packen.
Diese Liste dann mit display:inline ausstatten.
Etwa so.

MfG, Kungschu.

[johannes]

Ich würde das Ganze in eine horizontale Liste packen.
Diese Liste dann mit display:inline ausstatten.

Interessante, Funktionierende Idee !!
THX, g, johannes

[Gunnar Bittersmann]

Hello out there!

Die elemente sind untereinander angeordnet, trotz display:inline; ...

Die 'display'-Eigenschaft wird nicht vererbt. [CSS2 §9.2.5]

Dein Versuch, übersichtlichen Code zu schreiben, in allen Ehren, aber verzichte besser auf 'style'-Attribute und notiere alle Angaben zentral im 'style'-Element im 'head' oder einer externen CSS-Datei.

See ya up the road,
Gunnar

[johannes]

Die 'display'-Eigenschaft wird nicht vererbt. [CSS2 §9.2.5]

aha.

Dein Versuch, übersichtlichen Code zu schreiben, in allen Ehren, aber verzichte besser auf 'style'-Attribute und notiere alle Angaben zentral im 'style'-Element im 'head' oder einer externen CSS-Datei.

Ja, das hab ich eh nur für's Forum geändert... ;)

g johannes

[johannes]

nächstes Problem: zentrieren der display:inline;-liste
wie auf http://johannesswo.jo.funpic.de/mamaphp/content/angebote.php#kammermusik
zu sehen ist, zentriert sie die display:inline;-liste nicht vertikal, trotz
vertical-align:middle; , margin:0; und padding:0; ...
Grund dafür ist wahrscheinlich die fest vorgegebene höhe.
wie zentriere ich die display:inline;-liste ?

g johannes

[wahsaga]

hi,

wie auf http://johannesswo.jo.funpic.de/mamaphp/content/angebote.php#kammermusik
zu sehen ist, zentriert sie die display:inline;-liste nicht vertikal, trotz
vertical-align:middle; , margin:0; und padding:0; ...

vertical-align darf nicht wirken.

wie zentriere ich die display:inline;-liste ?

line-height könnte helfen.
Ist aber nur sinnvoll, wenn mit ausreichender Sicherheit vorauszusagen ist, dass die Inhalte niemals mehrzeilig werden - dann sähe es nämlich richtig blöd ist.

Aber wenn auch die Höhe des umgebenden Elements fest vorgegeben ist, dann sollte es auch ein margin tun.

Btw: Es heisst Impressum, nicht Impressium.

gruß,
wahsaga

[MudGuard]

Hi,

zu sehen ist, zentriert sie die display:inline;-liste nicht vertikal, trotz
vertical-align:middle; , margin:0; und padding:0; ...

vertical-align darf nicht wirken.

Warum nicht? display:inline erfüllt die Voraussetzung für "Applies to: inline-level and 'table-cell' elements" (http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align).

Aber wenn auch die Höhe des umgebenden Elements fest vorgegeben ist, dann sollte es auch ein margin tun.

Nein. "but vertical margins will not have any effect on non-replaced inline elements." (http://www.w3.org/TR/CSS21/box.html#margin-properties)

cu,
Andreas

[wahsaga]

hi,

vertical-align darf nicht wirken.

Warum nicht? display:inline erfüllt die Voraussetzung für "Applies to: inline-level and 'table-cell' elements"

Ja, hast natürlich Recht.

Aber wenn auch die Höhe des umgebenden Elements fest vorgegeben ist, dann sollte es auch ein margin tun.

Nein. "but vertical margins will not have any effect on non-replaced inline elements."

Ich dachte an die Liste - diese nicht inline, per margin ausrichtbar.
List-Items inline, per text-align:center innerhalb der Liste zentrierbar.

gruß,
wahsaga