nicht angemeldet
Hallo Gemeinde!
Seit langem beschäftige ich mich mal wieder mit dem Basteln einer Homepage. Ziel ist es natürlich etwas schickes auf einem aktuellen Stand der Technik (XHTML, CSS für Box-Layout, etc) zu schaffen. Aber ich bin auf ein Problem gestoßen, das raubt mir den letzten Nerv, ich hoffe, dass ihr mir helfen könnt.
Okay, kurz das Szenario: In meinem Body existiert eine div-Box mit der id "hintergrund", die auf der Seite an sich einfach mittig ausgerichtet ist und einen schicken Rahmen für den Inhalt bildet. Im CSS ist sie folgendermaßen definiert:
div#hintergrund {
text-align: left;
margin: 0 auto;
width: 825px; /* <--- Feste Breite! -->
padding: 0; font-family:Tahoma,helvetica,sans-serif;
border: 2px solid #AAAAAA;
display:block;
}
Klappt auch alles wunderbar. Jetzt folgendes: An oberster Stelle in diesem "Hintergrund" sollen zwei Bilder in einem bestimmten Abstand zueinander eingefügt werden. Ganz links kommt ein "Foto" hin (Breite: 530px), direkt dahinter kommt ein "Logo"-Bild (Breite 250px) welches mit dem style-Attribut "padding-left:45px;" versehen ist, sodass zwischen "Foto" und "Logo" genau 45 Pixel Platz ist. Das wiederum hat zur Folge, dass der rechte Rand von "Logo" genau an den Rand vom "hintergrund"-Div grenzt (Denn: 530+45+250 = 825).
Und jetzt das eigentliche Problem:
Sobald die beiden <img>-Tags für "Foto" und "Logo" eingerückt (Zeilenumbruch, Tabs) werden entsteht zwischen den beiden Bildern bei der Darstellung ein Leerzeichen, welches mir die gesamte Darstellung kaputt macht. Man sieht dieses Leerzeichen, wenn man die betreffende Stelle im IE z.B. markiert. Dieses Leerzeichen hat zur Folge, dass "Foto"+ZeilenumbruchLeerzeichen+"Logo" breiter als 825 Pixel ist, sodass anscheinend alle Browser nun umbrechen, sodass "Logo" nun unter "Foto" erscheint (Also quasi in einer neuen Zeile) und nicht mehr direkt daneben. Sehr ärgerlich!
<div id="hintergrund">
<img src="img/foto_01.jpg" alt="" title="" width="530" height="120" />
<img src="img/logo_topright.png" alt="" title="" style="padding-left:45px;" width="250" height="120" />
<!-- Geht kaputt. -->
...
</div>
Schreibe ich die beiden Bildelemente, bei denen es auf genaue Positionierung ankommt in einer Quelltextzeile direkt hintereinander, dann entsteht kein störendes Leerzeichen und alles ist haargenau so, wie es sein sollte. |"FOTO" (45px Platz) "Logo"|
<div id="hintergrund">
<img src="img/foto_01.jpg" alt="" title="" width="530" height="120" /><img src="img/logo_topright.png" alt="" title="" style="padding-left:45px;" width="250" height="120" />
<!-- klappt vorzüglich -->
...
</div>
Nun kann ich aber schlecht alle "pixelsensitiven" Boxen und Elemente in eine Zeile schreiben. Und trotzdem wird es eine Möglichkeit geben mein Problem zu umgehen oder gar zu beseitigen. Ich habe im Moment dazu aber keine Idee, was übersehe ich? Hoffe ihr könnt mir dazu ein paar Tipps geben! Forumsuche und Google konnten mir leider nicht weiterhelfen.
Grüße & Danke im Voraus
-Hendrik-
MudGuard