✔ Elemente direkt aneinander reihen

[WIK-Lars]

Hallo,
in meinem Header (siehe Anhang) werden die Elemente nicht direkt aneinander gesetzt. Die Reihenfolge der Bilder ist auch noch nicht ganz korrekt, aber das soll hier weiter nicht stören. Ich habe einige Elemente (im Anhang) mit einem Rand versehen, damit es deutlicher wird. Der Hintergrund (welcher zwischen den Elementen zu sehen ist) ist auch ein graues Bild, dass sich ständig wiederholt.
Mein Code zum Header sieht so aus:

#header { height: 15%;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-width: 1px;
border-style: solid;
border-color: black;
background-image: url(topm_2.gif);
background-repeat:repeat-x; }
.logo { position: absolute; right: 0px;}
.headerstyle { postition: absolute;
float: left; }

<div id="header">
<embed class="headerstyle" src="_flash.swf" bgcolor="#FFFFFF" width="137" height="67" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
<img class="topm_1" src="topm_1.gif" alt="" height="67" width="229" border="1" /> 
<img src="topm_3.gif" alt="" height="67" width="32" border="1" />
<img class="logo" src="_logo_HintergrWeiss.gif" alt="" height="60" width="200" border="1" />
</div>

Mein Problem ist im Moment, dass zwischen die Bilder immer ein Abstand gedrückt wird. Was kann ich dagegen tun?

Danke für Eure Tips!

 

[Maik]

Hi,

die Lücke zwischen den einzelnen Grafikelementen entsteht durch die Zeilenumbrüche im HTML-Code, auch "Whitespaces" genannt.

Abhilfe schafft, den Grafikelementen "Block-Level-Charakteristika" zu verleihen, in diesem Fall mit der float-Eigenschaft:

#header img {
float:left;
}

 

[WIK-Lars]

Prima, prima! Danke!

Bliebe nur noch die Frage, wie ich das 3.Bild von links so nach rechts verschiebe, dass es quasi das zweite von rechts wird. ( Hab' da zur näheren Erläuterung nochmal einen Anhang gemacht: rot soll in Pfeilrichtung nach blau verschoben werden ;-) ).

 

[Maik]

Dann positionier es neben dem Logo:

#header { height: 15%;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-width: 1px;
border-style: solid;
border-color: black;
background-image: url(topm_2.gif);
background-repeat:repeat-x;
position:relative;
}

.logo {
position: absolute;
right: 0px;
}

.rightCorner {
position:absolute;
right:202px;
}

<div id="header">
<embed class="headerstyle" src="_flash.swf" bgcolor="#FFFFFF" width="137" height="67" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
<img class="topm_1" src="topm_1.gif" alt="" height="67" width="229" border="1" /> 
<img class="rightCorner" src="topm_3.gif" alt="" height="67" width="32" border="1" />
<img class="logo" src="_logo_HintergrWeiss.gif" alt="" height="60" width="200" border="1" />
</div>

 

[WIK-Lars]

Prima, super, ich danke Dir!