✔ Mittige Schrift verrutscht bei Einfügen eines Bildes

Status
Nicht offen für weitere Antworten.
W

WIK-Lars

Erfahrenes Mitglied
Hallo Miteinander,

ich hatte einen Footer mit CSS wie folgt definiert:
Code: 
#footer { width: 100%; 
height: 25px; 
line-height: 25px; 
background-color: blue; 
color: white; 
padding-left: 5px; 
font-size: 13px; 
word-spacing: 55px; }
Hat auch alles prima geklappt, mittige Schriftausrichtung usw. Jetzt habe ich dem Footer noch ein kleines Bildchen eingefügt. Und siehe da, die mittige Schriftausrichtung ist dahin. Das Bildchen - ein kleines Länderfähnchen - wird zwar eingefügt. Es wird zunächst am oberen Rand des Footers angezeigt.Dies kann ich natürlich mit padding-top beheben. Dafür rutscht die Schrift nun aber ganz auf den Boden des Footers.

Der aktuelle Footercode:
HTML: 
<div id="footer">Impressum Kontakt 
<img src="images/de_klein.GIF"> 
</div>
CSS für's Bildchen:
Code: 
#footer img { padding-top: 3px; }
Hat jemand eine Idee, wie ich mit CSS sowohl die Ausrichtung der Schrift als auch die Ausrichtung des Bildchens vertikal hinbekomme?
 
Hi,

versuch es mal auf diese Weise:

Code: 
#footer {
width: 100%;
height: 25px;
/*line-height:25px;*/ /* auskommentiert = deaktiviert */
background-color: #ddd;
color: white;
padding-left: 5px;
font-size: 13px;
word-spacing: 55px; }

#footer img { 
vertical-align:middle; /* Grafik zum umfliessenden Text vertikal zentrieren */
padding:3px 0;
}
 
Wow, funktioniert.
Wieso eigentlich, ich habe jetzt doch gar keine explizite Anweisung, dass der Text mittig ausgerichtet werden soll? Trotzdem wird er's.
Danke Maik!
 
So weit, so gut! :)

Jetzt möchte ich die (Bildchen) Fähnlein noch mit einem hellblauen Rand umgeben. Wenn ich nun in den bisherigen Tag
Code: 
#footer img { vertical-align: middle;
   padding: 3px 0;}
noch zusätzlich
Code: 
border: 1px solid #99CCFF;
eingebe, dann bezieht sich das padding leider auch auf den Rahmen und oben und unten hat der Rahmen 3px Abstand zur Flagge.

Ich hab's schon mit einer Extradefinition in einer weiteren Klasse für den image-Tag probiert, aber das hat leider nichts geholfen.
 
Na dann verwende doch einfach margin anstatt padding, dann klappts auch so wie du es gerne haben willst. ;)

Lg,
Manuel ;-]
 
Ich habe jetzt statt padding margin eingesetzt. Obwohl die Fähnlein (zumindest im IE 6) nicht hundertprozentig vertikal mittig ausgerichtet werden, ist das Ergebnis akzeptabel.

Nun würde ich die Bilder noch gerne mehr von der Schrift trennen. Also während die Schrift (es werden noch Links) links im Footer sein sollen, sollen die Fähnlein rechts angeordnet werden.

Wenn ich den Footer noch einmal mit <div>'s unterteile wird's aber ganz schlimm, wegen des damit einhergehenden Zeilenumbruchs :confused:

Jetztiger Stand Footer:
Code: 
 #footer { width:100%;
  height: 25px;
  background-color: #003366;
  color: white;
  padding-left: 5px;
  font-size: 13px; }
#footer img {  vertical-align: middle; 
  margin: 3px 0;
  border: 1px solid #99CCFF  }
... mit dazugehörigem HTML-Code:
HTML: 
<div id="footer">Home |
Downloads | 
Kontakt | 
Impressum
<img src="images/de_klein.GIF" width="28" height="17" title="deutsch">
<img src="images/sp_klein.GIF" width="28" height="17" title="spanisch">
<img src="images/uk_klein.GIF" width="28" height="17" title="englisch">
<img src="images/fr_klein.GIF" width="28" height="17" title="franz&ouml;sisch">
</div>
 
Hi,

richte die beiden "Spalten" mit Hilfe der float-Eigenschaft ein:

Code: 
.links { float:left; }

.flags { float:right; }

Code: 
<div id="footer">
    <span class="links"> ... </span>
    <span class="flags"> ... </span>
</div>
 
Ok, habe ich gemacht.
Jetzt hab' ich genau wieder das Problem, mit dem ich dieses Posting begonnen habe: nämlich, dass links die Schriften nicht mehr vertikal mittig ausgerichtet sind.
Sie verrutschen nach oben und sind jetzt quasi top im Footer.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück