css layout

[juerg oehler]

hi

ich habe wieder etwas mit dem layout über css gespielt. die beispiele selfhtml habe ich auf meine problematik angepasst. mein ergebnis des beispiels css-layout hebt sich leicht vom selfhtml ab. zu sehen ist nur die Header box. unten angehängt würden links 'SideMenu' und rechts 'Content'.

bleiben wir im 'Header'. innerhalb dieses headers gibt es ein bild und rechts davon 'Banner' oben und 'HeaderMenu' unten. was mir fehlt, ist die gewissheit, dass wenn ich eine box definiere, alle in der box enthaltenen elemente innerhalb dieser box liegen. wenn ich das bild mit float:left ausstatte, beginnen die nachfolgenden elemente links von diesem bild. das beispiel zeigt was anderes. wenn wir jedoch alle div mit min-width:1px; ausstatten zeigt wenigstens der ie7 das erwartete ergebnis. das ist kein votum für ie. vielmehr  interpretiere ich daraus fehlende funktionalität im standard css. jedenfalls kann ich die textelemente strukturiert beschreiben. jeder der postscript kennt, weiss auch, dass es so funktionieren kann.

für mich stellt sich die frage, wie ich das beispiel style nach standard www.w3c.org ergänzen muss, damit das vergleichsweise einfache layout richtig dargestellt wird. nochmals innerhalb eines div-blocks 1 bild und rechts davon 2 elemente.

ist es überhaupt möglich, elemente in verschachtelten div-blöcken zu kontrollieren? float macht da probleme, da hierdurch anscheinend die elemente aus dem fluss genommen werden. was sind die alternativen? display:inline oder table?

nebenbei habe ich verschiedene css dateien von 'dynamischen' seiten untersucht. alle verwenden absolute positionierungen der divs oder tabellen. warum?

ich möchte gerne nach dem boxmodell div einsetzen. macht sinn, wenn es analog postscript verlässlich ist. ich hasse experimentelle informatik: mal schauen, was da raus kommt. dabei habe ich keine probleme mit browsern, welche den standard nicht unterstützen. was ist die referenzimplementierung des css-standardisierungs gremium?

have fun
jürg

[juerg oehler]

Sorry Typo Fehler in url.

[Ingo Turski]

Hi,

float macht da probleme, da hierdurch anscheinend die elemente aus dem fluss genommen werden.

streiche "anscheinend". Es ist so definiert und wenn Du das SELFHTML-Kapitel ganz durchgesehen hättest, wüsstest Du auch, dass der Fluss über ein Element mit der Eigenschaft "clear" wieder hergestellt werden kann.

nebenbei habe ich verschiedene css dateien von 'dynamischen' seiten untersucht. alle verwenden absolute positionierungen der divs oder tabellen. warum?

Was verstehst Du in diesem zusammenhang unter "dynamisch"? Wenn Du eine bei :hover angezeigte Subnavigation meinst: hierzu ist absolute Positionierung erforderlich, wenn sich das Hauptmenü dabei nicht ändern soll.

freundliche Grüße
Ingo

[suit]

ich ignorier mal dein gebrabbel und beziehe mich nur auf den letzten satz:

referenz ist hier nachzulesen
http://www.w3.org/TR/CSS21/

aber die referenz spiel keine rolle, wenn man nicht versteht was man tut

du musst zuallererst aufhören linear zu denken

eine seite besteht nicht aus

header, inhalt und footer

das menu ist nicht im header

auch wenn ein menu visuell im header ist, gehört das ding dort nicht zwangsläufig hin

schau dir den quelltext von wikipedia.org an, das sollte einiges erklären (aber auch viele dinge, die man so besser nicht machen sollte)

schritt 1)
design machen (ungeachtet des codes, einfach ignorieren und nur das design machen - den designer nicht über html nachdenken lassen)

schritt 2)
inhalt definieren, wie sieht der aus (das dokument, nicht das design!), eine struktur dafür überlegen

seitenkopf
  überschrift
    text
    zwischenüberschrift
      überschrift
    text text
navigation
suche
fusszeile

inhalt zuerst, megazeug wie menu und suche usw irgendwo hinten anstellen

schritt 3)
jetzt darüber nachdenken, wie das zugehörige stylesheet aussehen kann/wird und bei bedarf gruppierende container ergänzen um alles richtig zu positionieren (und damit ist jetzt nicht position: absolute gemeint)

du siehst also, es gibt keine gewissheit

auch wenn das menu augescheinlich dann "im" header liegt, muss es nichtmal entfernt in der nähe eines elements sein, dass header heisst geschweige denn darin sein

[Ingo Turski]

Hi,

um alles richtig zu positionieren (und damit ist jetzt nicht position: absolute gemeint)

»»

auch wenn das menu augescheinlich dann "im" header liegt, muss es nichtmal entfernt in der nähe eines elements sein, dass header heisst geschweige denn darin sein

dann allerdings kommt man um absolute Positionierung leider nicht herum.

freundliche Grüße
Ingo

[suit]

dann allerdings kommt man um absolute Positionierung leider nicht herum.

die ist auch nicht verboten, nur sollte man sie weise einsetzen - und absolute positionierung ist eben auch relativ ;) in % oder em angegeben lässt sich damit auch in liquiden layouts viel anstellen

[ChrisB]

Hi,

dann allerdings kommt man um absolute Positionierung leider nicht herum.

die ist auch nicht verboten, nur sollte man sie weise einsetzen - und absolute positionierung ist eben auch relativ ;) in % oder em angegeben lässt sich damit auch in liquiden layouts viel anstellen

Aber eben doch nur begrenzt ... wenn du das, wie es hier gerade in Rede steht, benutzen wolltest, um ein am Ende des Quelltext notiertes Menue wieder "nach oben" zu bekommen, so als ob es sich dort im ganz normalen Fluss befaende - dann muesstest du schon *sehr* genau wissen, wie hoch es letztendlich dargestellt wird, wenn der "nachfolgende" Inhalt per margin/padding auf Abstand gehalten werden soll, ohne mit diesem Abstand zu grosszuegig zu sein, und gleichzeitig aber auch keine Ueberlagerung bei Schriftgroessenveraenderung etc. zu riskieren.

MfG ChrisB

[suit]

Aber eben doch nur begrenzt ... wenn du das, wie es hier gerade in Rede steht, benutzen wolltest, um ein am Ende des Quelltext notiertes Menue wieder "nach oben" zu bekommen, so als ob es sich dort im ganz normalen Fluss befaende - dann muesstest du schon *sehr* genau wissen, wie hoch es letztendlich dargestellt wird, wenn der "nachfolgende" Inhalt per margin/padding auf Abstand gehalten werden soll, ohne mit diesem Abstand zu grosszuegig zu sein, und gleichzeitig aber auch keine Ueberlagerung bei Schriftgroessenveraenderung etc. zu riskieren.

bei horizontalen klappmenus funktioniert ad ganze gut - natürlich gibts ausnahmen aber es gibt für fast jedes problem eine css-taugliche lösung

natürlich ist nicht alles möglich

bei festen pixellayouts (wie sie von vielen designern immer noch geliefert werden) ist diese methode aber extrem praktisch und vor allem barrierearm

ich würde durchdrehen, wenn mir mein screenreader permanent 245 menupunkte der hauptmenufürhung vorliest, bevor ich zum inhalt komme :D