Anzeige

CSS - liquid layout frage

CSS - liquid layout frage | PSD-Tutorials.de

Erstellt von micr0, 18.06.2010.

  1. micr0

    micr0 Aktives Mitglied

    Dabei seit:
    13.11.2009
    Beiträge:
    381
    Geschlecht:
    männlich
    CSS - liquid layout frage
    Hallo leute,
    ich habe schon einige quellen im Inet und auch hier im Forum durchgelesen aber wollte mal eine konkrete antwort zu einem flexiblem layout.

    1.width und height mit % angeben oder em? - Min-width aber mit Pixel definieren?!
    2.Schrifft eindeutig in em oder?
    3. Die spalten mit float definieren?

    Eine kurze antwort würde mir reichen, eventuell auch vorschläge.

    Dankee micr0
     
    #1      
  2. Samuelll

    Samuelll Aktives Mitglied

    Dabei seit:
    02.02.2009
    Beiträge:
    783
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    PSCS5, Typo3, Joomla, Contao
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    Ich für mich mag das nicht pauschalisieren.

    Weiten und Höhen (sofern nötig) gebe ich gern in EM an, weil Container mit der Schrift mitwachsen. Allerdings tue ich dies nicht wenn es Bilder im Design gibt, die sich nicht so gut mit EM verarbeiten lassen.
    In diesem Fall tendier ich durchaus dazu breiten oder die Höhen des Headers, wo direkt Bilder drin sitzen in px anzugeben.

    Für Schriften nutze ich eigentlich nur em.

    Pauschal gilt höchstens, dass man nicht so viel mischen soll. Das macht nur Probleme !

    Minimale Weiten nehme ich eigentlich nie. Ebensowenig schätze ich bildschrimfüllende Designs, da Layouts bildschrirmfüllend spätestens bei 22" hässlich sind. Weiterhin ist ab 100 Zeichen pro Teile auch das Lesen von Texten schwer und wird, soweit ich mich erinnere, eher nicht empfohlen.

    Spalten Floaten find ich gut und normal. Allerdings is das clearende Element immer "unnützer Ballast" (semantisch gesehen) den man mit sich herumschleppt. Allerdings ist er ja nötig um das Floaten zu beenden.

    Alternativ finde ich absolute oder relative Positionierung genau so interessant und nützlich.

    Edit : Da fehlte eine Passage.
     
    Zuletzt bearbeitet: 18.06.2010
    #2      
  3. micr0

    micr0 Aktives Mitglied

    Dabei seit:
    13.11.2009
    Beiträge:
    381
    Geschlecht:
    männlich
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    Deine meinung also,

    Kasten mit text in em, damit sie sich beide gemeinsam anpassen.
    Aber wenn ich ich sie in % angebe, dann passen sie sich doch auch an die bildschirmgröße an... zusammen mit der schrifft! oder?
    Wenn du mir positive oder negative argumente für % oder em sagen kannst.. verstehe den untershied nicht

    Bilder in px... wie ist das mit dem liquid layout dann.. das bild bleibt dann also in der gleichen größe, weil es eben als .jpeg mit px definiert ist oder?
    Einzig der text wird je nach auflösung unterschiedlich angezeigt oder?

    Wenn ich 3 spalten divs hab für ein 3 spaltiges layout kann ich ja IN den spalten absolut positionieren, da die absolute positionierung sich ja auf das elternelemnt bezieht, oder?

    danke für die schnelle antwort
     
    #3      
  4. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    Um fluides Design umzusetzen, empfiehlt es sich min- und maxwidth zu nutzen. Prozentangaben braucht es nicht, da sich der Container den benötigten Platz allein nimmt. Die Angaben dienen lediglich, die Nutzbarkeit der Seite zu garantieren (kleinste Größe um noch was zu erkennen bzw. größte Größe um die Lesbarkeit trotzdem noch zu garantieren). Feste Größen für z.B. die Navi sind ok. Für die Höhe brauchts überhaupt keine Angabe, divs verhalten sich da nicht anders als bei festen Designbreiten.
    Schriftangaben kannst du wie gewohnt benutzen, ob nun px, em oder pt, was dir liegt - nimm es, macht keinen Unterschied zu deinen vorherigen (starren) Designs.
    Spalten kannst du nicht nur, sondern solltest sie auch floaten, und wenn Samuell die clearenden Elemente als Ballast empfindet, alternativ aber gern absolut positioniert, dann hat er noch was zu lernen.
     
    #4      
  5. Samuelll

    Samuelll Aktives Mitglied

    Dabei seit:
    02.02.2009
    Beiträge:
    783
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    PSCS5, Typo3, Joomla, Contao
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    OFFTOPIC @ Cebito :

    Semantisch ist das clearende Div ballast der unnütze ist (Enhält ja keinen Inhalt, sonder ist nur für die Formatierung da). Das es nötig is um das Foating zu beenden weis ich.

    Alternativ könnte ich aber, statt zu floaten, soweit ich es verstanden habe, alle Div-Container relativ oder absolut zu einem umgebenden Container positionieren. Oder siehst du das anders ?

    Falls ja bitte ich um belehrung .. denn da kann ich wirklich noch was lernen.

    Habe bisher immer alles gefloatet, weil mir das besser liegt !
     
    #5      
  6. micr0

    micr0 Aktives Mitglied

    Dabei seit:
    13.11.2009
    Beiträge:
    381
    Geschlecht:
    männlich
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    @ cebito

    um kurz festzuhalten:
    keine % sondern wenn dann ems und px?
    max un min-width in pixel festlegen sont mit em.
    Keine Höhengangaben??.. Also mit auto defnieren?
    Ich benutze eig. auch immer float!
     
    #6      
  7. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    @samuell - wer sagt, das es einen zusätzlichen (leeren) div zum clearen braucht? Einschließen von Floats ohne zusätzliches Markup - easyclear
    @micr0 - Prozent- und feste Breiten vertragen sich nicht so gut miteinander, wie ich bereits sagte, bspw. die Navi fest machen (würde ja auch blöd aussehen, wenn die jetzt breiter wird), den content mit min- und maxwidth definieren, schon hast dein fluides Design. Und natürlich kannst du floaten, dafür ist das gedacht...
     
    #7      
  8. Samuelll

    Samuelll Aktives Mitglied

    Dabei seit:
    02.02.2009
    Beiträge:
    783
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    PSCS5, Typo3, Joomla, Contao
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    @ Cebito : Danke für diesen Text. Deutlich komplexer als ein überflüssiges Div. Bisher hatte ich das für mich immer verworfen, weil damit wieder eine Sonderbehandlung für meinen "Liebling", den IE nötig ist.

    Schade dass es noch keine Lösung gibt, die überall funktioniert und keine speziellösungen braucht !

    Auch wenn es easy heisst, so einfach ist es dann nun doch nicht !
     
    Zuletzt bearbeitet: 18.06.2010
    #8      
  9. micr0

    micr0 Aktives Mitglied

    Dabei seit:
    13.11.2009
    Beiträge:
    381
    Geschlecht:
    männlich
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    sorry für meine letzte frage...

    also soll ich nur min-width und max-witdth angeben wodurch automatisch ein felxibles layout erzeugt wird. Ist es da egal ob ich diese dann mit px oder em definiere?

    Wenn ich jetzt ein 3spaltiges layout machen würde.. dann würde ich 3 divs mit 33,3% machen oder 20% 60% 20%...
    Wie soll ich das mit min und max width angehen???

    sorry für die nachfrage... aber ich will das endlich geklärt haben, da mich das schön länger beschäftigt. Und weil hier die Checker sind, dann will ich das auch genauso checken! nicht nur einfach machen!!

    danke nochmals!
     
    #9      
  10. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    Das ist so gut wie ein Startseitenlink, bissl genauer könntest schon werden! Nicht jeder weiß was damit anzufangen.
     
    #10      
  11. Lobster1956

    Lobster1956 ein Hamburger im Erzgebirge Kreativ-Flatrate-User

    Dabei seit:
    24.03.2008
    Beiträge:
    231
    Geschlecht:
    männlich
    Ort:
    Thalheim
    Software:
    Designsuite CS5
    Kameratyp:
    Olympus E-520
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    natürlich ist das die Startseite...
    und gleich in der Mitte findet sich der Link zu den Layoutbeispielen...
    YAML ist ein CSS Framework gerade für liquid layouts...
    und den Eistieg dazu findet man halt am besten über die Startseite... dokus etc...
    aber wenn es denn sein soll auch gerne einen deeplink gleich zu den Beispielen,
    Table Of Contents - YAML | Examples
    ein Anfänger ist aber besser bedient sich erst einmal mit der Doku vertraut zu machen (ich habe so CSS kennen und lieben gelernt)... also besser die Startseite

    ich hoffe das ist nun besser so...
     
    #11      
  12. micr0

    micr0 Aktives Mitglied

    Dabei seit:
    13.11.2009
    Beiträge:
    381
    Geschlecht:
    männlich
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    ohhh klasse link das mit yaml!!! muss mich da durcharbeiten!! Aber ist ja alles sehr genua erklärt und mit vielen beispielen!

    Vielen Dank für eure antworten :)

    gruss micr0!
     
    #12      
  13. s4f

    s4f Aktives Mitglied

    Dabei seit:
    14.06.2010
    Beiträge:
    250
    Geschlecht:
    männlich
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    es muss nicht immer ein div sein.
    nimm doch eine <hr>, schon hast du weniger schreibarbeit.
     
    #13      
  14. freejay

    freejay Noch nicht viel geschrieben

    Dabei seit:
    12.03.2010
    Beiträge:
    19
    Geschlecht:
    männlich
    Software:
    Adobe Fireworks CS4, Adobe Photoshop CS4
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    Richtig, sehr guter Vorschlag. So kenne ich es auch, bloss mit Verwendung von einem <br> mit entsprechender Klasse im css zum clearen.

    Ein leeres div zum clearen ist keine schöne und vor allem wohl eine unnötig komplizierte Lösung :p
     
    #14      
  15. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    CSS - liquid layout frage
    AW: CSS - liquid layout frage

    hmmm, und ein <br> ist besser? :rolleyes: Schau dir mal den Link oben an!
     
    #15      
Seobility SEO Tool
x
×
×