css reihenfolge

[patrick123]

Hallo, kurze frage undzwar übe ich gerade html/css und hab leider ein Verständnissfehler.

Ich habe hier in meiner externen css Datei eine id vergeben die aber nur funktioniert wenn diese ID mit Anweisung "on top" steht, wenn ich diese ID nach unten schiebe dann wird sie nicht erkannt, woran liegt das, dass habe ich noch nicht versanden. Hier einmal der Quelltext und zwar geht es um "#erstaunlich" wenn ich es so positioniere wie hier, funktioniert es, jedoch wenn ich es unter die Familie der "#elixire" packe, wird es nicht umgesetzt, woran liegt das?

body {
  font-size:           small;
  font-family:         Verdana, Helvetica, Arial, sans-serif;
  line-height:         1.6em;
}

h1, h2 {
  color:               #007e7e;
}

h1 {
  font-size:           150%;
}

h2 {
  font-size:           130%;
}
#erstaunlich {
width: 200px;

}
.garantie {
  font:    small/1.6em Verdana, Helvetica, Arial, sans-serif;
  color:               #444444;
  border:    white dashed 1px;
  background-color:    #a7cece;
  padding:             25px;
  padding-left:        80px;
  margin:              30px;
  margin-right:        250px;
  white url(bilder/hintergrund.gif) repeat-x;
}

#fusszeile {
   font:   small/1.6em center green Verdana,Helvetica, sans-serif;
   margin:   30px 0 0 0 ;
   }

#elixire {
   float: right;
   line-height: 1.7;
   border-width: thin;
   border-style: solid;
   border-color: #007e7e;
   width: 200px;

padding: 0 20px 20px 20px;

margin: 0 0 0 20px;

text-align: center;

background-image: url(bilder/cocktail.gif);
   background-repeat: repeat-X;

}

#elixire h2 {
   color: black;

}

#elixire h3 {
  color:  #f00;
}

#elixire a:link {
color: #007e7e;
}

#elixire a:visited {
color: #333;
}

#elixiere a:hover {
background: #f88396;
color: #0d5353;

.cd {
font-style: italic;
}

.interpret {
font-weight: bold;
}

a:link {
color: #0f0;
}

a:visited {
color: #f00;
}

a:hover {
color: yellow;
}

Vielen dank für eure Hilfe!
Patrick123

[Matthias Apsel]

Om nah hoo pez nyeetz, patrick123!

http://wiki.selfhtml.org/wiki/CSS/Kaskade

Matthias

[Gunther]

Om nah hoo pez nyeetz, Matthias!

http://wiki.selfhtml.org/wiki/CSS/Kaskade

Die zwei ID-Selektoren haben dieselbe Spezifität und da eine ID dokumentweit eindeutig sein muss, ist es in diesem Fall völlig egal, wo die jeweiligen Regeln in der CSS Datei stehen.

Gruß Gunther

[1UnitedPower]

Meine Herren,

> #elixiere a:hover {  
> 	background: #f88396;  
> 	color: #0d5353;

Es fehlt eine schließende Klammer.

[Gunther]

Hallo!

Bitte benutze die entsprechenden Möglichkeiten der Code-Auszeichnung hier im Forum.

body {  
  font-size:           small;  
  font-family:         Verdana, Helvetica, Arial, sans-serif;  
  line-height:         1.6em;  
}  
  
h1, h2 {  
  color:               #007e7e;  
}  
  
h1 {  
  font-size:           150%;  
}  
  
h2 {  
  font-size:           130%;  
}  
#erstaunlich {  
	width: 200px;  
  
}  
.garantie {  
  font:				   small/1.6em Verdana, Helvetica, Arial, sans-serif;  
  color:               #444444;  
  border:			   white dashed 1px;  
  background-color:    #a7cece;  
  padding:             25px;  
  padding-left:        80px;  
  margin:              30px;  
  margin-right:        250px;  
  white url(bilder/hintergrund.gif) repeat-x;  
}  
  
#fusszeile {  
   font: 			  small/1.6em center green Verdana,Helvetica, sans-serif;  
   margin:			  30px 0 0 0 ;  
   }  
  
  
#elixire {  
   float: right;  
   line-height: 1.7;  
   border-width: thin;  
   border-style: solid;  
   border-color: #007e7e;  
   width: 200px;  
  
   padding: 0 20px 20px 20px;  
  
   margin: 0 0 0 20px;  
  
   text-align: center;  
  
   background-image: url(bilder/cocktail.gif);  
   background-repeat: repeat-X;  
  
}  
  
#elixire h2 {  
   color: black;  
  
}  
  
#elixire h3 {  
  color:  #f00;  
}  
  
#elixire a:link {  
	color: #007e7e;  
}  
  
#elixire a:visited {  
	color: #333;  
}  
  
#elixiere a:hover {  
	background: #f88396;  
	color: #0d5353;  
  
  
  
  
.cd {  
	font-style: italic;  
}  
  
.interpret {  
	font-weight: bold;  
}  
  
a:link {  
	color: #0f0;  
}  
  
a:visited {  
	color: #f00;  
}  
  
a:hover {  
	color: yellow;  
}

CSS macht nur "Sinn", wenn man den dazugehörigen HTML-Code ebenfalls kennt/ sehen kann.

Nach deiner bisherigen Beschreibung dürfte es keine Rolle spielen, an welcher Stelle in der CSS-Datei du diese Regel notierst.

Wenn du allerdings "Fehler" (Syntax) in deine CSS-Datei einbaust, dann kann es passieren, dass nachfolgende Styles vom Browser "nicht erkannt/ angewendet" werden.

So z.B. der Fall bei:

  
.garantie {  
  font:           small/1.6em Verdana, Helvetica, Arial, sans-serif;  
  color:               #444444;  
  border:         white dashed 1px;  
  background-color:    #a7cece;  
  padding:             25px;  
  padding-left:        80px;  
  margin:              30px;  
  margin-right:        250px;  
  white url(bilder/hintergrund.gif) repeat-x;  
}

Und bei

  
#elixiere a:hover {  
  background: #f88396;  
  color: #0d5353;  

Wenn du diese Fehler behoben hast, wirst du sehen, dass es für deinen Fall egal ist, wo die Regel steht.

Trotzdem sind die Kaskade und die Spezifität zwei elementare Bestandteile von CSS, weshalb sich das Studium der von Matthias verlinkten Seiten auf jeden Fall lohnt.

Gruß Gunther