Verschiedene Styles innerhalb einer HTML-Seite

fake-plastic-tree · 11. Februar 2005

Vermutlich ist das hier eine Idiotenfrage, die ich mir selber beantworten könnte. Aber ich weiß es nicht...

Folgendes: Ich versuche mich gerade an Tabellen. Jetzt habe ich in einer HTML-Seite zwei Tabellen. Wenn das jetzt folgendermaßen aussieht...

<html>

<head>

<style type="text/css">



</style>

</head>

<body>

<table> Tabelle eins... </table>

<table> Tabelle zwei... </table>

</body>

<html>

Dann würde die 'style.css' importiert, beispielsweise sähe die so aus:

a:link {color: #fefefe; text-decoration: none; font-family:trebuchet ms}
a:visited {color: #fefefe; text-decoration: none; font-family:trebuchet ms}
a:hover {color: #12c41e; text-decoration: none; font-family:trebuchet ms}
a:active {color: #d50000; text-decoration: none; font-family:trebuchet ms}

Dann würde sich diese CSS ja auf die komplette HTML-Seite beziehen.

Jetzt mein Anliegen: Wie/Wo kann ich Stile so definieren, dass sie sich nicht die ganze HTML-Seite beeinflussen, sondern nur einen bestimmten Bereich? Also so, dass - im oberen Beispiel - Tabelle eins einen anderen Stil hat als Tabelle zwei?

skicu · 11. Februar 2005

http://de.selfhtml.org/css/formate/zentrale.htm#individualformate

Warum bindest du die css datei eigentlich so merkwürdig ein? mal was von <link > gehört?

fake-plastic-tree · 11. Februar 2005

skicu am 11.02.2005 14:47 schrieb:
http://de.selfhtml.org/css/formate/zentrale.htm#individualformate

Warum bindest du die css datei eigentlich so merkwürdig ein? mal was von <link > gehört?

fake-plastic-tree · 11. Februar 2005

Jetzt hab ich ein anders Problem...

Meine HTML-Seite sieht jetzt ungefähr so aus:

<html>

<head>

<style type="text/css">



</style>

</head>

<body>

<table id="navi"> Tabelleeeeeee </table>

</body>

</html>

Der IE zeigt mir das jetzt so an, wie er es sollte. Nur Firefox stellt da was nicht dar, der ignoriert einfach a:visited, a:hover und a:active. :-|

Liegt das am Browser oder hab ich da irgendeinen Wurm drin (was ich doch hoffe)?

oDeM · 11. Februar 2005

Also ersteinmal folgendes:
Wenn du die CSS-Datei per import einbindest, mußt du dir im Klaren sein, dass ältere Browser Probleme haben könnten bzw. werden.
Aus Kompatibilitätsgründen würde ich auf <link zurückgreifen.

Die Befehle kannst du alle bei www.selfhtml.net nachlesen.

Dann zu deinem jetztigen Problem:

So wie du den Code gepostet hast, ist die Syntax nicht korrekt., bzw. verwirrend

Wozu soll das #navi gut sein?
Wenn du eine id ansprechen willst, musst du die CSS-Befehle innerhalb von geschweiften Klammern schreiben.

#navi {
css-befehl: css-wert;
...
...
}

Der andere Teil sieht soweit ok aus. Aber der Firefox bricht warscheonlich genau bei #navi ab, weil er nicht weiß was er jetzt machen soll. Ist ja auch klar wenns falsch ist!
Der IE frisst einfach alles was man ihm sagt, egal wie unsauber es auch sein mag, deswegen ist er ja auch so beschissen

Also versuch erstmal nur das #navi zu entfernen. Dann sehen wir weiter

fake-plastic-tree · 11. Februar 2005

oDeM am 11.02.2005 16:12 schrieb:
Also versuch erstmal nur das #navi zu entfernen. Dann sehen wir weiter

Wenn ich das mache, dann funktioniert das so, wie es soll. Davon abgesehen, dass sich die CSS jetzt auf die gesamte HTML-Seite auswirkt, und nicht nur auf einen Teil... wie mache ich das denn dann?

Mit diesen Klammern dadrum geht es gar nicht. Also wenn es so aussieht:

<style type="text/css">



</style>

oDeM · 11. Februar 2005

Das machst du, indem du eine sog. Klasse definierst.

So kannst du einzelnen oder mehreren Elementen vorher definierte Styles zuweisen.

Eine Klasse definierst du folgendermaßen

Klassenname.element {
Style-Werte
}

Ein Klassenname kann ein beliebiges Wort sein und sollte mit einem Buchstaben anfangen.
Wähl am besten ein Wort, dass Sinn macht

In deinem Falle wäre das z.B.

meinlink.a:hover { ... }

fake-plastic-tree · 11. Februar 2005

oDeM am 11.02.2005 16:44 schrieb:
Das machst du, indem du eine sog. Klasse definierst.

So kannst du einzelnen oder mehreren Elementen vorher definierte Styles zuweisen.

Eine Klasse definierst du folgendermaßen

Klassenname.element {
Style-Werte
}

Zum Vergrößern anklicken....

Ein Klassenname kann ein beliebiges Wort sein und sollte mit einem Buchstaben anfangen.
Wähl am besten ein Wort, dass Sinn macht

In deinem Falle wäre das z.B.

meinlink.a:hover { ... }

Zum Vergrößern anklicken....

Das peil ich jetzt gar nicht. :haeh:

Etwa...



..und in der HTML an der gewünschten Stelle id="navi" einfügen? :-o
Sorry, peile das gar nicht...

Flixus · 11. Februar 2005

Hi wenn du zum beispiel mehrere Links hast, und du die nur mit a:hover oder so machst sieht ja jeder link gleich aus...wenn du unterschiedliche willst musst du nen namen mit geben...also bei tabellen mach ich das so

table.cHaupttabelle{
hier die styles
}
aufruf dann mit

<table class="cHaupttabelle">

oder für schrift

font.cUeberschrift{
hier styles
}

wenn du eine klasse für mehreres nehmen willst machste

.cIrgendwas{
hier die styles
}

bei nem link müsste es so gehn

Link1.a:hover{
hier die styles
}

und ein anderer link der farblich etc anders sein soll

Link2.a:hover{
andere styls
}

wobei ich das mit den a href noch net so gemacht habe, ich es auch

finde...so mit dem was geklickt war und was nicht...

EDIT: mmm erst element dann klasse?

oDeM · 11. Februar 2005

Mhm oh ja ich vercheckter

Ich war jetzt irgendwie bei ner anderen Syntax.

ALSO:

element.klassenname { werte }

z.B.

a.navi:hover { color: #ff0000; }

<a href="bla.html" class="navi">.....

so kannste jetzt beliebig viele Klassen erstellen!

Und wie schon gesagt, im Grunde kannst du das ALLES bei selfhtml.net nachlesen. Für den Einstieg ist die Seite sehr zu empfehlen.

irtool · 11. Februar 2005

*grübel*
Irgentwie ist das alles ~~blödsinn~~ wenn man es auch einfach eben so schnell zusammenfassen kann.

Du machst eine CSS Datei.
Diese bindest du im Head bereich so ein :
<link href="event.css" rel="stylesheet" type="text/css"/>

event.css ist die datei.

Der Inhalt der Datei könnte zB. so aussehen:

.event { background-color:#424252; }
.today { background-color:#525262; }
.red { color:#DD3300; }
.green { color:#00DD00; }
.yellow { color:#D4D400; }
.blue { color:#0088BB; }
.cyan { color:#00D4D4; }
.pink { color:#CC00CC; }
.white { color:#F2F2F2; }
.black { color:#000000; }

.event ist eine class die du zB. für eine Tabelle verwenden kannst indem du sie dem td tag per <td class="event"> zuordnest.

Zwischen den klammern {} kannst du verschiedene befehle anwenden zB. wie der text ausgerichtet sein soll innerhalb der Tabelle usw.

So kannst du zB. die verschiedenen Link-Arten in der CSS Datei definieren:

a:active, a:focus, a:link, a:visited, a {
color:#ffffff;
text-decoration:none; }

a:hover {
color:#B2B2D7;
text-decoration:underline; }

Ich denke das solltest du verstehen ist ja leicht verständlich und nachvollziehbar.
Der Vorteil ist das du die Class einfach bei jeder Tabelle/Spalte anwenden kannst und immer die definition aus der css datei verwendet wird, so erspaarst du dir eine menge Arbeit.

Mfg irtool

fake-plastic-tree · 11. Februar 2005

Ok, danke euch beiden. Hab es jetzt wie folgt gemacht:

HTML schrieb:
<html>

<head>

<link href="navi.css" rel="stylesheet" type="text/css" />

</head>

<body>

<table class="navi" height="250" width="160" bgcolor="663333">

<tr>

<td>

blablub...

Und die CSS sieht so aus:

css schrieb:
.navi a:link {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi a:visited {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi a:hover {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi a:active {color: #e8e0cc; text-decoration: none; font-family: arial; font-size: 12px}

Und man höre: Es geht! =-D
Dielen Vank.

Hach, ihr seid alle sooooo kluk.

fake-plastic-tree · 11. Februar 2005

Noch eine andere Frage: Kann man keine zwei <link>-Tags einfügen?

HTML schrieb:
<head>

<link href="navi.css" rel="stylesheet" type="text/css" />

<link href="navi2.css" rel="stylesheet" type="text/css" />

</head>

Wenn ich das machen will, dann intepretiert Firefox das ja wunderbar, aber der IE lädt lediglich die CSS aus dem erstem <link>-Tag. :-o

fake-plastic-tree · 11. Februar 2005

fake-plastic-tree am 11.02.2005 22:34 schrieb:
Noch eine andere Frage: Kann man keine zwei <link>-Tags einfügen?

HTML schrieb:

<head>

<link href="navi.css" rel="stylesheet" type="text/css" />

<link href="navi2.css" rel="stylesheet" type="text/css" />

</head>

Zum Vergrößern anklicken....

Wenn ich das machen will, dann intepretiert Firefox das ja wunderbar, aber der IE lädt lediglich die CSS aus dem erstem <link>-Tag. :-o

Ok, war eine peinliche Frage... vergesst's.

fake-plastic-tree · 11. Februar 2005

Neues Problem. *g*

Meine HTML-Seite:

<html>

<head>

<link href="navi.css" rel="stylesheet" type="text/css" />

</head>

<body>

<table class="navi"> Tabelle eins </table>

<table class="navi2"> Tabelle zwei </table>

</body>

</html>

Meine CSS:

navi.css schrieb:
.navi a:link {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi a:visited {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi a:hover {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi a:active {color: #e8e0cc; text-decoration: none; font-family: arial; font-size: 12px}

.navi2 a:link {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 a:visited {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 a:hover {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 a:active {color: #e8e0cc; text-decoration: none; font-family: arial; font-size: 12px}

Problem: Im Firefox schön und gut, aber im IE wird des 'navi2' der zweiten Tabelle einfach ignoriert und wird gemäß dem Stil der class 'navi' dargestellt. :-o Wo steckt da der Fehler?

irtool · 11. Februar 2005

fake-plastic-tree am 11.02.2005 23:03 schrieb:
Neues Problem. *g*
Meine CSS:

navi.css schrieb:

.navi a:link {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi a:visited {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi a:hover {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi a:active {color: #e8e0cc; text-decoration: none; font-family: arial; font-size: 12px}

.navi2 a:link {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 a:visited {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 a:hover {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 a:active {color: #e8e0cc; text-decoration: none; font-family: arial; font-size: 12px}

Zum Vergrößern anklicken....

Problem: Im Firefox schön und gut, aber im IE wird des 'navi2' der zweiten Tabelle einfach ignoriert. :-o Wo steckt da der Fehler?

Wieso schreibst du für jede Linkart eine neue Class mit dem gleichem Namen ?
mach es doch eifnach so:
.navi2 {
a:link: color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px;
a:visited: color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px;
}
Andere Frage: Wieso machst du die Linkarten in den Class'es ?

Du schreibst die definitionen einfach so in die css:

a:active, a:focus, a:link, a:visited, a {
color:#ffffff;
text-decoration:none; }

a:hover {
color:#B2B2D7;
text-decoration:underline; }

DAs gillt dann für die komplette Seite und alle Tabellen.

irtool · 11. Februar 2005

irtool am 11.02.2005 23:09 schrieb:
fake-plastic-tree am 11.02.2005 23:03 schrieb:

Neues Problem. *g*
Meine CSS:

navi.css schrieb:

.navi a:link {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi a:visited {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi a:hover {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi a:active {color: #e8e0cc; text-decoration: none; font-family: arial; font-size: 12px}

.navi2 a:link {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 a:visited {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 a:hover {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 a:active {color: #e8e0cc; text-decoration: none; font-family: arial; font-size: 12px}

Zum Vergrößern anklicken....

Problem: Im Firefox schön und gut, aber im IE wird des 'navi2' der zweiten Tabelle einfach ignoriert. :-o Wo steckt da der Fehler?

Zum Vergrößern anklicken....

Wieso schreibst du für jede Linkart eine neue Class mit dem gleichem Namen ?
mach es doch eifnach so:
.navi2 {
a:link: color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px;
a:visited: color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px;
}
Andere Frage: Wieso machst du die Linkarten in den Class'es ?

Du schreibst die definitionen einfach so in die css:

a:active, a:focus, a:link, a:visited, a {
color:#ffffff;
text-decoration:none; }

a:hover {
color:#B2B2D7;
text-decoration:underline; }

DAs gillt dann für die komplette Seite und alle Tabellen.

Edit :

Mach es doch so :

.navi {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi {color: #e8e0cc; text-decoration: none; font-family: arial; font-size: 12px}

.navi2 {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 {color: #e8e0cc; text-decoration: none; font-family: arial; font-size: 12px}

Ohne den a:visited kram usw.
a:visited ist soweit ich weiss eine eigene definition für sich die du nicht einfach zu einer class hinzufügen kannst.

skicu · 16. Februar 2005

irtool am 11.02.2005 23:11 schrieb:
Edit :

Mach es doch so :

.navi {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi {color: #e8e0cc; text-decoration: none; font-family: arial; font-size: 12px}

.navi2 {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 {color: #ffcc99; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 {color: #ffffff; text-decoration: none; font-family: arial; font-size: 12px}
.navi2 {color: #e8e0cc; text-decoration: none; font-family: arial; font-size: 12px}

Ohne den a:visited kram usw.
a:visited ist soweit ich weiss eine eigene definition für sich die du nicht einfach zu einer class hinzufügen kannst.

Du formatierst hier Text, keine Links.

Was ihr hier schon teilweise macht, aber nicht darüber Bescheid wisst ist Verschachtelung. Lest mal die Seite hier komplett durch: http://de.selfhtml.org/css/formate/zentrale.htm

fpt hatte die richtige Version übrigens schon.

Aktualisierte Forenregeln

Verschiedene Styles innerhalb einer HTML-Seite

fake-plastic-tree

Spiele-Enthusiast/in

skicu

Gast

fake-plastic-tree

Spiele-Enthusiast/in

fake-plastic-tree

Spiele-Enthusiast/in

oDeM

NPC

fake-plastic-tree

Spiele-Enthusiast/in

oDeM

NPC

fake-plastic-tree

Spiele-Enthusiast/in

Flixus

Gast

oDeM

NPC

irtool

Gelegenheitsspieler/in

fake-plastic-tree

Spiele-Enthusiast/in

fake-plastic-tree

Spiele-Enthusiast/in

fake-plastic-tree

Spiele-Enthusiast/in

fake-plastic-tree

Spiele-Enthusiast/in

irtool

Gelegenheitsspieler/in

irtool

Gelegenheitsspieler/in

skicu

Gast

Ähnliche Themen