extra pseudoformat für div-bereich

[thogompf]

hab mal ne frage:

wie kann ich für einen div-bereich
extra formatierungen für a:link vornehmen?

der div-bereich benutzt die id "menueleiste"
in der links anders dargestellt werden sollen,
als in den anderen div-bereichen.

das ganze soll aber in einer externen css-datei
definiert sein. will das nicht lokal in dem
div-bereich machen.

[David Tibbe]

Hallo thogompf,

wie kann ich für einen div-bereich extra formatierungen für a:link vornehmen?
der div-bereich benutzt die id "menueleiste"

#menueleiste a:link { background-color: #f00; }

Grüße
  David

[Arx]

Hallo,

wie kann ich für einen div-bereich
extra formatierungen für a:link vornehmen?

der div-bereich benutzt die id "menueleiste"
in der links anders dargestellt werden sollen,
als in den anderen div-bereichen.

#menueleiste a:link { /* Hier die Formatierungen einfügen */ }

das ganze soll aber in einer externen css-datei
definiert sein. will das nicht lokal in dem
div-bereich machen.

Formate zentral in separater CSS-Datei definieren

Gruß aus http://www.bonn.de/
Sven

[thegompf]

okay, aber wo packe ich den rest hin?

#menueleiste {
   background-image: url("gfx/menue_leiste.gif");
   background-repeat: repeat-x;
   padding: 0;
   margin: 0;
   border: 0;
   height: 16px;
   width: 780px;
   color: #FFFFFF;
   font-family: Verdana, Helvetia, Arial, sans-serif;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   }

[Arx]

Hallo,

okay, aber wo packe ich den rest hin?

#menueleiste {
   background-image: url("gfx/menue_leiste.gif");
   background-repeat: repeat-x;
   padding: 0;
   margin: 0;
   border: 0;
   height: 16px;
   width: 780px;
   color: #FFFFFF;
   font-family: Verdana, Helvetia, Arial, sans-serif;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   }

Ebenfalls in die externe CSS-Datei. Du kannst dein komplettes CSS dorthin auslagern, sodass dein HTML-Quelltext "stilfrei" ;-) bleibt.

Gruß aus http://www.bonn.de/
Sven

[thegompf]

also schreibe ich das so?

#menueleiste {
   background-image: url("gfx/menue_leiste.gif");
   background-repeat: repeat-x;
   padding: 0;
  margin: 0;
  border: 0;
  height: 16px;
   width: 780px;
   color: #FFFFFF;
   font-family: Verdana, Helvetia, Arial, sans-serif;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   }

#menueleiste a:link {fotmatierungen};

ich muss sagen, dass ich das gerade lerne und ich die ganzen
sachen noch versuche zu ordnen in meinem kopf

[Arx]

Hallo,

also schreibe ich das so?

#menueleiste {
   background-image: url("gfx/menue_leiste.gif");
   background-repeat: repeat-x;
   padding: 0;
  margin: 0;
  border: 0;
  height: 16px;
   width: 780px;
   color: #FFFFFF;
   font-family: Verdana, Helvetia, Arial, sans-serif;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   }

#menueleiste a:link {fotmatierungen};

Genau. Diesen CSS-Code in eine unformatierte Textdatei schreiben und diese Textdatei unter einem Namen mit der Endung css speichern. Diese CSS-Datei dann wie hier beschrieben in deine HTML-Dateien einbinden.

ich muss sagen, dass ich das gerade lerne und ich die ganzen
sachen noch versuche zu ordnen in meinem kopf

Das wird schon noch. SelfHTML hilft. :-)

Gruß aus http://www.bonn.de/
Sven

[thegompf]

danke, hab ich gemacht und klappt fast...
die hover-funktion klappt aber nicht...

#menueleiste {
   background-image: url("gfx/menue_leiste.gif");
   background-repeat: repeat-x;
   padding: 0;
  margin: 0;
  border: 0;
  height: 16px;
   width: 780px;
   color: #FFFFFF;
   font-family: Verdana, Helvetia, Arial, sans-serif;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   }

#menueleiste a:link { font-weight:bold; color:#FFFFFF; text-decoration:none; }
#menueleiste a:hover { font-weight:bold; color:#FFFF00; }
#menueleiste a:visited { font-weight:bold; color:#CCCCFF; text-decoration:none; }
#menueleiste a:active { font-weight:bold; color:#FFFFFF; text-decoration:none; }

[David Tibbe]

Hallo thegompf,

Schau dir http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus und was dort zu der Reihenfolge steht genau an.

Grüße
  David

[thegompf]

Okay, alles klar.

Habt mir sehr geholfen!

DANKE!!!

Gruß,
thegompf

Hallo thegompf,

Schau dir http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus und was dort zu der Reihenfolge steht genau an.

Grüße
  David

[MudGuard]

Hi,

#menueleiste a:hover { font-weight:bold; color:#FFFF00; }
#menueleiste a:visited { font-weight:bold; color:#CCCCFF; text-decoration:none; }

die beiden Selektoren haben dieselbe Specificity.
Wählen beide dasselbe Element aus, gewinnen die Deklarationen, die weiter unten notiert sind.

Ein besuchter Link, über dem sich der Mauszeiger befindet, wird von beiden Selektoren ausgewählt (falls sich der Link in einem Element mit der id menueleiste befindet).

Die Reihenfolge ist also wichtig.

In den meisten Fällen wird der gewünschte Effekt durch die Reihenfolge

:link :visited :focus :hover :active

erreicht.

cu,
Andreas

[David Tibbe]

Hallo thegompf

okay, aber wo packe ich den rest hin?

Das Style-Sheet zwingt sich hierfür geradezu auf, findest du nicht?

Grüße
  David