Ausführliches CSS Tutorial für Fortgeschrittene?

Josh

Josh

Legendäres Mitglied
Hi alle

Doch doch - ich weiss recht gut was CSS ist und wie man es benützt, aber fortgeschrittene Techniken wie verschachtelte Stylesheets à la

CODE ul ul {
...
}


sagen mir noch nicht allzuviel. Ich möchte meinen Skill in CSS verbessern, also suche ich ein Tutorial für Fortgeschrittene. Oder kann mir jemand ein günstiges, gutes Buch empfehlen?

Danke und Grüsse
Josh
 
Hi,

Ich bin auch an diesem Thema interessiert.

Vor allem möchte ich lernen, wie man ein komplettes Design mit Hilfe von CSS in einem einfachen HTML-File mit ein paar DIV's umsetzt. Für mich ist diese Methode der Nachfolger der TABLE-Layouts, die momentan ja immer noch sehr verbreitet sind. Ich möchte damit auch die vielen TABLE-Attribute umgehen, die in den neuen XHTML-Standards ja nicht mehr unterstützt werden sollen ...

Des weiteren suche ich auch noch ein Tutorial oder ein Buch, dass die von Josh angesprochenen Bereiche behandelt, also einfach CSS für Fortgeschrittene
tongue.gif
...

Greats,

S.B
 
@josh

was meinst du genau mit CODE ul ul {
?
willst du wissen wie man z.b. ein context-menu mit css (ohne js) macht?
 
QUOTE (Tim @ Fr 12.8.2005, 12:32) Der Div-Wahnsinn
Original: Div-Mania

Hi,

Hmm, nach dem ich den Artikel gelesen habe, komme ich zum Schluss, dass der Verfasser recht hat. Ich wusste jedoch nicht, dass DIVs sogar missbraucht werden, um eine eigentliche H1-Überschrift darzustellen. Das kann man schon als DIV-Wahnsinn bezeichnen.

Mir geht es viel mehr darum, die eigentliche Struktur der Seite mit DIVs aufzubauen, resp. die Tabellen-Struktur damit zu ersetzen. Für die eigentliche Formatierung des Inhaltes würde ich natürlich auch die spezifischen HTML-Elemente und passende CSS-Selektoren verwenden.
D.h. Für eine Navi z.B. eine Liste verwenden und diese mit CSS formatieren.

Die Herausforderung an einem Layout, das auf einer DIV-Struktur basiert, liegt doch darin, die DIVs genauso exakt zu platzieren, wie das mit einer Tabelle der Fall wäre, und dabei auf die als "depracted" (=nicht mehr (X)HTML-Standard) gehandelten Attribute zu umgehen.
Genau an dieser Stelle sehe ich noch Handlungsbedarf, wenn nicht bei CSS selber, dann aber sicher bei der Browserinterpretation von CSS.

Dazu ein Beispiel:
Ich kenne bislang keinen CSS-Befehl, der die Funktion des als depracted gekennzeichneten HTML-Attributes "align" gleichwertig ersetzt!
Wenn ich also z.B. ein DIV-Element in die Mitte des Browserfensters setzen will, musste ich bis jetzt immer mit Pixelangaben in CSS arbeiten, um dem neuen XHTML-Standard gerecht zu werden. Das ist jedoch, wie ihr sicher wisst, Unsinn, denn bei jedem User sind die Pixelverhältnisse anders und das DIV kommt so nie richtig in die Mitte! Dabei wäre es doch so einfach, das DIV mit dem Attribut align="center" zu versehen, das dann das BODY-Element als Elternelement hat, und das DIV so sicher und in jedem Fall in der Mitte des Browserfensters liegt ...
Vielleicht gibt es ja inzwischen eine Möglichkeit, dieses Problem XHTML-konform und mit CSS zu lösen und ich weiss einfach nichts davon. Wisst ihr eine Möglichkeit?

Aber es handelt sich ja nur um ein Beispiel. Es gibt meines Erachtens ähnliche Probleme mit anderen als depracted gehandelten HTML-Attributen, die das heutige CSS einfach nicht gleichwertig ersetzen kann ...

So, jetzt bin ich ein bisschen abgeschweift, aber der Artikel, den Tim verlinkt hat, hat mich wieder an diese Sache erinnert und ich möchte einfach gerne mal wissen, was die CSS-Experten unter euch dazu meinen (zu denen ich ganz bestimmt nicht gehöre
tongue.gif
) ...

Greats,

S.B
 
@tim:
funktioniert aber nur im IE oder wie/wo wendest du das an?

was ist damit:
CODE
body {
text-align:center;
}

.mittig {
width:100px;
margin-left:auto;
margin-right:auto;
border:1px;
border-style:solid;
}



durch das margin...:auto ist das div "mittig" auch im Opera/Firefox mittig (was den IE wiederum nicht interessiert)


an einem vernünftigen Tutorial wäre ich auch mal interessiert.
Vor allem an einem Tutorial bei denen die Beispiele auch in jeden Browser richtig funktionieren
smile.gif
 
Hi,

Ja, das text-align ist mir bekannt. Ich hatte vergessen das zu erwähnen, aber es erschien mir nicht wichtig, da es ja eben nicht "richtig" (= in diesem Fall nicht in allen Browsern) funktioniert.
Ich werde die Lösung von Stefan Brinkers ausprobieren, danke euch beiden vorerst!

Edit:

Aha, da steht ja noch was beim Link von Tim
ohmy.gif
:

QUOTE text-align bezieht sich nicht nur auf Textinhalte, sondern auf alle inline dargestellten Elemente (wie z.B. <img>). Der MS Internet-Explorer wendet diese Eigenschaft jedoch fälschlich auch auf Block-Elemente an.
Block-Elemente selbst werden über Seite margin ausgerichtet, wobei gleiche Werte für margin-left und margin-right eine Zentrierung bewirken können.
.

Mit "gleiche Werte für margin-left und margin-right" wäre dann bestätigt, dass die Lösung von Stefan Brinkers mit margin-left:auto; margin-right:auto; funktionieren sollte.
Aber ausprobieren sollte mans trotzdem, eben wegen den Browsern ...


Greats,

S.B
 
wenn du text-align beim body machst zentriert das auch der verdammte IE.

CODE body {
margin: 0;
padding: 0;
text-align: center;
}


#container {
margin: 0 auto;
padding: 0;
width: 100%;
}

#head {
margin: 0 auto;
padding: 0;
text-align: left;
width: 100%;
}

...
 
Hi,

Also, für die, die es interessiert:

Ich hab mir jetzt ein Buch zugelegt, dessen Hauptaugenmerk darauf liegt, zu zeigen, wie man unübersichtliche Tabellenlayouts durch moderne, CSS-gestütze Gerüste ersetzt. Des weiteren enthält das Buch eine Referenz der CSS-Eigenschaften und erklärt auch Anfängern die Grundprinzipien von CSS.

Autoren: Dan Shafer, Kevin Yank
Titel: Cascading Stylesheets, Anspruchsvolle Websites mit CSS gestalten. Grundlagen, Designtechniken und Referenz.
Verlag: dpunkt.verlag, 2004
englische Originalausgabe: HTML Utopia - Designing Wihtout Tables Using CSS (SitePoint Pty.)

Das Buch ist nicht ganz billig (67 sFr.), aber ich denke es lohnt sich. Man muss halt am Ball bleiben
cool.gif
...

Greats,

S.B
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben