HTML Frage: Unterschiedlich grosse divs nebeneinanders

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
Post Reply
Sepp
Forum Members
Forum Members
Posts: 38
Joined: Thu Jan 28, 2010 2:43 pm
Location: Bern, Switzerland

HTML Frage: Unterschiedlich grosse divs nebeneinanders

Post by Sepp »

Hallo Ich habe eine frage die CMSMS nicht direkt betrifft sondern HTML / CSS.

Ich möchte ein Layout machen, in welchem div's nebeneinander stehen, die aber unterschiedlich lang sind.
Trotzdem möchte ich, das sich die div's immer schön einreihen und untereinander anschliessen. etwa so:
Image

Leider kriege ich das nicht wirklich hin. Die div's blieben am längsten div hängen und sie reihen sich nicht sauber ein.

Mittels display:inline-block und vertical-align bin ich immerhin meiner idee relativ nahe gekommen.
Image

Nur hätte ich eben auch noch gerne, das die div's nicht einfach so auf einer hühnerstange sitzen, sondern den leeren zwischenraum füllen und eben nicht auf einer horizontalen linie ausgerichtet sind.

Ist das überhaupt möglich? Ein beispiel wie ich das meine, findet sich hier: http://www.feixen.ch/x/
Die "eachpost" div, welche da verwendet wird, schliesst sich hier immer sauber an das linke und an das obere an und ich versteh einfach nicht wieso.

Ich hoffe das problem ist einigermassen verständlich.
Vielen dank für jede Hilfe
mike-r

Re: HTML Frage: Unterschiedlich grosse divs nebeneinanders

Post by mike-r »

Anhand Deiner Beschreibung ist doch das obere Beispiel genau was Du willst?
oder hast Du eine fortlaufende Struktur im Code, die Du auf Spalten aufteilen willst?
Also:
1 - 4 - 7 - 10
2 - 5 - 8 - 11
3 - 6 - 9 - 12
usw.?
Das geht so nicht wirklich, zumindest noch nicht.
Tip: http://www.css3.info/preview/multi-column-layout/

Solltest Du etwas anderes meinen?
Dejavu

Re: HTML Frage: Unterschiedlich grosse divs nebeneinanders

Post by Dejavu »

Diese Lösung geht leider nur mit CSS3 fähigen Browsern bzw Firefox. IE wird vor Version 7 (soweit ich weiss) komplett ausgespert und wird fehler machen.
Ich würde der webseite eine Feste größe geben.
Dazu würde ich dann Div Container einführen, welche Spalten Bilden mit fester Pixel größe und in diese dann die kleinen unterbringen somit hast du das Ziel erreicht - jedoch wird das sehr schwer dynamisch umzusetzten.
Ansonsten den Weg gehen wie bei deiner Beispielseite per Javascript

Code: Select all

<div id="maincontainer">
  <div id="1_col">
    <div>Inhalt</div>
    <div>Inhalt</div>
    <div>Inhalt</div>
  </div>
  <div id="2_col">
    <div>Inhalt</div>
    <div>Inhalt</div>
    <div>Inhalt</div>
  </div>
  <div id="3_col">
    <div>Inhalt</div>
    <div>Inhalt</div>
    <div>Inhalt</div>
  </div>

Last edited by Dejavu on Wed Nov 17, 2010 6:33 pm, edited 1 time in total.
Sepp
Forum Members
Forum Members
Posts: 38
Joined: Thu Jan 28, 2010 2:43 pm
Location: Bern, Switzerland

Re: HTML Frage: Unterschiedlich grosse divs nebeneinanders

Post by Sepp »

Mist. Dann geht das wohl nicht, wie soll man das dynamisch machen, wenn jede spalte ein eigenes div ist ??? :(
Dieses Grid-a-licious theme das bei der beispielseite verwendet wird gibts nur bei wordpress. Mag aber nicht zu wordpress wechseln.


Na egal. Danke für die Antworten. Dann muss ich wohl eher nochmal mein konzept überdenken.
Dejavu

Re: HTML Frage: Unterschiedlich grosse divs nebeneinanders

Post by Dejavu »

Evtl gibts eine Möglichkeit per JQuery oder anderen Java Scripts - der CSS ist das aufgrund des Verhalten der Boxes und der Vorgaben im Boxmodell nicht möglich, bzw. ich habe noch keine Art und Weise gesehen wie es mit CSS1 oder CSS2.0 gehen sollte
panthus

Re: HTML Frage: Unterschiedlich grosse divs nebeneinanders

Post by panthus »

Habe ich persönlich noch nicht versucht, aber sieht vielversprechend aus - jQuery Masonry:  http://desandro.com/resources/jquery-masonry/
Sepp
Forum Members
Forum Members
Posts: 38
Joined: Thu Jan 28, 2010 2:43 pm
Location: Bern, Switzerland

Re: HTML Frage: Unterschiedlich grosse divs nebeneinanders

Post by Sepp »

Hei danke. Das sieht genau so aus wie ich das brauche. Falls das was taugt, lasse ich es euch wissen. Hab leider noch nie was mit javaScript gemacht und keine ahnung davon, daher wirds wohl ein weilchen dauern.

Besten dank :)
Post Reply

Return to “Layout und Design”