✔ Abstand Boxen bei float

M

mera

Grünschnabel
Hallo,
Ich möchte 12 Bilder anordnen, jeweils 6 nebeneinander. Die Bilder sind zum Testen als weißes Quadrat dargestellt (siehe Screenshot). Dass Box 5 und 6 in die nächste Zeile rutschen ist mir klar, was ich nicht verstehe ist wo der horizontale Abstand zwischen den Boxen herkommt. Margin und padding stehen auf Null. Ich möchte dass alle Boxen einen Abstand von 2px haben. Hat jemand eine Idee?

CODE HTML:

<body>

<div id="bilder">
<img src ="Vorschaubild" alt="Vorschaubild"/><img src="Vorschautestbild.jpg"/>
<img src ="Vorschaubild" alt="Vorschaubild"/><img src="Vorschautestbild.jpg"/>
<img src ="Vorschaubild" alt="Vorschaubild"/><img src="Vorschautestbild.jpg"/>
<img src ="Vorschaubild" alt="Vorschaubild"/><img src="Vorschautestbild.jpg"/>
<img src ="Vorschaubild" alt="Vorschaubild"/><img src="Vorschautestbild.jpg"/>
<img src ="Vorschaubild" alt="Vorschaubild"/><img src="Vorschautestbild.jpg"/>
</div>

CODE CSS:

div#bilder {
float: left;
width: 1000px;
position:absolute;
margin: 0 ;
padding: 0;
top: 50px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

Anmerkung: moz und webkit infos habe ich aus nem anderen Eintrag aufgeschnappt, glaub aber nicht das das was bringt.
 

Anhänge

  • Screenshot_Boxen.jpg
    Screenshot_Boxen.jpg
    17,1 KB · Aufrufe: 9
Wo ist denn das CSS für die Bilder? Du hast nichts davon dem umschließenden DIV padding und margin zu nehmen. Und das float brauchst du da auch nicht.

CSS: 
#bilder > img {
    display:inline-block;
    padding:0;
    margin:0;
}
 
dank dir schonmal, verstehn tu ichs aber nicht. Das weiße Quadrat soll das Testbild sein.

"CSS für die Bilder": Meinst du das?
background: url (Vorschautestbild.jpg) no-repeat center;

float habe ich genommen, damit die Quadrate nach der begrenzten Breite automatisch umbrechen.
Damit bestimme ich doch die Reihenfolge der Elemente.
Das ich DIV nicht brauche, ok. Hab den Code ausprobiert, die Abstände sind immer noch da.
mit dem >img kann ich nichts anfangen, weil die Bilder doch in html hinterlegt sind. Bin halt Anfänger;)
 
Hast du vielleicht die Möglichkeit eine Testseite irgendwo hochzuladen?

Falls nicht, dann stell doch mal ein komplettes Testdokument hier online, am besten mit [ html ][ /html ] tags.
 
Funktioniert! Danke! War ein Ansichtsfehler im Browser und ich hatte noch kaputte Bilder dazwischen.
Hab noch etwas gebraucht um das ganze zu zentrieren. "margin: 0 auto" ging nicht und ich dachte "text-algin:center" wäre nur für Textausrichtung. Hoffe das ich das ganze mit anderen Elemente auf einer Seite hinbekomme.

Das ist der Code:

HTML:

<body>

<div id="bilder">
<a ="Vorschaubild"/"><img src="bild_gruen.jpg" alt= Bild einer Flaeche"/></a>
<img src="bild_weiss.jpg"/>
<img src="bild_rot.jpg"/>
<img src="bild_weiss.jpg"/>
<img src="bild_gruen.jpg"/>
<img src="bild_weiss.jpg"/>
<li>
<a ="Vorschaubild"/"><img src="bild_gruen.jpg" alt= Bild einer Flaeche"/></a>
<img src="bild_weiss.jpg"/>
<img src="bild_rot.jpg"/>
<img src="bild_weiss.jpg"/>
<img src="bild_gruen.jpg"/>
<img src="bild_weiss.jpg"/></li></div>
</body>

CSS:
body {
background:#000;
text-align:center;
}
div#bilder {
display:inline-block;
padding:0px;
margin:0 8px 8px 8px;
position: absolut;
}

//wusste nicht was der aktuelle Code für Bilder einfügen ist
 

Anhänge

  • screenshot_Bilderwand.jpg
    screenshot_Bilderwand.jpg
    20 KB · Aufrufe: 5
text-align wirkt auf alle inline Elemente (Text, Links, Bilder). Auch auf solche Elemente mit display:inline-block.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück