Menü
Vereinbarung
Grundsätzliches zum HTML/CSS Layout mit OPN
Um mal den Grund etwas zu erläutern warum es besser ist mit Vererbung zu arbeiten, will ich mal ein paar Gedanken hier dazu erläutern.
- Weniger (CSS-Styles) ist mehr
- Es ist nicht nötig, für jedes verwendete HTML-Element eine eigene Klasse zu definieren, weil die Browser
- eigene Vorgaben mitbringen
- global im Stylesheet, HTML-Elemente formatiert werden können
- Durch Vererbung und gezielt gesetzte CSS-Styles Abweichung von der Standardlösung erreicht werden können.
Browser - die Browser bringen bereits ein Grundformatgerüst mit das auf gute Lesbarkeit ausgerichtet ist.
Da die Browser hier allerdings alle von einander abweichen, muss man hier in der heutigen Zeit darauf zurückgreifen, die Browser auf ein gleiches Level zu bringen.
Wie der interessierte Leser schnell bemerkt gibt es viele Wege, ob gut oder weniger gut, sinnvoll oder nicht, soll hier nicht behandelt werden.
Da man aus der Praxis am schnellsten lernt hier mal ein paar CSS-Fragmente die das ganze ein wenig zeigen sollen.
Das Beispiel ist aus einem aktuellen Theme.
/* Hiermit werden die Randabstände und border aller HTML-Elemente auf Null gesetzt. Damit wird das
** Aussehen der Webseite in unterschiedlichen Browsern vereinheitlicht.
*/
* { margin:0; padding:0; font-size: 100%; }
Die Kommentierung erklärt eigentlich alles. Wir beugen so dem Unterschieden in den Browserinternen CSS-Regeln vor und fangen bei 0 bzw 100% an. Diese Angaben dienen dem Browser im weiteren Verlauf der Layoutberechnung als Grundlage.
Da diese Methode natürlich auch Probleme verursacht erfolgen jetzt die ersten Korrekturen:
/* Das zurücksetzen der Innen- und Außenabstände verursacht zu kleine Selectboxen. Dies wird korrigiert */
option {padding-left: 0.4em }
Ihr seht wir haben nun mit eigentlich 2 Zeilen das Layout massiv beeinflusst. Stellt Euch die Menge an Code vor wenn wir nun alle HTML Elemente und eventuell eigene CSS-Klassen in der Art formatieren müssten.
Ein weiteres wesentliches Grundelement vom Layout mit CSS ist die Vererbung.
Dazu muss man wissen wie HTML funktioniert. Mal als simples Beispiel vergleichen wir es mit einem Baum.
Die Wurzel ist der der Anfang darauf sitzt der Stamm, aus dem weitere Äste sitzen die wiederum Blätter tragen.
Wurzel = HTML
Stamm = BODY
Äste = Blockelemente wie z.B. DIV (Abstände haben in diesem Bereich Einfluss)
Blätter = Inlineelemente wie z.B. SPAN (Abstände werden ignoriert)
Nochmal zur Erinnerung, das ist ein extrem simpler Vergleich, der nur das Grundverständnis fördern soll
Wenn wir also der Wurzel grundlegende Formatierungen mitgeben wird sich das im ganzen "Baum" wiederfinden, weshalb also allgemeingültige Formatierungen hier angebracht sind.
z.B:
html {height:100%}
Diese Anweisung bewirkt im Viewport die volle Ausnutzung der verfügbaren Höhe.
Jetzt gehts an den Stamm:
body {
/* Vertikalen Scrollbalken im Netscape & Firefox erzwingen. Dies verhindert, dass zentrierte Layouts
** um 10 Pixel springen wenn der Seiteninhalt kleiner wird als die Höhe des Browserfensters. */
min-height: 101%;
/* Beseitigung des Rundungsfehlers bei Schriftgrößen im Opera sowie Standardformatierungen */
font-size: 100.01%;
/* FIX: Verhindert, dass positionierte Elemente nicht verschoben werden wenn die Größe des Browser Fensters geändert wird. */
position: relative;
/* Vorgabe der Standardfarben und Textausrichtung*/
color: #fff;
text-align: left;
background: #333;
padding: 10px;
}
Wir setzen jetzt also grundsätzliche Formatierungen die bis in die Blätter weitergegeben werden (Zumindest in der schönen Welt Utopia, wo es keine Browserbugs gibt.)
Die nun definierten Werte sind solange gültig bis sie erneut überschrieben werden.
Weiter gehts zu den Ästen:
/* Standardrahmen zurücksetzen */
fieldset, img { border:0; }
/* Anpassung für Safari Browser. font-size:100% ist für den Safari in Formularen zu groß */
select, input, textarea { font-size: 99% }
Da bestimmte Fehler, in den Browsern immer mal wieder vorkommen, kann man hier durch ein paar Zeilen die schlimmsten schon einmal ausmerzen. Das bereitet uns später weniger Kopfschmerzen.
Hier ein weiteres Beispiel wie man ein paar Grundsätzliche Formatierungen nutzen kann um Layoutweit einheitliche Werte zu vererben:
/* ######################################################################### **
** ### Standard-Formatierungen für Listen & Zitate ######################### **
** ######################################################################### */
ul, ol, dl { margin: 0 0 1em 0; }
li { margin-left: .5em; line-height: 1.5em; }
dt { font-weight: bold; }
dd { margin: 0 0 1em 2em; }
blockquote, cite { margin: 0 0 1em 1.5em; font-size: 0.93em; width: auto;}
wer aufmerksam den CSS-Code gelesen hat, wird schon bemerkt haben das ich am Anfang alle Abstände auf 0 gesetzt habe und nun wieder Abstände setze. Genau das ist bei der Browservielfalt heute wichtig, da einige etwas "krumm" rechnen.
Da wir in OPN die CSS-Klassen massiv reduziert haben und dafür die entsprechenden HTML-Elemente gesetzt haben, wird es möglich mehr die Vererbung zu nutzen. Auch hierzu möchte ich ein klein wenig schreiben. Wen also der obere Teil noch nicht abgeschreckt hat, jetzt gehts ans eingemachte ;)
Kurze Zusammenfassung, wir haben unseren Baum also in der Siluette beschrieben und gehen nun an das Feintuning, dem eigentlichen Layout.
Ziel sind oft verschiedene Spalten mit unterschiedlichen Aufgaben. Zum Beispiel Sideboxen und Centerboxen. OPN verfügt über die Möglichket Sideboxen und Centerboxen in einer Spalte zu vermischen, weshalb unser alter Weg mit vielen CSS-Klassen bald an ein mengenmässige Mauer kam. Ich könnte auch sagen Man sieht den Wald vor lauter Bäumen nicht. Es war extrem schwer alle Zusammenhänge von Darstellungsfehlern zu erkennen. Wir hatten z.B. CSS-klassen für Fettgedruckten, Schräggedruckten und Fett/Schräg-gedruckten Text in kleiner, normaler, größerer und Extragroßer Ausführung. Wer nachrechnet kommt schnell auf 12 CSS-Klassen.
Jetzt kommt als weiterer Faktor, der Programmierer, je nach Tageslust ;) wurde mal ein Text so oder so formatiert. Das dieses System unpraktisch ist versteht sicher jeder.
Und um Euch weiterzu verwirren gab es jede dieser Klassen auch noch für Sideboxen und Centerboxen.
Mit dem etwas später eingeführtem Feature, jede Box auch zu side oder Center zu machen wird das Dilemma der vielen starren (zwar relativ einfach zu formatierenden CSS-Klassen) deutlich.
Sowie man eine Box artfremd einsetzt, stösst man an eine Layoutgrenze. Diese Grenze haben wir mit der Reduktion der CSS-Klassen und Nutzung der HTML-Elemente eingerissen.
Vererbung ist hier das Zauberwort. Doch zurück zu der Sidebox- und Centerboxspalte.
Im Theme wird normalerweise immer ein erster großer "AST" für die Sideboxen abgespaltet und um es mal ganz simple zu halten ein weiterer "AST" für die Centerboxen.
Nutzen kann man hier z.B. am eindeutigsten das Attribut "ID".
<div id="Sidebox"> <p>Allerlei Inhalte wie Menüs</p> </div>
<div id="Centerbox"> <p> Die wichtigen allerlei Inhalte <p> </div>
Unser Stammelement wird nun sagen wir Vater und Mutter also ein Elter, genauer ein Elternelement. All die guten Eigenschaften die das Elternelement auszeichnen kann es vererben.
Wir haben nun also 2 Hauptäste geschaffen die die ID Sidebox und Centerbox tragen. Wie haben nun ein HTML Element benutzt, aber ein Unterscheidungsmerkmal geschaffen das wir für die Vererbung benutzen können. Damit sich die Nachkommen, (Kindelemente ) nicht streiten können machen wir also ein Testament.
Wir haben rote Buchstaben auf weißem Untergrund und weiße auf blauem Untergrund. Wer kriegt was?
/**************************************************/
* Für die Sideboxen soll es rot auf weiß werden ****
***************************************************/
div#Sidebox p {color: red; background: white;}
/**************************************************/
* Für die Centerboxen soll es weiß auf blau werden **
***************************************************/
div#Centerbox p {color: white; background: blue;}
Aussage obiger Styles ist in Worten ungefähr so:
Sidebox:
Wenn p (Absatz) innerhalb von DIV mit der ID Sidebox vorkommt formatiere die Schriftfarbe Rot und den Hintergrund Weiss.
Centerbox:
Wenn p (Absatz) innerhalb von DIV mit der ID Centerbox vorkommt formatiere die Schriftfarbe Weiss und den Hintergrund Blau.
Dies ist nun die erste Ebene des Prinzips, sie ist einfach zu verstehen denke ich. Nun kommen wir zu dem etwas abstrakteren Teil.
Wir haben nun im Boxenadmin die Möglichkeit die Box als Center und Sidebox zu benutzen. Wenn nun also der Programmierer das alte System benutzen würde, müsste eine Sidebox immer rote Schrift und weissen Hintergrund haben.
Da wir nun so arbeiten das nach Ort des Vorkommens die Formatierung gewählt wird, eben durch Vererbung, erhalten wir homogenere leichter zu wartende CSS files.
Ihr merkt das Prinzip ist garnicht so schwer zu verstehen.
Wir greifen also nicht wie ein Gesetzgeber stur in den Ablauf des Layouts ein, sondern überlassen durch gezielte Unterstützung in Form von Regeln das Layout seinem natürlichen Lauf.
Durch gezieltes Eingreifen mittels Vererbung können wir nun schnell trotzdem Unterschiede in der Formatierung möglich machen.
Wichtig ist nur das man die Vererbungskette nicht zu lang werden lassen darf, da es sonst schnell mal zu unvorhergesehen Fehlern kommt.
mal ein Beispiel noch dazu.
Wir haben alle sideboxen in obigen Beispiel mal in ein P (Absatz) gesetzt, die Wirklichkeit ist etwas komplizierter.
Im Boxenadmin habt Ihr die Möglichkeit einer Box eine bestimmte ID mitzugeben, diese ID könnt Ihr wiederum nutzen um Abweichungen zu erreichen.
kleines Beispiel gefällig?
<div id="Sidebox">
<p>Allerlei Inhalte wie Menüs</p>
<p id="DerAbsatzDerAusDerReiheTanzt">Allerlei Inhalte wie Menüs</p>
</div>
Obiges soll einmal das HTML verdeutlichen
Nun zum CSS, machen wir die Box mal Orange auf schwarz
/****************************************************************************/
* Für die Sideboxen soll es rot auf weiß werden ******************************
*****************************************************************************/
div#Sidebox p {color: red; background: white;}
/****************************************************************************/
* nach der Standardbox definiert man die Abweichung damit das CSS greift ****
*****************************************************************************/
/*Beispiel für nur in Sideboxspalte*/
div#Sidebox p#DerAbsatzDerAusDerReiheTanzt {color: orange; background: black;}
/*Beispiel in allen Spalten*/
p#DerAbsatzDerAusDerReiheTanzt {color: orange; background: black;}
/*Beispiel für nur in centerboxspalte*/
div#Centerbox p#DerAbsatzDerAusDerReiheTanzt {color: orange; background: black;}
So wie Ihr seht haben wir nun wieder jederzeit die Wahl, je nach Ort auch andere Formatierungen zu veranlassen, die auch greifen wenn wir mal eine Box verschieben.
Ein bisschen Vorplanung macht es natürlich leichter.
So wer bis hierher gelesen hat, dem sag ich mal Danke und Respekt, du willst es echt wissen ;)
Kommentare? Fragen?
Geschrieben von bdragon am 29.11.2006 15:41:07 (5413 * gelesen)
Kommentare
Für den Inhalt der Kommentare sind die Verfasser verantwortlich.
-
Danke für den sehr schönen Artikel der die Idee die dahinter steckt ordentlich Umreist.
Aber wo Licht ist, ist auch Schatten
einmal nutzt du den Universalselektor * das ist Grundsätzlichrichtig nur an der Stelle sollte man wirklich betonen das sich Browser unterschiedlich verhalten. Eigentlich kann man denn weglassen Da IE 5-6 den eh vor der Ausführung löscht/ignoriert. Ich erwähne das nur um noch mal daraufhinzuweisen das durchaus Browser sich uneinig sind.
Das ist leider so. Und das stellt auch leider das grösste Problem dar.
Zu OPN. Den Weg mit Vererbung zu arbeiten werden wir weitergehen da gibt es sicherlich noch Stellen die nicht Optimal sind. Aber grundsätzlich vereinfacht es die CSS Erstellung.
Erst nachlesen, dann nachdenken, dann nachfragen...
http://www.catb.org/~esr/faqs/smart-questions.html
openPHPnuke Developer - Re: Grundsätzliches zum HTML/CSS Layout mit OPN
von bdragon am 29.11.2006 18:44:43 http://www.pxlartist.de
