zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder richtig positionieren - wie mit CSS?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.07.2009, 15:10
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.09.2008
Ort: Berlin
Beiträge: 124
RaBo befindet sich auf einem aufstrebenden Ast
Standard Bilder richtig positionieren - wie mit CSS?

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.
Angehängte Grafiken
Dateityp: jpg foto.jpg (17,1 KB, 6x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.07.2009, 15:25
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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".
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.07.2009, 15:34
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.09.2008
Ort: Berlin
Beiträge: 124
RaBo befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bilder im div mit float positionieren henmey CSS 4 25.01.2009 02:53
Menuinhalt richtig positionieren Pari CSS 3 03.01.2009 17:11
bilder so positionieren, dass sie immer untereinander auftauchen vikingosegundo CSS 3 22.10.2008 19:11
druckbare Bilder mit css einbinden rg69 CSS 1 21.02.2008 12:11
Navigation mit CSS und Bilder fanttomas CSS 9 16.02.2006 13:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:54 Uhr.