Königsdisziplin: Div's nebeneinander setzen

[black-hat]

Hallo, ich habe ein kleines problem - und zwar folgendes:

Fazits:
- Flexibles Layout (960min-width, 1200max-width)
- Vordefinierter Bereich für eine Gallerieübersicht

Was ist los?
Es handelt sich um eine Gallerieübersicht, die PHP gesteuert wird.
Maximal 12 gallerieübersichten sind in einer Übersicht möglich d.h:

3 divs, li's (oder weiß der geier was) sollen nebeinander sein, 4 zeilen sollen es maximal geben.

DER ABSTAND, zwischenraum oder die Elemente an sich, passen sich jeweils der Größe des Browserfensters an. Ein Element, hat die maximalbreite von 215px.

nun gut, liegt doch nache, dass man dafür display:table / display:table-cell anwendet. problem:

alle Elemente, sind untereinander im Quelltext angeordnet, was also im HTML nebeneinander wäre. Das Vordefinierte Feld, wird überschritten, genauso siehts mit der li-technik mit "justify" aus.

Bei einer Manuellen Einstellung wie float left (für den linken bereich), float right (für rechts) und margin: 0 auto, für die mitte jeweils pro zeile, ist nicht nru die reihnfolge etwas problematisch, sondern auch die tatsache, dass bei nicht aufüllung einer zeil (wenn also nur 1 oder 2 elemente in eine rzeile vorhanden sind), zerreißt es das layout.

Die Box-Display-Methode ist nicht kompatibel genug. Da zickt der IE einfach zu arg.

Was gibt es noch für wege, um 3divs nebeneinander zu setzen jedoch im quellcode einfach nur untereinander zu schreiben?

 

[tr4ze]

AW: Königsdisziplin: Div's nebeneinander setzen

http://little-boxes.de/lb1/14-containing-floats.html

 

[black-hat]

AW: Königsdisziplin: Div's nebeneinander setzen

so sehen die einzelnen elemente aus, also links ein bild, rechts ein text. und davon halt 3 stück in der reihe... es darf ja halt keinen direkten umbruch im quellcode geben.

:/ ich bin halt auf der suche nach einer technik, wo ich im quellcode alles untereinander schreiben kann und dann automatisch sich ein umbruch ergibt, nach dem der maximale platz erreicht wurde.

also:
-> quellcode version
<tag><img-tag>Bild</img> <p>text</p></tag>
<tag><img-tag>Bild</img> <p>text</p></tag>
<tag><img-tag>Bild</img> <p>text</p></tag>
<tag><img-tag>Bild</img> <p>text</p></tag>
<tag><img-tag>Bild</img> <p>text</p></tag>
<tag><img-tag>Bild</img> <p>text</p></tag>
<tag><img-tag>Bild</img> <p>text</p></tag>

und im browser soll es dann so aussehen:

[] Text [] Text [] Text
[] Text [] Text [] Text
[] Text

(GANZ EINFACH DARGESTELLT)

mit floaten, dass was ich gemacht habe, wurde ja bereits geschrieben....

 

[cebito]

AW: Königsdisziplin: Div's nebeneinander setzen

Schon mal an Prozentangaben gedacht?

 

[black-hat]

AW: Königsdisziplin: Div's nebeneinander setzen

naja, ich wüsste so jetzt nicht, wie die eingesetzt werden sollten, da ich ja so gerechnet habe, dass egal welche größe der browser hat, nur maximal 3 elemente in einer zeile sein sollen, von daher, wird der abstand ja sich automatisch ergeben und sich anpassen,wa sbei display:table halt sehr schön zu sehen ist.

 

[tr4ze]

AW: Königsdisziplin: Div's nebeneinander setzen

Hmmm, warum denkst du so kompliziert?

<ul id="gallery">
  <li class="item"><img src="#"><p>Bild</p></li>
  <li class="item"><img src="#"><p>Bild</p></li>
 <li class="item"><img src="#"><p>Bild</p></li>
</ul>

#gallery {
  position: absolute;
  width: 90%;
  margin: 0 auto;
  clear: both;
}
.item {
  position: relative;
  width: 33%;
  float: left;
}

 

[black-hat]

AW: Königsdisziplin: Div's nebeneinander setzen

das geht leider nicht, weil der listenpunkt, eine breite von 215px hat und somit die %-Werte nicht einsatzbar sind.

 

[tr4ze]

AW: Königsdisziplin: Div's nebeneinander setzen

... und wenn du die 215px nicht auf denn <li> anwendest sondern auf einen <Div> der deinen eigentlichen Inhalt umschließt.

... bei einem flexiblen Layout kommst du um % angaben nicht drumherum.

 

[black-hat]

AW: Königsdisziplin: Div's nebeneinander setzen

nun ja, das habe ich auch nie gesagt, ich selber habe ja auch mit % angaben arbeiten müssen.

jedoch, verstehe ich jetzt nicht den code nicht.

wenn ich um den ul ein div habe, und darüber halt mein content ist. welchen sinn hat es dann?

oder meinst du sowas wie:
<content>
<div>
<ul>
<li> <IMG><p> text </p></li>
</ul>
</div>
</content>

 

[tr4ze]

AW: Königsdisziplin: Div's nebeneinander setzen

nein mit Content meine ich dein Bild mit der Beschreibung.
also

<li>
  <div class="content">
  <img>
  <p></p>
  </div>
</li>

 

[black-hat]

AW: Königsdisziplin: Div's nebeneinander setzen

nein das geht leider nicht. der content kann nicht in einem li sein... mein aktueller ("falscher") quellcode beim content sieht so aus:

CSS

div#content {
margin : 50px 71px 0 71px;
padding-bottom : 15px;
min-height : 500px;
}

#content p, br {
padding-bottom : 15px;
}

.content_navigation {
width : 150px;
padding-right : 15px;
height : 100%;
float : left;
display : block;
}

.content_navigation ul li ul li {
padding-left : 15px;
}

.content_fotografie_rubrik,
.content_fotografie_rubrik_aktuelle_gallerien,
.content_rubrik_uebersicht,
.content_rubrik_uebersicht_inhalt,
.content_rubrik_uebersicht_inhalt_impressum,
.content_rubrik_uebersicht_inhalt_buchen,
.content_rubrik_uebersicht_inhalt_kalender,
.content_rubrik_uebersicht_inhalt_termine {
margin-left : 165px !important ;
margin-right : 0;
height : 100%;
}

.content_rubrik_navigation {
display : block;
}

.content_rubrik_navigation_links {
float : left;
}

.content_rubrik_navigation_rechts {
float : right;
}

.content_rubrik_navigation_mitte {
margin : 0 auto;
text-align : center;
}

.content_rubrik_uebersicht_liste_links {
float : left;
}

.content_rubrik_uebersicht_liste_mitte {
margin : 0 auto;
display : table;
}

.content_rubrik_uebersicht_liste_rechts {
float : right;
}

.content_rubrik_uebersicht ul li IMG {
float : left;
padding-right : 10px;
}

HTML

<div id="content">
<div class="content_navigation">
<ul>
<li>aktuelle Gallerien</li>
<li>Events
<ul>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</ul>
</li>
<li>Portraits</li>
<li>Termine</li>
<li>Buchen</li>
</ul>
</div>

<div class="content_rubrik_uebersicht">

<div class="content_rubrik_navigation">
<div class="content_rubrik_navigation_links">
&laquo; [MENÜPUNKT]
</div>

<div class="content_rubrik_navigation_rechts">
[MENÜPUNKT] &raquo;
</div>

<div class="content_rubrik_navigation_mitte">
1|2
</div>
</div>
<br>
<ul>
<!-- erste Reihe -->
<li class="content_rubrik_uebersicht_liste_links">
<img src="img/content/fotografie/events/2013/2013-06-31_eventname2013/2013-06-31_eventname2013_gallerie_t.jpg">
<p>2013-12-08: <br>Kirschblütenfest Berlin</p>
</li>

<li class="content_rubrik_uebersicht_liste_rechts">
<img src="img/content/fotografie/events/2013/2013-06-31_eventname2013/2013-06-31_eventname2013_gallerie_t.jpg">
<p>2013-12-08: Kirschblütenfest Berlin</p>
</li>

<li class="content_rubrik_uebersicht_liste_mitte">
<img src="img/content/fotografie/events/2013/2013-06-31_eventname2013/2013-06-31_eventname2013_gallerie_t.jpg">
<p>2013-12-08: Kirschblütenfest Berlin</p>
</li>

<!-- zweite Reihe -->
<li class="content_rubrik_uebersicht_liste_links">
<img src="img/content/fotografie/events/2013/2013-06-31_eventname2013/2013-06-31_eventname2013_gallerie_t.jpg">
<p>2013-12-08: Kirschblütenfest Berlin</p>
</li>

<li class="content_rubrik_uebersicht_liste_rechts">
<img src="img/content/fotografie/events/2013/2013-06-31_eventname2013/2013-06-31_eventname2013_gallerie_t.jpg">
<p>2013-12-08: Kirschblütenfest Berlin</p>
</li>

<li class="content_rubrik_uebersicht_liste_mitte">
<img src="img/content/fotografie/events/2013/2013-06-31_eventname2013/2013-06-31_eventname2013_gallerie_t.jpg">
<p>2013-12-08: Kirschblütenfest Berlin</p>
</li>

<!-- dritte Reihe -->
<li class="content_rubrik_uebersicht_liste_links">
<img src="img/content/fotografie/events/2013/2013-06-31_eventname2013/2013-06-31_eventname2013_gallerie_t.jpg">
<p>2013-12-08: Kirschblütenfest Berlin</p>
</li>

<li class="content_rubrik_uebersicht_liste_rechts">
<img src="img/content/fotografie/events/2013/2013-06-31_eventname2013/2013-06-31_eventname2013_gallerie_t.jpg">
<p>2013-12-08: Kirschblütenfest Berlin</p>
</li>

<li class="content_rubrik_uebersicht_liste_mitte">
<img src="img/content/fotografie/events/2013/2013-06-31_eventname2013/2013-06-31_eventname2013_gallerie_t.jpg">
<p>2013-12-08: Kirschblütenfest Berlin</p>
</li>

<!-- vierte Reihe -->
<li class="content_rubrik_uebersicht_liste_links">
<img src="img/content/fotografie/events/2013/2013-06-31_eventname2013/2013-06-31_eventname2013_gallerie_t.jpg">
<p>2013-12-08: Kirschblütenfest Berlin</p>
</li>

<li class="content_rubrik_uebersicht_liste_rechts">
<img src="img/content/fotografie/events/2013/2013-06-31_eventname2013/2013-06-31_eventname2013_gallerie_t.jpg">
<p>2013-12-08: Kirschblütenfest Berlin</p>
</li>

<li class="content_rubrik_uebersicht_liste_mitte">
<img src="img/content/fotografie/events/2013/2013-06-31_eventname2013/2013-06-31_eventname2013_gallerie_t.jpg">
<p>2013-12-08: Kirschblütenfest Berlin</p>
</li>
</ul>


</div>

</div> <!-- Content END -->

man sieht also, dass ich diese li-technik mit links rechts mitte gerne anwende. das funktioniert aber NUR, wenn auch die angegebenen Listenpunkte voll ausgenutzt werden.



ansonsten kommen z.b. solche darstellungsfehler:



ich glaube, man versteht nun, warum ich unbedingt eine technik brauche, wo die reihnfolge ganz normal 123 ist...

 

[cebito]

AW: Königsdisziplin: Div's nebeneinander setzen

Du willst also immer eine gleichmäßige Verteilung? Das erreichst du mit Blocksatz...

http://jsfiddle.net/YEX87/

 

[black-hat]

AW: Königsdisziplin: Div's nebeneinander setzen

also der Ansatz ist super... nur harkt das bei manchen größen...
wenn ich es auf min-width:560px; setze, wird die untere reihe gar nicht angesprochen...

 

[black-hat]

AW: Königsdisziplin: Div's nebeneinander setzen

Ok, mein fehler, ich habe das selbst gelöst.
Ich habe vergessen, beim letzten li ein zwischenraum (neue klasse, "zeilenumbruch, padding-left: 100%, height: 0px) hinzuzufügen vielen dank <3