ERLEDIGT
JA
JA
ANTWORTEN
5
5
ZUGRIFFE
272
272
EMPFEHLEN
-
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.
-
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.
Code css:1 2 3 4 5
#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
-
text-align wirkt auf alle inline Elemente (Text, Links, Bilder). Auch auf solche Elemente mit display:inline-block.
Zitieren
Ähnliche Themen
-
Div-Boxen float-problem?
Von Grille im Forum CSSAntworten: 5Letzter Beitrag: 27.04.10, 12:59 -
Unschöner Abstand zwischen den Boxen
Von KlyX im Forum CSSAntworten: 2Letzter Beitrag: 29.05.09, 13:00 -
Float mit 2 unterschiedlichen Boxen in der Höhe
Von julchen im Forum CSSAntworten: 2Letzter Beitrag: 24.11.08, 09:57 -
[CSS] Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?
Von Maik im Forum Webmaster FAQAntworten: 0Letzter Beitrag: 19.04.08, 08:57 -
float:right abstand
Von kevkev im Forum CSSAntworten: 1Letzter Beitrag: 16.08.05, 16:19
Login
