Einfügen eines Bildes verändert Schriftausrichtung

fisch · 05.12.2007, 10:27

Hallo Miteinander,

ich hatte einen Footer mit CSS wie folgt definiert:
#footer { width: 100%;
min-width: 750px;
height: 25px;
line-height: 25px;
min-width: 750px;
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 kleine 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:
<div id="footer">Impressum Kontakt
<img class="ensign" src="images/de_klein.GIF">
</div>

CSS für's Bildchen: .ensign { padding-top: 3px; }

Hat jemand eine Idee, wie ich mit CSS sowohl die Ausrichtung der Schrift als auch die Ausrichtung des Bildchens vertikal hinbekomme?

Vielen Dank für Eure Tips!

fisch · 05.12.2007, 12:56

Hallo ingozen,

also immerhin hilft dies, dass sich meine Schrift im Footer wieder vernünftig mittig ausrichtet. Meine Bilder, auf die sich der vertical-align: middle; - Befehl ja bezieht, werden merkwürdigerweise aber nun oben am Rand des Footers ausgerichtet.

Hier mal der betreffende HTML-Code:

HTML-Code:

<div id="footer">Impressum Kontakt
<img class="ensign" src="http://www.traum-projekt.com/forum/images/de_klein.GIF">
<img class="ensign" src="http://www.traum-projekt.com/forum/images/sp_klein.GIF">
<img class="ensign" src="http://www.traum-projekt.com/forum/images/uk_klein.GIF">
<img class="ensign" src="http://www.traum-projekt.com/forum/images/fr_klein.GIF">
</div>

CSS-Code wie oben (im ersten Posting) ergänzt durch:

Code:

img.ensign { vertical-align: middle; }

fisch · 05.12.2007, 16:37

Nee, nee, so geht das alles nicht

.

Ich poste jetzt nochmal den kompletten Code. Vielleicht mag's ja mal jemand bei sich nachbasteln :-) . Ist eigentlich nichts großes. Da wo, die Bilder hingehörenen wären dann natürlich Bildchen. Ach, die pack ich auch noch in den Anhang, der Vollständigkeit halber.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style type="text/css">
html, body {    width: 100%;
		height: 100%;
		font-family: Sans-Serif; }
#header {  	width: 100%;	
		height: 70px;
		background-image: url(images/Header.JPG);
		text-align: right;
		padding-right: 10px;  }
#menu   {            height: 25px;
                          with: 100%;    }
#content { 	width: 75%;
		height: 75%;
		float: left;
		margin-right:0px; /* !important */
		margin-right:-3px; /* Fixt "3px-Gap-Bug" im IE6 */ }
#right { 	widht: 25%;
		height: 75%; }
		
#footer { 	width:100%;
		min-width: 750px;
		height: 25px;
		line-height: 25px;
		background-color: blue;
		color: white;
		padding-left: 5px;
		font: 13px/25px Sans-Serif;
		word-spacing: 55px; }
		
#footer img { vertical-align: middle; }
</style>
</head>
<body>
<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="right">right</div>
<div id="footer">Impressum Kontakt
<img src="images/de_klein.GIF">
<img src="images/sp_klein.GIF">
<img src="images/uk_klein.GIF">
<img src="images/fr_klein.GIF">
</div>
</body>
</html>

So, viel Spaß beim Nachbasteln.