✔ Bilder tabellenmäßig ausrichten?

Status
Nicht offen für weitere Antworten.
G

GFX-Händchen

Erfahrenes Mitglied
Hi all,

ich bin am verzweifeln!:rolleyes:
Habe 6 Bilder die ich mit Abstand nebeneinander ausrichten möchte damit diese so aussehen wie unten auf dem Bild.
Leider bekomme ich es nicht gebacken.:(

Mein CSS-Code sieht folgendermaßen aus:
Code: 
body { background-image:url(Bilder/index_03_blau.png); background-attachment:fixed; }
div.wohnbereich {margin-left:55px; margin-top:114px}
div.schlafzimmer {margin-left:247px; margin-top:-118px}
div.kueche {margin-left:446px; margin-top:-122px}
div.bad {margin-left:55px; margin-top:35px}

Mein Html-Code so.
Code: 
<body>

<p align="center"><font size="5">Hier können Sie auswählen welche Bilder der
Ferienwohnung Sie sehen möchten</font> </p>
<div class="wohnbereich">

<p><img src="Fensterbilder/wohnbereich.png"></p>
</div><div class="schlafzimmer">

<p><img src="Fensterbilder/schlafzimmer.png"></p>
</div><div class="kueche">

<p><img src="Fensterbilder/kueche.png"></p>
</div><div class="bad">

<p><img src="Fensterbilder/bad.png"></p>
</div>
</body>

Kann man das Ganze nicht besser mit einer Tabelle lösen?:confused:
Finde meinen Weg bescheuert!:rolleyes:
Ich hab zw. Text und Bilder zu viel Abstand.

Wäre über schnelle Hilfe sehr dankbar!:)
 

Anhänge

  • index_03.jpg
    index_03.jpg
    6,5 KB · Aufrufe: 13
Zuletzt bearbeitet:
Hi,

du hättest die Möglichkeit, die Grafiken in eine floatende Liste einzubinden, beispielsweise:

Code: 
ul.gallery {
margin:0;
padding:0;
list-style:none;
}

ul.gallery li {
float:left;
width:33%;
}
Code: 
<ul class="gallery">
    <li><img src="..." alt="..."></li>
    <li><img src="..." alt="..."></li>
    <li><img src="..." alt="..."></li>
    ...
</ul>
 
Uff, das klappt noch nicht ganz.
Die Bilder haben zwar den richtigen Abstandn nach rechts zueinandern, aber...
...die Bilder sind jetzt zu nah unter der Überschrift und
...haben nach unten zueinander einen zu kleinen Abstand

-----
Hinfällig ist dann:
Meine einzelnen Grafiken sind diese Fensterchen die man oben in dem kompletten Bild (Grafik) sieht.
Der Hintergrund ist komplett blau und nun möchte ich die einzelnen Fensterchen mit etwa dem gleichen Abstand wie auf der Grafik oben anordnen und später noch verlinken.

Zwischen meiner Überschrift (siehe Html-Code) und meiner obersten Fensterreihe ist allerdings zuviel Abstand!
Kann ich diesen irgendwie verringern?:confused:

Evtl. kann ich das Ganze dann doch belassen.;)
-----
 
Zuletzt bearbeitet:
Wenn die vertikalen Außenabstände noch nicht deinen Vorstellungen entsprechen, kannst du sie mit der margin-Eigenschaft nach Belieben justieren:

Code: 
ul.gallery {
margin:0;
margin-top:50px;
padding:0;
list-style:none;
}

ul.gallery li {
float:left;
width:33%;
margin:20px 0;
}
 
TOP!:)
Jetzt ist es fast genau so wie ich es möchte.;)
Wenn ich jetzt die "Liste" noch zentirieren könnte dann wäre es schon fertig.:)
 
Zuletzt bearbeitet:
Wenn die Gesamtbreite des Listenelements nicht bekannt ist bzw. sich nicht festlegen lässt, um es mittels margin:0 auto im Anzeigebereich horizontal zu zentrieren, könnte hier möglicherweise das zweite Beispiel "a centered floated left menu (unknown width)" in Stu Nicholls' Lösungsansatz Centering Float Left Menus weiterhelfen.
 
Also, habe gerade von meinem Bekannten einen Anruf bekommen der den IE benutzt, er sagte er sieht 2 Fensterchen nebeneinander, darunter wieder 2 nebeneinander und darunter nochmals 2 nebeneinander.

Im Firefox sehe ich 3 nebeneinander und nochmals 3 darunter nebeneinander.

Das die Fensterchen nicht zentriert sind stört ihn nicht.;)

Kann man das so machen, dass auch im IE es so gezeigt wird wie im Firefox?:confused:
Welche Einstellung (evtl. Abstand von den Fensterchen nebeneinander) muss ich denn dazu ändern?:confused:
 
Zeig doch bitte mal deinen aktuellen Quellcode, denn mit meinen bisherigen Vorschlägen werden bei mir im IE (6 + 7) immer drei Grafiken pro Zeile ausgegeben.
 
Du ist aber kein iFrame-Fetischist, der gerne in jedem iFrame einen weiteren iFrame einbettet, oder? :suspekt:

Und hier wird wohl auch der Grund für den Darstellungsfehler zu suchen sein, denn die Seite "ferienwohnung.html" für sich wird im IE wie gewünscht dargestellt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück