✔ CSS: Befehle verschachteln

S

S-lord

Mitglied
Hi.
Folgendes:
Ich habe in einem Stylesheet links (a) und auch die jeweiligen Festlegungen dazu erstellt, wie sie auszusehen haben, wenn man drüber scrollt.
Hier dazu ein Ausschnitt aus dem Code:

Code: 
a:link {
	font-style:italic;
	color:#54b4ff;
	text-decoration:none;
}
		
a:hover {
	font-style:italic;
	color:#54b4ff;
	text-decoration:none;
	/*background-color:54b4ff;*/
	padding-bottom:0px;
	border-bottom:1px dashed #ffffff;
}
		  
a:visited {
	font-style:italic;
	color:#54b4ff;
	text-decoration:none;
}

a:visited:hover {
	font-style:italic;
	color:#54b4ff;
	text-decoration:none;
	/*background-color:54b4ff;*/
	padding-bottom:0px;
	border-bottom:1px dashed #ffffff;
}

Nun möchte ich, dass um Bilder ein Rahmen erscheint, 1px.
Das funktioniert auch noch:

Code: 
img {
  border: 1px solid #3291db;
  margin: 1px;
  padding: 1px;
}


Nun kommt aber das Problem: Ich möchte, dass man bei Bildern, die verlinkt sind, beim Drüberscrollen einen Farbwechsel des Rahmens bekommt. Stattdessen passiert das, was ich unter a:hover definiert habe.

Ich habe es folgendermaßen versucht:

Code: 
img a:hover {
	padding-bottom:0px;
	border-bottom:0px;
  border: 1px solid #ffffff;
}


Welchen kleinen Fehler übersehe ich? Ist die Schreibweise falsch?
Dankeschön für baldige Hilfe! =)
 
Hi,

von diesem Markup ausgehend
HTML: 
<a href="#"><img ...></a>

gehört in diesem Selektor für Nachfahren die Reihenfolge der Elemente getauscht, denn das <img>-Element ist das Nachfolgeelement des <a>-Elements, und nicht umgekehrt, weshalb dein Versuch auch mißlingt:
CSS: 
/* aus */
img a:hover {
	padding-bottom:0px;
	border-bottom:0px;
  border: 1px solid #ffffff;
}

/* wird */
a:hover img {
	padding-bottom:0px;
	border-bottom:0px;
  border: 1px solid #ffffff;
}

Und damit diese Regel im (X)HTML-Dokument auch nur für die verlinkten Bilder gilt, sollte dieser Selektor besser so lauten:
CSS: 
a img {
  border: 1px solid #3291db;
  margin: 1px;
  padding: 1px;
}

mfg Maik
 
Ich danke dir vielmals!
Und bevor ich jetzt extra nen neuen Thread aufmache deswegen:
Wenn ich nur mit 2 Farben im Stylesheet fungiere, diese aber öfters mal ändere, ist es mühseelig, jedes mal bei allen Einträgen die 2 Farben zu verändern.
Kann ich nicht bei den Farbdefinitionen jeweils eine Variable eingeben, und diese am Anfang der CSS Datei festlegen?
 
Wenn sie überall unter gleichem Attribut auftaucht kann man es so zusammenfassen (Beispiel):
Code: 
a, b, dd, i, p, q, s, u
{
  color: #f00;
}

Damit setzt man eines für mehrere Elemente (hier: <a>, <b>, <dd>, <i>, <p>, <q>, <s> und <u>).
 
ZodiacXP hat gesagt.:
Wenn sie überall unter gleichem Attribut auftaucht kann man es so zusammenfassen (Beispiel):
Code: 
a, b, dd, i, p, q, s, u
{
  color: #f00;
}

Damit setzt man eines für mehrere Elemente (hier: <a>, <b>, <dd>, <i>, <p>, <q>, <s> und <u>).
Zum Vergrößern anklicken....
Oder um es mal auf dein gezeigtes CSS anzuwenden, in dem sich ebenfalls alle Selektoren mit denselben CSS-Regeln gruppieren lassen:
CSS: 
a:link,
a:visited,
a:hover,
a:visited:hover {
        font-style:italic;
        color:#54b4ff;
        text-decoration:none;
}

a:hover,
a:visited:hover  {
        padding-bottom:0px;
        border-bottom:1px dashed #ffffff;
}

mfg Maik
 
Hier steht ja noch eine offene Frage im Raum ;-)
S-lord hat gesagt.:
Kann ich nicht bei den Farbdefinitionen jeweils eine Variable eingeben, und diese am Anfang der CSS Datei festlegen?
Zum Vergrößern anklicken....
Das wäre unter Zuhilfenahme von PHP möglich, sofern auf dem Webserver verfügbar.

Hier mal ein kleines Beispiel anhand zweier CSS-Klassen:

style.php
PHP: 
<?php
header('Content-Type: text/css; charset=ISO-8859-1');

$color1 = '#000'; // Variable $color1 mit schwarzer Farbdefinition
$color2 = '#f00'; // Variable $color2 mit roter Farbdefinition
?>

p.black, 
ul.black, 
table.black td {
color:<?php echo $color1;?>;
}

p.red, 
ul.red, 
table.red td {
color:<?php echo $color2;?>;
}
index.php
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-09-05">

<title>tutorials.de | demo_S-lord</title>

<link rel="stylesheet" type="text/css" href="style.php" media="screen">

</head>
<body>

<p class="black">Textabsatz mit schwarzer Schriftfarbe</p>
<ul class="black">
    <li>Listeneintrag mit schwarzer Schriftfarbe</li>
</ul>
<table border="1" class="black">
       <tr><td>Tabellenzelle mit schwarzer Schriftfarbe</td></tr>
</table>

<p class="red">Textabsatz mit roter Schriftfarbe</p>
<ul class="red">
    <li>Listeneintrag mit roter Schriftfarbe</li>
</ul>
<table border="1" class="red">
       <tr><td>Tabellenzelle mit roter Schriftfarbe</td></tr>
</table>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück