Bild und Text mit css ausrichten:

[Florian Reichert]

Hallo Ich möchte Bild und Text wie folgt ausrichten:

-------------------------------------------------------
|      |
| Bild |
|      | Text Text Text Text Text Tex Text
-------------------------------------------------------
Die Box soll blau sein, die Schrift weiß.

Das Problem: Die Schrift ist immer oben, nicht unten. Ich dachte vertical-align: bottom solllte ausreichen ....

Wer kann mir sagen, wie es richtig geht?

Folgendes habe ich ausprobiert:

<div style="vertical-align: bottom; height: 72px; padding: 4pt; text-align: right;  background-color: #333399">
<img src="img/logo_b.png" width="196px" height="72px" border="0" alt="krautzberger.info" style="width: 196px; height: 72px; float: left">
<span style="color: #ffffff">
          [ home ][<a href="/menu1.shtml">menu1</a>]
 </span>
</div>

[Orlando]

Hi Florian,

Das Problem: Die Schrift ist immer oben, nicht unten. Ich dachte vertical-align: bottom solllte ausreichen ....

Möglichkeit 1:

<div style="vertical-align: bottom; height: 72px; padding: 4pt; text-align: right;  background-color: #333399">

• padding-top:55px (Wert geschätzt, ggf. anpassen)

http://selfhtml.teamone.de/css/eigenschaften/innenabstand.htm#padding_top

<img src="img/logo_b.png" width="196px" height="72px" border="0" alt="krautzberger.info" style="width: 196px; height: 72px; float: left">

• margin-top:-55px (Wert wie oben mit negativem Vorzeichen)

http://selfhtml.teamone.de/css/eigenschaften/randabstand.htm#margin_top

Das verschiebt das Bild wieder nach oben.

Zweite Möglichkeit (besser, da übersichtlicher):

Du definierst display:block für alle Links, damit margin-top: greift und sie nach unten drückt. Ich habe den Code etwas umgeschrieben und die Style-Definitionen für <div>, <a> und <img> zentral zuammengefasst. Dadurch kannst du durch eine Änderung im Stylesheet alle Seiten, in die es eingebunden ist, erfassen. Informationen darüber findest du hier:

http://selfhtml.teamone.de/css/formate/zentrale.htm

CSS:

#deindiv { height:72px; padding:4pt; text-align:right; background-color:#339 }
#deindiv img { float:left; border:none; }
#deindiv a { display:block; margin:55px 5px 1px 5px; float:left; color:#fff }

HTML:

<div id="deindiv">
  <img src="img/logo_b.png" width="196" height="72" alt="krautzberger.info">
  <a href="/home.shtml">home</a>
  <a href="/menu1.shtml">menu1</a>
</div>

Im HTML-Tag <img> reicht die Angabe einer Zahl für Breite/Höhe. Der Alternativtext ist wenig aussagekräftig und eine Mischung von "px" und "pt" (in #deindiv) birgt Gefahren, bleibe also besser bei nur einer Einheit.

Grüße,
 Roland

[Florian Reichert]

Hi Florian,

Das Problem: Die Schrift ist immer oben, nicht unten. Ich dachte vertical-align: bottom solllte ausreichen ....

Möglichkeit 1:

<div style="vertical-align: bottom; height: 72px; padding: 4pt; text-align: right;  background-color: #333399">

• padding-top:55px (Wert geschätzt, ggf. anpassen)

Das Problem ist, daß es sich bei dem Text um eine Reihe von Links handelt, die je nach Fensterbreite und Schriftgröße des Systems breiter als eine Spalte ist. Dann soll der Text in einer Zeile darüber anfangen, also:

text text text
text text text text text text

Du definierst display:block für alle Links, damit margin-top: greift und sie nach unten drückt. Ich habe den Code etwas umgeschrieben und die Style-Definitionen für <div>, <a> und <img> zentral zuammengefasst. [...]

Ist klar, das ganze soll kommt nachher in eine css Datei.

CSS:

[...]

#deindiv a { display:block; margin:55px 5px 1px 5px; float:left; color:#fff }

Danke, auf die Idee war ich garn nicht gekommen, auch wenn das oben gesagte (Zeilenumbruch) auch hier gilt. Außerdem sind nicht alles links (die aktuell besuchte Seite nicht)

[...] Der Alternativtext ist wenig aussagekräftig [...]

Hilft aber die validatoren des W3C zu überzeugen ... ;)

Grüße,
 Roland

Vielen Dank und Gruß Florian.

P.S. Ich werde also vermutlich doch bei einer Tabelle mit valign=bottom bleiben müssen, irgendwie schade, hatte gedacht, daß würde mit css besser klappen....