Sonstiges > Offtopic
Cascade Stile Sheets
TMC:
Hi,
ich muss mich gerade mit CSS rumschlagen, insbesondere mit dem Verhalten von Links.
Ich habe hier eine Seite, wo ich verschiedene Blöcke definiert habe.
Also z.B. im CSS
--- Code: ---.header {
position: absolute;
left: 0px;
top: 0px;
width: 770px;
height: 40px;
background: #C3C3C3;
}
div.headertext {
width: 560px;
height: 30px;
padding: 7px 0px 0px 49px;
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
font-weight: bold;
color: black;
text-align: left; overflow: hidden;
}
--- Ende Code ---
und im HTML-Code dann
--- Code: --- <DIV CLASS="header">
<DIV CLASS="headertext">
Tescht Text
</DIV>
</DIV>
--- Ende Code ---
Es gibt da mehrere solche Bereiche.
A)
Was mich jetzt als CSS - Neuling interessiert: Wann sticht der Ober den Unter, sprich was gilt übergreifender bei den Definitionen:
Z.B.
.header{}
div.headertext{}
So wie ich verstanden habe ist hier div.headertext ein Bestandteil von .header, oder liegt das nur an meinem Aufruf?
B) Die Folge daraus ist für mich die Definition von Link-Eigenschaften (a:hover etc.).
Die bisherige Implementierung greift leider nur auf die komplette HTML-Datei, ich brauche aber pro "Block" unterschiedliche Eigenschaften für Hyperlinks (mal beim Rollover rot, dann wieder grün, etc.)
Sorry für die Anfängerfragen im CSS-Umfeld, hab im Internet keine Antworten auf diese Basic-Fragen finden können.
Matthias
Axel Janssen temp:
--- Zitat von: TMC am 24.02.04 - 19:55:20 ---
A)
Was mich jetzt als CSS - Neuling interessiert: Wann sticht der Ober den Unter, sprich was gilt übergreifender bei den Definitionen:
Z.B.
.header{}
div.headertext{}
So wie ich verstanden habe ist hier div.headertext ein Bestandteil von .header, oder liegt das nur an meinem Aufruf?
--- Ende Zitat ---
Ohne es getestet zu haben, sollte nach meiner generellen markup-Logik der "engere scope" den "weiteren scope" ausstechen.
div:headertext ist in :header. Also müsste div:headertext bei Konflikten den Vorrang haben.
--- Zitat von: TMC am 24.02.04 - 19:55:20 ---B) Die Folge daraus ist für mich die Definition von Link-Eigenschaften (a:hover etc.).
Die bisherige Implementierung greift leider nur auf die komplette HTML-Datei, ich brauche aber pro "Block" unterschiedliche Eigenschaften für Hyperlinks (mal beim Rollover rot, dann wieder grün, etc.)
--- Ende Zitat ---
Du kannst unterschiedliche styleKlassen definieren div.headerTextRot, div.headerTextGruen, div.headerTextBlau, etc.
a:hoover galt glaub ich früher als MS-proprietär, oder (vermutlich kann mozilla das. zu faul zum Testen. netscape4 nicht.
Mein Tipp: Hol dir möglichst viel aus dem Web.
weiteres:
Gut ist hierfür www.teamone.de/selfhtml und das angeschlossene Forum.
http://selfaktuell.teamone.de/live/index.htm
Musst uns natürlich sagen, wenn du was interessantes findest.
auch gut:
http://www.w3schools.com/css/css_reference.asp
für notes spezifischere Sachen:
http://www.codestore.net/store.nsf/all?OpenView&Count=10
gutes mozilla feuervogel plugin:
http://chrispederick.myacen.com/work/firefox/webdeveloper/
... und da wir sowieso alle nicht richtig designen können:
http://www.oswd.org/
... und natürlich das JavaScript html Forum mit dem einzigartigen Eric Pascarello: http://saloon.javaranch.com/cgi-bin/ubb/ultimatebb.cgi?ubb=forum&f=20
animate:
ich hab noch ein kleines Beispiel bei mir gefunden.
wichtig ist der Stylesheet-Abschnitt und die CLASS - Attribute
ach ja, das mit dem engeren Scope was Axel geschrieben hat stimmt latürnich
--- Code: ---<html>
<head>
<title>Link Styles</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.navbar {
color: #FFFFFF;
}
.main a:link {
color: 003399;
}
.main a:visited {
color: #9966CC;
}
.main a:hover {
color: #CCCCCC;
}
.main a:active {
color: #FF0000;
}
.navbar a:link {
color: #FFFF00;
}
.navbar a:visited {
color: #9966CC;
}
.navbar a:hover {
color: #CCCCCC;
}
.navbar a:active {
color: #FF0000;
}
-->
</style>
</head>
<body BGCOLOR="#FFFFFF" TEXT="#000000" MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0">
<table WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="25">
<tr>
<td WIDTH="23%" BGCOLOR="#333399" VALIGN="TOP" CLASS="navbar">
<p> </p>
<p>Etwas Text </p>
<p>und <a HREF="#">hier ist ein Link</a></p>
<p>und<a HREF="#"> hier ist noch ein Link</a>.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
<td WIDTH="77%" VALIGN="TOP" CLASS="main">
<p> </p>
<p>Ein bisschen Text im Hauptteil der Seite and <a HREF="#">hier ein
Link</a>. Und <a HREF="#">noch ein Link</a> und <a HREF="#">noch einer </a>.</p>
</td>
</tr>
</table>
</body>
</html>
--- Ende Code ---
TMC:
Axel: super, danke insbesonders für die weiterführenden Links.
--- Zitat ---Musst uns natürlich sagen, wenn du was interessantes findest.
--- Ende Zitat ---
Klar, Feedback folgt :-)
Thomas: auch Dir vielen dank für das Beispiel.
Ich denke nun bin ich erstmal mit Infos versorgt. Komme zwar heute nicht mehr dazu mir das alles näher anzusehen, aber demnächst meld ich mich wieder.
Matthias
TMC:
--- Zitat von: Axel Janssen temp am 24.02.04 - 20:41:35 ---a:hoover galt glaub ich früher als MS-proprietär, oder (vermutlich kann mozilla das. zu faul zum Testen. netscape4 nicht.
--- Ende Zitat ---
yoo, aktueller Firebird-Browser (ups, heißt jetzt ja Firefox) kann das.
Aber danke für den Hint, die Site soll ja möglichst alle Browser abdecken. Wobei ich da schon wieder mit meinen CSS-Block-Definitionen belächelt werde von manchen Leuten. Zurecht, wenn es um ältere Browser geht. Aber aufgrund der HTML-Lesbarkeit und Ladezeiten habe ich mich contra Tabellen entschieden.
Matthias
Navigation
[0] Themen-Index
[#] Nächste Seite
Zur normalen Ansicht wechseln