Bilder anordnen mit DIV's?

**Paradise** · 17.11.2006 08:55

Guten Morgen.

Ich möchte mich von Tabellen befreien habe aber ein Problem Bilder anzuordnen.
Ich habe schon float und sonstwas versucht aber finde die lösung nicht, weder selbst noch im Web.

Ausehen soll das ganze so:

(hier mit Tabellen gelöst)

**Boris** · 17.11.2006 09:46

Ich habe schon float und sonstwas versucht

Na dann zeig uns doch mal deinen Versuch.

**321** · 17.11.2006 10:09

hier mit DIV gelöst:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bilder zentrieren</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
* {margin: 0; padding: 0; }
.b3 	{
	margin:0 auto;
	width:450px;
}
.b2 	{
	margin:0 auto;
	width:300px;
}
.b1 	{
	margin:0 auto;
	width:150px;
}
-->
</style>
</head>
<body bgcolor="beige">
<div class="b2"
><img src="bild.gif" alt="Bild 1" width="150" height="100"
><img src="bild.gif" alt="Bild 1" width="150" height="100"
></div>
<div class="b1"
><img src="bild1.gif" alt="Bild 1" width="150" height="100" hspace="0"
></div
><div class="b3"
><img src="bild1.gif" alt="Bild 1" width="150" height="100" hspace="0"
><img src="bild1.gif" alt="Bild 1" width="150" height="100" hspace="0"
><img src="bild1.gif" alt="Bild 1" width="150" height="100" hspace="0"
></div>
</body>
</html>

**Paradise** · 18.11.2006 18:46

Danke, sieht schonmal gut aus.

Nur wenn ich das in meinen Wordpress content übernehme werden die Bilder alle untereinander gesetzt...

**321** · 18.11.2006 18:56

Und wenn Du es aus Wordpress publizierst, online immer noch?
Ich kenn das Tool nicht, aber evt. liegts an fehlendem Platz um es im wysiwyg-Modus richtig anzuzeigen ???
Sorry, wenn das ne blöde Annahme sein sollte

**IMBild** · 18.11.2006 21:07

Warum löst du das nich konsequent in CSS 321 ?

Nur wenn ich das in meinen Wordpress content übernehme werden die Bilder alle untereinander gesetzt...

Du solltest dann ggf die breite der bilder noch anpassen oder sind die alle
150x100 ?

**321** · 19.11.2006 16:46

Hallo Josie

Erstens musst Du Paradise fragen, was die Bilder für Grössen haben.
Zweitens ist gleiche Höhe und in der Breite eine Symetrie innerhalb einer Zeile fast Voraussetzung für diese Darstellungsweise.
Drittens ist es für dieses Beispiel unerheblich, ob die Bild-Breite und -Höhe mit CSS oder mit HTML-Attributen festgelegt ist.
Warum das in WP (Vorschau oder nach Publikation?) nicht funktioniert, weiss ich nicht. Ich vermute den Fehler in WP oder in der Art wie Paradise den Code in WP übernommen hat. Evt. spielen auch weitere CSS, die wir hier nicht sehen, eine Rolle.

**Paradise** · 19.11.2006 19:01

Wordpress ist eine art CMS (ein Blog).

wysiwyg nutze ich da nicht. Hab natürlich die weiten angepasst und es nur ab
<style type="text/css"> bis zum letzten div übernommen.
Body und Head natürlich rausgeworfen.

Aber ich werd es dann nochmal in Joomla versuchen...

**321** · 19.11.2006 19:17

Ja, das weiss ich gerade noch, eine Blog-Tool/CMS,
aber ich kenne es in der Handhabung nicht.

Kannst Du mal uploaden? Dann sieht man evt. die Ursache.

**Paradise** · 15.12.2006 12:04

So, mal wieder da.

Ich hab was das funktioniert

Code:

<div align="center">
<div style="display:table; border-collapse:collapse">
 <div style="display:table-row">
 <div style="display:table-cell; border: thin solid #FF0000; padding:5px"><a title="MDA SMS/Mails" href="../images/stories/paradise/pc/TB.jpg">
<img src="../images/stories/paradise/pc/thumb/TB.jpg" alt="MDA Pro" width="100" height="113" /></a></div>
  <div style="display:table-cell; border: thin solid #FF0000; padding:5px"><a title="MDA SMS/Mails" href="../images/stories/paradise/pc/TB.jpg">
<img src="../images/stories/paradise/pc/thumb/TB.jpg" alt="MDA Pro" width="100" height="113" /></a></div>
 </div>
</div>
</div>

<div align="center">
<div style="display:table; border-collapse:collapse">
 <div style="display:table-row">
  <div style="display:table-cell; border: thin solid #FF0000; padding:5px"><a title="MDA SMS/Mails" href="../images/stories/paradise/pc/TB.jpg">
<img src="../images/stories/paradise/pc/thumb/TB.jpg" alt="MDA Pro" width="100" height="113" /></a></div>
 </div>
</div>
</div>

<div align="center">
<div style="display:table; border-collapse:collapse">
 <div style="display:table-row">
 <div style="display:table-cell; border: thin solid #FF0000; padding:5px"><a title="MDA SMS/Mails" href="../images/stories/paradise/pc/TB.jpg">
<img src="../images/stories/paradise/pc/thumb/TB.jpg" alt="MDA Pro" width="100" height="113" /></a></div>
  <div style="display:table-cell; border: thin solid #FF0000; padding:5px"><a title="MDA SMS/Mails" href="../images/stories/paradise/pc/TB.jpg">
<img src="../images/stories/paradise/pc/thumb/TB.jpg" alt="MDA Pro" width="100" height="113" /></a></div>
 </div>
</div>
</div>

Spricht was gegen diese art?

So kann ich nämlich auch Tabellen darstellen.

Und wenn ich wüsste wie ich 100% wide hinbekomme (also das sich das ding an mein Wordpress anpasst) und nen Zeilenumbruch, dann könnte ich damit wunderbar Text nebem Bildern platzieren...

also zb. so:

Code:

<div align="center">
<div style="display:table; border-collapse:collapse">
 <div style="display:table-row">
  <div style="display:table-cell; border: thin solid #FF0000; padding:5px; vertical-align:middle">ich</div>
  <div style="display:table-cell; border: thin solid #FF0000; padding:5px"><a title="MDA SMS/Mails" href="../images/stories/paradise/pc/TB.jpg">
<img src="../images/stories/paradise/pc/thumb/TB.jpg" alt="MDA Pro" width="100" height="113" /></a></div>
 </div>
 <div style="display:table-row">
  <div style="display:table-cell; border: thin solid #FF0000; padding:5px vertical-align:middle">ich</div>
  <div style="display:table-cell; border: thin solid #FF0000; padding:5px"><a title="MDA SMS/Mails" href="../images/stories/paradise/pc/TB.jpg">
<img src="../images/stories/paradise/pc/thumb/TB.jpg" alt="MDA Pro" width="100" height="113" /></a></div>
 </div>
</div>
</div>

**Boris** · 15.12.2006 12:22

Spricht was gegen diese art?

Jap. Das ist eine klassische DIV-Suppe und alles andere als gut geschriebenes HTML.

So kann ich nämlich auch Tabellen darstellen.

Wenn du eine klassische Tabelle brauchst für tabellarische Daten, dann soll man diese auch weiterhin dafür benutzen und nicht mit DIVs "nachbauen".

Lies dir das mal bissel durch:
http://www.vorsprungdurchwebstandard.../retro-coding/
http://css.fractatulum.net/sample/suppe/div_suppe1.htm

**Paradise** · 15.12.2006 12:47

Na das beruhigt

Da nimmt sich der Hobbybastler nichts gegenüber dem Profi.

Nur das is doof

Auf der nächsten Seite, welche es noch nicht aber in geraumer Zeit geben wird, soll gezeigt werden wie man auf verschachtelte <div> Elemente zur Anordnung von Grafikelementen verzichten kann.

Also auf gut deutsch verwende ich und viele andere zu viel div's. Bzw die div's werden als Tabellen ersatz missbraucht.
Das schlimme ist nur das man es auf etlichen beispielseiten so vorgemacht bekommt.

**IMBild** · 15.12.2006 17:58

ich denke das hier sollte dir weiter helfen. Für das Layout oben braucht du wenn du deine Bilder floatest höchsten ein div.

**Paradise** · 15.12.2006 19:10

Also so siehts aus

mit

Code:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Bildchen ordnen</title>
	<style type="text/css" media="screen">		
		.containingbox
		{
			width: 411px;								
		}		
		.floatleft
		{
			float: right;					
			margin: 2px;
			
		}
</style>
</head>
<body>
<div class="containingbox">
<img class="floatleft" src="../images/stories/paradise/pc/thumb/TB.jpg" alt="Bild 1" width="133" height="100" >
<img class="floatleft" src="../images/stories/paradise/pc/thumb/TB.jpg" alt="Bild 1" width="133" height="100" >
<img class="floatleft" src="../images/stories/paradise/pc/thumb/TB.jpg" alt="Bild 1" width="133" height="100" >
<img class="floatleft" src="../images/stories/paradise/pc/thumb/TB.jpg" alt="Bild 1" width="133" height="100" >
<img class="floatleft" src="../images/stories/paradise/pc/thumb/TB.jpg" alt="Bild 1" width="133" height="100" >
<img class="floatleft" src="../images/stories/paradise/pc/thumb/TB.jpg" alt="Bild 1" width="133" height="100" >
<img class="floatleft" src="../images/stories/paradise/pc/thumb/TB.jpg" alt="Bild 1" width="133" height="100" >
<img class="floatleft" src="../images/stories/paradise/pc/thumb/TB.jpg" alt="Bild 1" width="133" height="100" >
</div>
</body>
</html>

nur sollen in der mitte ja nur zwei sein und die mittig liegen.
Und wenn das ganze teil dann mittig im Content liegen soll muss doch aber bestimmt nochn div drum...

In meiner css ist ja auch schon sowas drin hab ich jetzt gesehen

Code:

/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}
/* End Images */

**IMBild** · 15.12.2006 19:24

is doch schon fast perfekt.
Wenn du nu noch dem zweiten Bild ein clear right mitgibst sollte das dritte umgebrochen werden.
Und zentrien kannst du indem du dem ersten und dem zweiten Bild einfach einen margin rechts bzw links mitgibst.
Dazu musst du natürlich den einzelnen Bildern verschiedene classen bzw id's mitgeben.

zur Startseite vom TP

Thema: Bilder anordnen mit DIV's?

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Bilder anordnen mit DIV's?

Aktive Benutzer

Aktive Benutzer