Antworten auf deine Fragen:
Neues Thema erstellen

Königsdisziplin: Div's nebeneinander setzen

black-hat

Aktives Mitglied

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?
 

black-hat

Aktives Mitglied

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....
 

black-hat

Aktives Mitglied

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

Mod | Forum

Teammitglied
PSD Beta Team
AW: Königsdisziplin: Div's nebeneinander setzen

Hmmm, warum denkst du so kompliziert?


HTML:
<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>
Code:
#gallery {
  position: absolute;
  width: 90%;
  margin: 0 auto;
  clear: both;
}
.item {
  position: relative;
  width: 33%;
  float: left;
}
 

black-hat

Aktives Mitglied

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

Mod | Forum

Teammitglied
PSD Beta Team
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

Aktives Mitglied

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

Mod | Forum

Teammitglied
PSD Beta Team
AW: Königsdisziplin: Div's nebeneinander setzen

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

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

black-hat

Aktives Mitglied

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...
 

black-hat

Aktives Mitglied

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

Aktives Mitglied

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
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.527
Neuestes Mitglied
Christian Eidelloth
Oben