div id und Auslagerungsdatei

[Sabine]

Meine HTML:

<div id="steuerunglinks">  
  
    <p><b>Newsticker:</b><p>  
    <p><a href=".........."></a><p>  
    <p><a href=".........."></a><p>  
    <p><a href=".........."></a><p>

Meine ausgelagerte CSS:

#steuerunglinks a:link { color:red; text-decoration:none; }  
#steuerunglinks a:visited { color:red; text-decoration:none; }  
#steuerunglinks a:hover { color:red; text-decoration:none; }

Soweit alles klar. Befehle werden auch astrein ausgeführt. Mein Problem besteht allerdings darin, daß ich 2 verschiedene Formatierungen für Verweise/Links in "steuerunglinks" benötige.

Sagen wir in der ersten Formatierung alle Links rot
in der zweiten Formatierung alle Links blau

Ich würde Euch mein Problem gerne in verständlicherer Fachsprache ausdrücken, aber ich bin grade mit Stylesheets angefangen und mir fällt es schwer mich wie Ihr auszudrücken.

Ich habe schon versucht in meine HTML Datei für beide unterschiedliche Verweisformatierungen eine "class rot" und eine "class blau" einzubinden, die ich dann in der ausgelagerten css-datei seperat aufrufen und definieren kann. Ihr wißt schon mit a:link usw... .Allerdings weiß ich nicht, ob sich der Classbefehl dazu eignet und/oder ich diesen richtig einbinde. Habe meinen Fehlversuch schon wieder gelöscht, aus Frust.

Ich hoffe Ihr versteht, was ich meine auch wenn ich blond bin. :) Aber ich weiß, daß die Sache, die ich vorhabe praktisch ganz einfach funktionieren muß. Naja, bin grade dabei meine komplette HTML-Homepage in css unzuschreiben und noch ziemlich am Anfang mit meinen css Kenntnissen. Ein 3 spaltiges Layout bekomme ich über css schon fehlerfrei hin *stolz* - aber mit so ein paar Dingen hapert es noch eben :(

Hoffe ihr könnt mir irgendwie helfen.

Vielen Dank und lieben Gruß,

Bine

[Beat]

Ich habe schon versucht in meine HTML Datei für beide unterschiedliche Verweisformatierungen eine "class rot" und eine "class blau" einzubinden, die ich dann in der ausgelagerten css-datei seperat aufrufen und definieren kann.

Klassennamen sollten eher die Semantik als die zu erzielende Gestalt ausdrücken.

Links würde ich in dieser Reihenfolge im CSS spezifizieren

/* allgemein */
a[href]
   { text-decoration:none; }

/* funktional Dateiweit */
a.internal
   { color:red; }
a.external
   { color:green; }

/* Sonderbereiche */
#sonderbereich a
   { }

mfg Beat

[Sabine]

hm, das sagt mir erstmal nicht sehr viel. kann man mein vorhaben denn überhaupt mit dem class befehl umsetzten? wäre das überhaupt sinnvoll?

meine jetzige lösung sieht so aus, daß ich einfach zwei div ids: "#steuerunglinksblau" und "#steuerunglinksrot" angelegt habe. In der Auslagerungsdatei habe ich beide Elemente mit deren paddings und margins usw. doppelt angelegt mit dem unterschied, daß die verweisformatierung sich unterscheiden.

[Beat]

hm, das sagt mir erstmal nicht sehr viel. kann man mein vorhaben denn überhaupt mit dem class befehl umsetzten? wäre das überhaupt sinnvoll?

Klassen können in einem Dokument mehrfach verwendet werden. Das ist für IDs nicht erlaubt. Gib dir also selbst die Antwort.

Du kannst auch mehrere Klassen notieren

<a class="external warning" />
<a class="internal info" />
<a class="internal reference" />

und für jede Klasse spezifische CSS Anweisungen notieren.

mfg Beat

[Sabine]

Ah, dann verstehe ich. Wenn der Class-Befehl auf das Element
"steuerunglinks" angewendet werden soll, dann sähe der HTML-Code dafür also so aus:

index.html

<a class="external warning" />  
<div id="steuerunglinks"  
  <p><a href="...... .html">.........</a></p>  
  <p><a href="...... .html">.........</a></p>  
  <p><a href="...... .html">.........</a></p>  
</div>  

thema1.html

<a class="internal info" />  
<div id="steuerunglinks"  
  <p><a href="...... .html">.........</a></p>  
  <p><a href="...... .html">.........</a></p>  
  <p><a href="...... .html">.........</a></p>  
</div>  

und der Ausschnitt der dazugehörigen design.css

a.external warning a:link { color:red; text-decoration:undeline; }  
a.external warning a:visited { color:red; text-decoration:undeline; }  
  
a.internal info a:link { color:BLUE; text-decoration:undeline; }  
a.internal info a:visited { color:BLUE; text-decoration:undeline; }  
  
#steuerunglinks {  
  padding, margin, usw...  
  }

Oder? Ich habe dann für ein Element "steuerunglinks" zwei Klassen definiert, die eine Klasse verwende ich in der index.html und die Andere in der thema1.html. Beide unterschiedliche Klassen sind in der gemeinsamen design.css, wo jede ihre Verweisformatierung abbekommt....sehe ich das richtig oder ist da irgendwo ein Denkfehler?

LG, die Bine

[Beat]

Ah, dann verstehe ich. Wenn der Class-Befehl auf das Element
"steuerunglinks" angewendet werden soll, dann sähe der HTML-Code dafür also so aus:

Hier hast du noch html und CSS Syntax nachzulernen.

<element />
ist eine für die Semantikdiskussion aus XHTML übliche Kurzschreibweise für
   <element></element>

index.html

<a class="external warning" />

<div id="steuerunglinks"
  <p><a href="...... .html">.........</a></p>
  <p><a href="...... .html">.........</a></p>
  <p><a href="...... .html">.........</a></p>
</div>

>   
  
Ist insgesamt schlechtes Markup  
du willst wohl eher:  
  
~~~html
  
<ul class="steuerunglinks">  
  <li><a href="example.html">example</a></li>  
  <li><a href="example.html">example</a></li>  
  <li><a href="example.html">example</a></li>  
</ul>  

mit den zugehörigen CSS Selektoren:
ul.steuerungslinks
  { margin:0; padding:0; list-style:none; }
ul.steuerungslinks li
  { margin:0; padding:0; }
ul.steuerungslinks li a
  { text-decoration:none; }

mfg Beat

[Detlef G.]

Hallo Sabine

Sagen wir in der ersten Formatierung alle Links rot
in der zweiten Formatierung alle Links blau

Was unterscheidet die Links die rot sein sollen von denen die blau sein sollen?
Oder anders ausgedrückt, warum soll ein Teil rot, der andere blau sein?
Stehen diese beiden Sorten von Links durcheinander oder lassen sie sich gruppieren?

Auf Wiederlesen
Detlef