CSS - liquid layout frage

[micr0]

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

 

[Samuelll]

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.

 

[micr0]

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

 

[cebito]

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.

 

[Samuelll]

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 !

 

[micr0]

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!

 

[cebito]

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

 

[Samuelll]

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 !

 

[micr0]

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!

 

[cebito]

AW: CSS - liquid layout frage

schau dir doch mal yaml.de an... und analysiere die Beispiele...

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

 

[Lobster1956]

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

 

[micr0]

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!

 

[s4f]

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 !

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

 

[freejay]

AW: CSS - liquid layout frage

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

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

 

[cebito]

AW: CSS - liquid layout frage

Ein leeres div zum clearen ist keine schöne und vor allem wohl eine unnötig komplizierte Lösung

hmmm, und ein <br> ist besser? Schau dir mal den Link oben an!