✔ Hebt ein Stylesheet den Anderen auf?

Status
Nicht offen für weitere Antworten.
svennson hat gesagt.:
Hi,
also ich hab jetzt bestimmt fünfzig Varianten ausprobiert, aber es währt sich immer noch dagegen zu funktionieren..
Zum Vergrößern anklicken....

Poste mal deinen Code. Deinen korrigierten Code. Und zwar korrigiert nach Gumbos oder meinem Vorschlag - beides funktioniert nämlich. Und das habe ich jetzt auf 4 Browsern getestet :)

Also, investiere nochmal die Minute, drucke dir meinetwegen unsere Quellcodes aus, halte sie neben den Bildschirm, korrigiere eventuelle Fehler und probiere dann nochmal aus. Sollte es dann immer noch nicht funktionieren, dann mach ein Copy&Paste deines angeblich korrekten Codes hier in dieses Posting.
Dann können wir dir besser helfen.

Gruß
 
Hi,
wenn ich es nach euren Vorschlägen bearbeite, dann funktioniert es auch, aber die Links werden überall verändert und dass soll nicht passieren.
Es sollen nur die Links in #links verändert werden.
Mein Code dazu sieht folgendermaßen aus, wobei er beim IE auch noch nicht so angezeigt wird wie ich mir das wünsche:
Code: 
/*Aussehen der einzelnen Bereiche*/
 html, body {
  	width: 100%;
  	height: 100%;
  	margin: 0;
  	border: 0;
  	padding: 0;
  
  }
  body {
  background-color:#fff;
  overflow: hidden;  /* Scrollbalken im Fenster unterbinden */
  }
  
  #mitte{
  position:absolute;
  top:125px;
  bottom:0;
  left:125px;
  right:0;
  overflow:auto;
  }
  
 *html #mitte{
 top:0;
 left:0; 
 width:100%;
 height:100%;
 border-top-width:125px;
 border-left-width:125px;
 border-bottom-width:0;
 border-right-width:0;
 border-style:solid;
}

#mitte .inhaltDiv{
margin:30px;
}

#oben{
position:absolute;
top:0;
left:0;
right:0;
height:100px;
padding:0;
overflow:hidden;
background-color:white;
z-index:2;
}

*html #oben{
width:100%;
height:100px;
}

#oben .inhalDiv{
margin:10px;
}

#links{
position:absolute;
background-color:#0000FF;
top:125px;
left:0;
bottom:100;
width:125px;
padding:0;
overflow:hidden;
z-index:1;
}

*html #links{
top:0;
width:125px;
height:100%;
border-top-width:125px;
border-bottom-width:100;
border-left-width:0;
border-right-width:0;
border-style:solid;
}

#links .inhaltDiv{
margin:10px;
}

#arriba{
position:absolute;
top:100;
left:0;
right:0;
height:25px;
padding:0;
overflow:hidden;
background-color:#0000FF;
z-index:3;
}

*html #arriba{
width:100%;
height:25px;
}

#abajo{
position:absolute;
background-color:#fff;
top:500;
left:0;
bottom:0;
width:125px;
height:100px;
padding:0;
overflow:hidden;
z-index:4;
}

*html #abajo{
width:125px;
height:100px;
border-left-width:0;
border-bottom-width:0;
}
#abajo .inhaltDiv{
margin:20px;
}

/*Aussehen von Links etc.*/
#links .inhaltDiv a:link,
a:visited{
color: #fff;
font: italic 14pt/16pt Arial;
text-decoration:none;
}

#links .inhaltDiv a:hover{
font: italic 14pt/16pt Arial;
Text-decoration:overline;
}

MFG,
Sven
 
[…] aber die Links werden überall verändert und dass soll nicht passieren. Es sollen nur die Links in #links verändert werden.
Zum Vergrößern anklicken....
Dann funktioniert mein vorheriger Vorschlag definitiv!

Vielleicht solltest du unsere Vorschläge mal 1:1 übernehmen und nicht immer besserwisserische Verbesserungen vornehmen, denn #links .inhaltDiv a:link, #links .inhaltDiv a:visited{ … } ist nicht das selbe wie #links .inhaltDiv a:link, a:visited { … }. Du solltest dich unbedingt mit den Selektoren von CSS auseinandersetzen.
 
Gumbo hat gesagt.:
Vielleicht solltest du unsere Vorschläge mal 1:1 übernehmen und nicht immer besserwisserische Verbesserungen vornehmen, denn #links .inhaltDiv a:link, #links .inhaltDiv a:visited{ … } ist nicht das selbe wie #links .inhaltDiv a:link, a:visited { … }. Du solltest dich unbedingt mit den Selektoren von CSS auseinandersetzen.
Zum Vergrößern anklicken....
Da es gestern mit deinem Vorschlag nicht funktioniert hat, habe ich es natürlich versucht richtig zu machen und das hat mit besserwisserei nichts zu tun. Wenn ich ein Besserwisser wäre, dann würde ich bestimmt nicht hier im Forum Fragen stellen..;)

Jetzt klappt es übrigends alles, außer das a:active, aber das ist jetzt auch egal.
Danke nochmal für eure Hilfe, ich werd das dann mal als erledigt markieren.

MFG,
Sven
 
Was stellst du dir eigentlich unter dem a:active vor? A:active ändert deinen Link nur, wenn der User mit der Maus draufklickt und die Maustaste hält. Mehr dazu hier:
http://www.css4you.de/active.html
Und glaub mir, die meisten User bemerken diesen Effekt nichtmal.

Das einzige, wofür a:active wirklich gut ist, gilt für den Fall, dass du deine Seite zugänglich machen möchtest.
Beim Durchtabben der Links auf deiner Seite wird nämlich das a:active aktiv (was für ein Wortspiel) ;). Wenn man die a:active-Links nun markant einfärbt, kann ein User auch ohne Maus bequem auf deiner Seite navigieren.

Aber mal unter uns: Findest du das overline nicht auch hässlich? :)
 
sh0x hat gesagt.:
A:active ändert deinen Link nur, wenn der User mit der Maus draufklickt und die Maustaste hält. […] Das einzige, wofür a:active wirklich gut ist, gilt für den Fall, dass du deine Seite zugänglich machen möchtest. Beim Durchtabben der Links auf deiner Seite wird nämlich das a:active aktiv (was für ein Wortspiel) ;).
Zum Vergrößern anklicken....
Nicht ganz. Die Pseudo-Klasse :active gilt, während ein Element vom Benutzer aktiviert wird. Beispielsweise könnte das zwischen den Zeitpunkten sein, wo der Benutzer die Maustaste drückt und sie wieder loslässt. Die Pseudo-Klasse :focus hingegen gilt, während ein Element den Fokus hat. Dieser Fokus kann durch Tastatureingaben aber auch durch Mauseingaben verändert werden.
 
Im Prinzip hast du Recht, von der Begrifflichkeit habe ich es etwas ungenau formuliert. :)
Allerdings macht a:active zumindest mit der Background-Color das gleiche wie focus: Wenn der Fokus drauf ist, ändert sich die Hintergrundfarbe (was ja widersprüchlich ist, da für den Fokus das a:focus bestimmt sein soll). Und focus ist ja leider bisher nicht vom IE unterstützt.
Deshalb würde ich für die Zugänglichkeit a:active nehmen. Immerhin funktioniert es bei allen gängigen Browsern mit Ausnahme des Netscape 4. Focus ist eigentlich für Formularelemente vorgesehen. Hoffentlich wird es bald von den aktuellen Browsern unterstützt.
 
Du hast recht, denn der Internet Explorer setzt anscheinend auch einen Verweis als aktiver, auch wenn auf diesem nur der Fokus liegt. Dennoch sind die Pseudoklassen :active und :focus nicht das selbe:
HTML: 
<p><a href="#">Beispieltext</a> <a href="#">Beispieltext</a> <a href="#">Beispieltext</a></p>
Code: 
a:active {
	color:			#000;
	background-color:	#fe0;
}
a:focus {
	color:			#000;
	background-color:	#ccc;
}
Wenn beispielsweise der erste Verweis aktiv ist und durch die Tabulator-Taste der nächste Verweis fokusiert wird, wird dieser in modernen Browsern anders dargestellt als der erste.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück