1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

2-Spalten mit float:left

Dieses Thema im Forum "PHP & Co." wurde erstellt von C64, 12.07.09.

  1. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    Hallo zusammen,

    ich suche schon eine ganze Weile nach einer Lösung für ein gutes 2-Spalten-Layout wie es auf dem Bild "Zielform" zu sehen ist.

    Mir ist klar, dass float:left logischerweise die divs so darstellt wie auf dem Bild "Aktuell". Aber ich suche irgendeinen Trick für das Layout "Zielform".
    Das Problem ist, dass die divs aus einer Datenbank gelesen werden und unterschiedlich lang sind. In die Datenbank werden dann immer mal wieder neue divs reinkommen bzw. alte rausfallen. Daher kann ich auch nicht einfach sagen, ich mache zwei Spalten-divs nebeneinander und lasse dann erst die linke und dann die rechte Spalte füllen. Macht wenig Sinn;)

    [​IMG]

    Kennt irgendjemand einen workaround oder hat eine Idee, wie ich das evtl. anders lösen könnte?

    Edit: Der letzte div darf natürlich auch rechts liegen, weil er ja noch an einen anderen Div anstoßen würde... der ist mir aber relativ egal, ob links oder rechts;)
     
  2. Nathea

    Nathea Admin
    AT Administration

    Dabei seit:
    29.08.04
    Beiträge:
    13.547
    Vielleicht hilft Dir das: Klick
     
    C64 gefällt das.
  3. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    Leider nicht.
    Er hat hier dann ne feste Größe und ne klare Aufteilung was links und rechts in den Div kommt.
    Bei mir sollen sich alle Artikel gleichmäßig auf beide Spalten aufteilen, so dass beide Spalten in etwa gleich lang sind. Deshalb kann ich nicht einfach per php jeden ungeraden Beitrag links und jeden geraden rechts reinschieben, weil evtl. sonst eine Spalte sehr lang ist und die andere nicht so lang (aufgrund der unterschiedlichen Beitragslänge).
    Ich glaube inzwischen, es gibt dafür keine einfache Lösung;)
    Vielleicht muss ich es doch komplett anders umsetzen...

    Hab jetzt so viel CO2 produziert, weil ich so viele verschiedene Formulierungen an Google geschickt hab. Ne Lösung hab ich aber leider nicht gefunden...
     
  4. Salzi

    Salzi Prinzenapfel

    Dabei seit:
    29.08.06
    Beiträge:
    555
    naja die Aufteilung welche links und welche rechts kommt kannst du ja quasi auch berechnen. Sortiere dein Content nach Zeichenanzahl (php - strlen). Anschliessend kannst du ja eine Funktion schreiben, welche ermittelt wie der Content am besten ausgegeben werden soll. Das ganze funktioniert natürlich nur, wenn dein Content reinen Text enthält. Sobald irgendwelcher Code (HTML, BB-Code usw.) drin ist, kannst du natürlich nicht auf die Anzahl Zeichen gehen (ausser du würdest die noch explizit aussortieren).

    Gruss
     
    C64 gefällt das.
  5. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    Gut, das wäre dann schon echt kompliziert, da gelegentlich auch Bilder drin sind;) Die müsste ich dann auch noch mit einberechnen lassen (und das kann ich ehrlich gesagt auch nicht und würde mir zu lange dauern, bis ich mich darüber belesen habe;) ).
    Ich löse es anders, wenn nicht noch irgendwer eine CSS-Möglichkeit sieht;)
     
  6. Salzi

    Salzi Prinzenapfel

    Dabei seit:
    29.08.06
    Beiträge:
    555
    Bilder sind doch noch viel einfacher zu rechnen als Text. Einfach per getimagesize die Grösser ermitteln und schon hast du sogar eine Angabe in Pixel wie hoch das Ding ist.

     
  7. Macropolis

    Macropolis Tokyo Rose

    Dabei seit:
    27.02.08
    Beiträge:
    68
    Schau Dir mal das CSS-Framework YAML an. Da solltest Du fündig werden.

    HTH,

    Macropolis
     
  8. Kowalski

    Kowalski Bismarckapfel

    Dabei seit:
    14.11.08
    Beiträge:
    142
    Mit JavaScript oder Java müsste das doch zu regeln sein.
     
  9. Oregano

    Oregano Bismarckapfel

    Dabei seit:
    20.02.09
    Beiträge:
    142
    Mal daran gedacht zwei Spalten zu machen und in jeder der zwei Spalten die Elemente nicht zu floaten? Dann musst du nur vorher jedem Element sagen ob es sich links oder rechts einreihen soll. Ist auf jeden Fall weniger aufwändig und führt im Endeffekt, rein Visuell zum selben Ergebnis.
     
  10. maery

    maery Cox Orange

    Dabei seit:
    04.02.09
    Beiträge:
    98
    ich bin damit immer sehr gut gefahren: http://960.gs/ oder natürlich auch mit yaml, wobei man bei letzterem denke ich mehr einarbeitungszeit braucht.

    liebe grüße
     
  11. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    Ähm, ja:p
    Und dann hab ich das Problem, dass ich eben die Höhe der einzelnen Einträge vorher berechnen muss, um die optimale Verteilung der Container auf beide Spalten zu bekommen. Ob ich in den Spalten dann floate oder nicht ist ja relativ egal:p
    Aber danke;)

    @maery: Ich weiß zwar gerade nicht, wie mir dein Link bei meinem Problem helfen soll, aber generell sieht die Seite interessant aus;) Werde ich auf jeden Fall mal durchschauen!
     
  12. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    C64 gefällt das.
  13. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    Ich liebe smashingmagazine.com :)

    Den Artikel hatte ich allerdings noch gar nicht wahrgenommen - danke dir für den Link!

    Werde ihn mir auch auf jeden Fall mal zu Gemüte führen, selbst wenn er mir bei meinem konkreten Problem nicht helfen sollte;)
    Aber jetzt erst mal lesen und dann weiterschauen;)

    Edit: Na no. 4 "jQuery Masonry" schaut doch auf den ersten Blick schon mal in etwa so aus, als ob es mir konkret helfen könnte:) Heut abend wird gecoded:)
     
  14. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Masonry meinte ich auch ;)!

    LG und viel Glück,
    Max
     
  15. klausimausi

    klausimausi deaktivierter Benutzer

    Dabei seit:
    05.01.04
    Beiträge:
    836
    Hey, vielen Dank für den Link zu 960! Ist ja höchst cool.
    Und da ein kleines Redesign meiner Site eh ansteht,
    auch eine prima Inspiration :)


    Gruß

    Klaus
     
  16. maery

    maery Cox Orange

    Dabei seit:
    04.02.09
    Beiträge:
    98
    dann habe ich den falschen link kopiert. sorry. :)

    edit: also ich hab es mir noch mal angesehen, aber über das verlinkte grid könnte man schon darauf hin abzielen, die css so anzulegen, dass die grids/kästen in einer angenehmen und vor allem ordentlichen art und weise über der seite verteilt sind - das ist ja genau das wohin die frage will, auch wenn ich jetzt nicht unbedingt das float problem anspreche.

    ich finde diese (grid) lösung(en) manchmal sauberer, als mit float zu arbeiten (da gibt es ja verschiedene varianten von). denn bei den floats schleichen sich immer gerne schnell fehler ein und man hängt und arbeitet dann die meiste zeit nur an selbigen.

    die fluid variante mit java script integration ist auch sehr ansprechend. http://www.designinfluences.com/fluid960gs/12/

    und by the way: das ist auch in css. ;) aber danke für den netten hinweis.
    [denkt] männer, püh [/denkt]
     
    #16 maery, 16.07.09
    Zuletzt bearbeitet: 16.07.09
  17. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    So, es ist 100%ig das, was ich gesucht habe:)
    Nur mag es meine Bilder nicht so recht, obwohl ich die Höhe explizit inline angegeben habe. Da werde ich heute abend wohl noch mal mit nem einfachen Beispiel starten müssen, ob es generell klappt, um es danach erst in meine Seite zu implementieren.
    Auf jeden Fall perfekt, weil ich sowieso jQuery einsetze und liebe:) ;)
     
  18. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Ich hab nicht gesagt das 960 Systeme schlecht sind. Ganz im Gegenteil, finde sie selbst genial und verwende die verlinkte Seite auch! Der Gedanke hinter diesen Grids ist aber nicht das CSS zu generieren als Template sondern um das eigentliche Layout besser zu strukturieren.

    Die Stylesheets die du hier generieren kannst verwenden auch floats...

    Code:
    .grid_1,
    .grid_2 {
    	display:inline;
    	float: left;
    	margin-left: 10px;
    	margin-right: 10px;
    }
    
    @C64 Freue mich, dass ich helfen konnte...

    LG,
    Max
     

Diese Seite empfehlen