XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bilder richtig positionieren - wie mit CSS? (http://xhtmlforum.de/showthread.php?t=57714)

RaBo 15.07.2009 15:10

Bilder richtig positionieren - wie mit CSS?
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo an alle hier im Forum!
Ich habe eine Frage, die das Positionieren von Bildern mit CSS betrifft. Wäre super, wenn mir ein CSS-Profi die richtige Idee vermitteln könnte. :) Ich habe auf dem Gebiet leider noch zu wenig Erfahrung.

Meine Frage:
Ich habe eine Webseite auf der ein <div> den Bereich mit hellblauem Hintergrund definiert. Jetzt möchte ich über die Hintergrundfarbe Bilder legen. Jedes Bild ist ein Vorschaubild mit Link zu einer großen Ansicht. Folgendes ist wichtig:

1) Der Abstand von Bild zu Bild soll immer (bei jedem Browser!!!) 2 pt betragen.

2) Der Abstand der Bilder zum oberen Rand sollte (Beispiel!) 100 px betragen, der Abstand zum linken Bildrand 50px.

Mein Lösungsvorschlag:
1) Ich lege in den div-Container einen weiteren div-Container, den ich durch padding-left und padding-top positionieren kann. Die Größe des neuen Containers ist exakt die Größe meiner Bilder plus die Abstände zwischen ihnen. (Muss ich da mit z-index arbeiten, oder geht das ineinander verschachteln auch so?)

3) Ich definiere für jedes Bild:
padding: 0;
border: 0;
margin: 1px;
Ich denke, das müsste für jeden Browser absolut eindeutig sein. Oder irre ich mich da?

3) Die Bilder schreibe ich jetzt einfach in den HTML Code nacheinander hinein.

DANKE für alle Ideen und Korrekturen!!!
Raphael

PS: Ich hab ein Beispiel wie es ca. werden könnte, beigelegt.

heiko_rs 15.07.2009 15:25

Deine Idee ist okay, allerdings müssen die Bilder dafür Blockelemente werden, und infolgedessen floaten (dadurch werden sie übrigens automatisch zu Blockelementen). Füge Deiner img-Regel also noch float: left; hinzu und beachte die FAQ.

z-index brauchst Du nicht, denn ein div, das sich innerhalb eines anderen befindet, liegt ohne weiteres Zutun "oben".

RaBo 15.07.2009 15:34

Zitat:

Zitat von heiko_rs (Beitrag 438805)
Deine Idee ist okay, allerdings müssen die Bilder dafür Blockelemente werden, und infolgedessen floaten (dadurch werden sie übrigens automatisch zu Blockelementen). Füge Deiner img-Regel also noch float: left; hinzu und beachte die FAQ.

z-index brauchst Du nicht, denn ein div, das sich innerhalb eines anderen befindet, liegt ohne weiteres Zutun "oben".

Super, danke!
Ich probiere es mal und poste einen Link, wenn es online ist!
Grüße
Raphael


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:17 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023