css layout seite

[wahsaga]

Die Schwierigkeit mit striktem XML-Code ist schlicht und ergreifend das drakonische "fail on first" Error-Handling.

Das mag Noobs betreffend noch korrekt sein - aber für die gibt es ja die HTML-"Variante", in der bei HTML 5 sogar genauere Regeln und Vorgehensweisen für die Fehlerbehandlung enthalten sind.

Für Leute mit etwas Ahnung von der Materie mag ich das aber nicht gelten lassen, und erst recht nicht als "drakonisch" bezeichnen - wenn man in (Script-)Sprachen wie PHP, JavaScript, sonstwas programmiert, dann gibt's da auch keine "Fehlertoleranz" hinsichtlich der Syntax, sondern bei Verstössen schlicht und einfach einen Abbruch.

[hornet]

so jetzt habe ich ein bisserl was geändert.

verwende jetzt für die boxen rechts p.boxen{mehrmals} und p.infokasten{} also keine #box1, #box2, usw.... mehr.


den div container #boxenrechts verwende ich damit die boxen rechts immer schön untereinander verlaufen selbst wenn der linke textbereich kürzer ist.

Ein Problem hab ich jetzt mit der Navigation, liegt momentan ein einem div container. die Navigations leiste soll genau über dem weißen Streifen liegen. Jedoch gibts da eben Abweichungen in der Höhe beim Internetexplorer.
Mir ist bis jetzt noch keine Lösung eingefallen. Vielleicht mit dem Hintergundbild eine andere Lösung finden oder per Java script vielleicht die höhe um so und so viel pixel anpassen.


ach ja das gerüst ist hier zu sehen
http://members.chello.at/hornet/img/geruest.gif wobei die einzelnen rahmen ein eigener container darstellt

[wahsaga]

den div container #boxenrechts

Auch das, IDs/Klassen nach der derzeit gewünschten Darstellung benennen, solltest du nicht machen.
Der (leicht theoretische) Vorteil von CSS ist, dass du damit das Aussehen komplett verändern kannst, ohne das HTML anzufassen. Wenn #boxenrechts jetzt irgendwann mal nicht mehr rechts, sondern links angezeigt werden soll - dann wäre dieser Bezeichner plötzlich widersinnig und irreführend.

Deshalb: IDs/Klassen immer nach der Funktion/Bedeutung der jeweiligen Elemente benennen, nicht nach darstellerischen Gesichtspunkten.


Zu deinem Problem mit der Navigation kann man wenig sagen, so lange du nur ein Bild zeigst.

[mermshaus]

verwende jetzt für die boxen rechts p.boxen{mehrmals} und p.infokasten{} also keine #box1, #box2, usw.... mehr.

Was machst du, wenn du in einen der gestrichelt umrahmten Infokästen plötzlich mehrere Absätze eintragen willst? Oder zusätzlich eine Liste oder ein Bild? Nimm diese "Divteritis"/"Div-Suppe"-Artikel bloß nicht zu ernst.

Jedoch gibts da eben Abweichungen in der Höhe beim Internetexplorer.

Ich empfehle, sowas erst anzugehen, wenn das Layout in einem Browser, der korrekter rendert, fertig ist.

[wahsaga]

Was machst du, wenn du in einen der gestrichelt umrahmten Infokästen plötzlich mehrere Absätze eintragen willst? Oder zusätzlich eine Liste oder ein Bild? Nimm diese "Divteritis"/"Div-Suppe"-Artikel bloß nicht zu ernst.

Das eine hat wenig mit dem anderen zu tun. Hier gilt es natürlich auch, nicht im Eifer des Gefechts über's Ziel hinaus zu schiessen - DIVs sind nicht per se "böse".

Fliesstext gehört selbstverständlich in P-Elemente, ganz unabhängig von sämtlichen sonstigen Gegebenheiten und Bedingungen.
Dass mehrere solcher Absätze ggf. mit einem gruppierenden DIV zusammengefasst werden, steht auf einem anderen Blatt - das wiederum hat aber nichts mit DIV-Suppe zu tun.
Und wenn man schon so ein gruppierendes Element vorliegen hat, und seine Nachfahrenelemente gleichartig formatieren will, dann nutzt man natürlich auch im CSS entsprechende Selektoren, um dies zu erreichen - dann verpasst man nicht jedem P einzeln eine ID/Klasse, sondern dem gruppierenden DIV, und spricht die P-Elemente darin dann bspw. mit dem Nachfahrenselektor an, um sie gemeinsam zu formatieren.

[mermshaus]

Das eine hat wenig mit dem anderen zu tun.

Das stimmt. Aber genau dieser nicht bestehende Zusammenhang zwischen gruppierendem Rahmen-Div und falsch benanntem "Inhalts"-Tag (<div class="absatz"> statt <p>) wird leider immer mal wieder suggeriert. Wie auch in der hier im Thread verlinkten yatil-Übersetzung dieses Artikels (s. u.).

Deshalb schrieb ich das. Ansonsten volle Zustimmung.

Ein typisches Dokument, das im Div-Wahn erstellt wurde, könnte so aussehen:

<div id="wrapper">
<div id="container">
<div id="navigation">
<div id="navhead">
...
</div>
<div id="navcontent">
...
</div>
</div>
<div id="content">
<div class="panel">
...
</div>
<div class="panel">
...
</div>
</div>
</div>
</div>

Vielleicht könnte man folgende Faustregeln festhalten:

- Text sollte nie direkt in einem div-Tag stehen.
- Jedes div-Element sollte einen begründbaren Zweck erfüllen, der sich nicht sinnvoll auf seine Kindelemente übertragen lässt.

[hornet]

Was machst du, wenn du in einen der gestrichelt umrahmten Infokästen plötzlich mehrere Absätze eintragen willst? Oder zusätzlich eine Liste oder ein Bild? Nimm diese "Divteritis"/"Div-Suppe"-Artikel bloß nicht zu ernst.

verstehe schon was du meinst

Ich empfehle, sowas erst anzugehen, wenn das Layout in einem Browser, der korrekter rendert, fertig ist.

Nun ja das Layout so wie man es auf der Seite sieht ist fertig. nur sollte ich das mit der navigation nicht gebacken kriegen werd ich natürlich was ändern müssen. d.h. eigentlich hätte ich mir zuerst die navigationsleiste oben anschauen sollen.
ich dachte mir ich mache einfach mal zb nen div layer schmeiß die Navigationspunkte rein mach einen margin-top mit 200 pixel zb und die sache hat sich. nur hab ich dann festgestellt bzw hab ich beim erstellen der seite in photoshop nicht an das problem gedacht welches ich jetzt habe und zwar der Internetexplorer zieht mir ein paar pixel ab somit landen die Navi Punkte nicht genau über dem weißen Balken sondern oberhalb

nur zur info: der große gelbe kasten wird ein startbild welches ich geliefert bekomme.

[wahsaga]

ich dachte mir ich mache einfach mal zb nen div layer schmeiß die Navigationspunkte rein

Pfui! Aus! Nein!

Du wolltest doch keine DIV-Suppe kochen?
Dann pack die Navigation in eine Liste, und formatiere diese.

mach einen margin-top mit 200 pixel zb und die sache hat sich. nur hab ich dann festgestellt bzw hab ich beim erstellen der seite in photoshop nicht an das problem gedacht welches ich jetzt habe und zwar der Internetexplorer zieht mir ein paar pixel ab somit landen die Navi Punkte nicht genau über dem weißen Balken sondern oberhalb

Tja, pixelgenau und browserübergreifend ist nicht immer so trivial.

Da müsste man jetzt untersuchen, wo der IE die paar Pixel weniger her nimmt und warum.
Oder man positioniert bspw. die Navigation absolut, das ist in so einem Falle durchaus vertretbar und vermutlich leichter zu handhaben.

nur zur info: der große gelbe kasten wird ein startbild welches ich geliefert bekomme.

Ist damit etwas gemeint, was wirklich Inhalt transportiert?
Wenn nicht, dann hast du mit diesem Layout schon mal eine komplette Bildschirmhöhe verschwendet, die ich erst mal herunterscrollen muss, um zum eigentlichen Inhalt zu gelangen - das wäre auch nicht optimal.

[hornet]

Pfui! Aus! Nein!

Du wolltest doch keine DIV-Suppe kochen?
Dann pack die Navigation in eine Liste, und formatiere diese.

*gg* das war zumindest mein Plan, den hab ich jetzt eh geändert und überlege was neues

Tja, pixelgenau und browserübergreifend ist nicht immer so trivial.

Da müsste man jetzt untersuchen, wo der IE die paar Pixel weniger her nimmt und warum.
Oder man positioniert bspw. die Navigation absolut, das ist in so einem Falle durchaus vertretbar und vermutlich leichter zu handhaben.

du meinst mit Position:absolute arbeiten. das wäre ne Möglichkeit.

Ist damit etwas gemeint, was wirklich Inhalt transportiert?
Wenn nicht, dann hast du mit diesem Layout schon mal eine komplette Bildschirmhöhe verschwendet, die ich erst mal herunterscrollen muss, um zum eigentlichen Inhalt zu gelangen - das wäre auch nicht optimal.

das Startbild wird fix sein, ist zumindest bis jetzt so angedacht gewesen. wird immer gegen ein neues ausgetauscht, drunter sollen dann kurze news stehen in diesen Blöcken.
Vom Sichtbereich her ist es nicht optimal ich weiß. Man könnte die Grafik oben rechts (Flattermann) kleiner machen ab da muß ich meinen Freund erst davon überzeugen *gg*

dann werd ich mich mal wieder an die Arbeit machen und an der Seite rumpfuschen*gg*

ich danke Euch auf alle Fälle für eure Hilfe