A:hover Angaben werden nicht übernommen

trashhero · #1 (**permalink**) 02.07.2006, 20:52

Hi,
leider wird die Angabe "a:hover { color:...}" nicht übernommen. Die Angabe "background" aber schon.

CSS:

Code:

/* Allgemeines */
* {
	margin: 0;
	padding: 0;
	}
body {
	text-align: center;
	font-size: 16px;
	font-family: Verdana, Arial;
	}
ul {
	list-style: circle inside;
	}
img {
	behavior: url("pngbehavior.htc");
	border: 0;
}
/* Header */
#header {
	height: 110px;
	background: #2B8A06 url(images/background.jpg);
	}
/* Navigation */
ul#navigation li {
	display: inline;
	}
ul#navigation a {
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	padding: 0 5px 0 5px;
	margin: 0 15px 0 0;
	text-decoration: none;
	color: #fff;
	background: #5DA500 url(images/background.jpg) 0 -40px;
	}
ul#navigation a:hover {
	color: #000;
	background: #fff;
	}
ul#navigation {
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	background: #555 url(images/navigation.jpg);
	font: 1.3em Georgia, Arial;
	font-size: 1.3em;
	text-align: center;
	}
/* Content */
#content {
	width: 64%;
	float: left;
	text-align: left;
	border-right: 2px solid #498706;
	color: #333;
	}
#content, #sidebar {
	font: 0.8em Verdana, Arial;
	}
#content p {
	margin: 5px 0 0 0;
	}
/* Postneu */
.postneu {
	background: #5DAE07;
	padding: 5px;
	border-bottom: 5px solid #498706;
	color: #fff;
	margin: 0 0 15px 0;
	}
.postneu h2 {
	background: #F6AD00;
	}
.postneu .meta {
	margin: 2px 0 10px 0;
	font-size: 0.9em;
	color: #F6AD00;
	}
.postneu .meta img, .post .meta img {
	margin: 0 3px 0 0;
	}
.postneu a {
	color: #fff;
	text-decoration: underline;
	}
.postneu .postcontent, .postneu .meta {
	border-bottom: 1px solid #498706;
	}
.postneu #neu {
	float: right;
	height: 50px;
	width: 50px;
	}
/* Post */
.post .meta {
	margin: 2px 0 10px 0;
	font-size: 0.9em;
	}
.post .postcontent, .post .meta {
	border-bottom: 1px solid #5DAE07;
	}
.post {
	padding: 5px;
	border-bottom: 1px solid #000;
	margin: 0 0 15px 0;
	}
.post h2 {
	color: #5DAE07;
	}
.post a {
	color: #5DAE07;
	text-decoration: underline;
	}
.post a:visited {
	color: #000;
	}
.post .meta {
	color: #5DAE07;
	}
/* Sidebar */
#sidebar {
	background: #555 url(images/sidebar.jpg) repeat-x left bottom;
	width: 34%;
	border-left: 2px solid #000;
	float: right;
	text-align: left;
	color: #fff;
	padding: 5px 0;
	}
#sidebar p {
	margin: 5px;
	}
#sidebar h3 {
	font: bold 1.2em Trebuchet MS, Arial;
	color: #5DAE07;
	margin: 5px 0 0 5px;
	}
#sidebar a {
	color: #fff;
	}
#sidebar a:hover {
	color: #5DAE07;
	}
#footer {
	border-top: 1px dotted #fff;
	margin: 10px 0 0 0;
	text-align: center;
	}
ul.liste {
	list-style: none;
	border-top: 1px solid #393939;
	margin: 0 0 0 5px;
	}
ul.liste li {
	display: inline; /* Keine ungewünschten Abstände im IE zwischen den Elementen */
	}
ul.liste a {
	background: url(images/kateg.jpg) repeat-x;
	padding: 2px;
	border: 1px solid #393939;
	border-right: 0;
	border-top: 0;
	display: block;
	text-decoration: none;
	}
ul.liste a:hover {
	background: #5DAE07 url(images/kateghover.jpg) repeat-x;
	color: #fff;
	}
ul#feeds {
	list-style: url(images/feedicon.png) inside;
	margin: 0 0 0 5px;
	}
#metainfo {
	background: #5DAE07;
	border: 2px solid #000;
	border-left: 0;
	border-right: 0;
	padding: 5px;
	}
#metainfo h3 {
	color: #fff;
	margin: 0 0 0 3px;
	}
/* Kommentare */
ul#commentlist li {
	background: #5DAE07;
	border: 2px solid #498706;
	border-left: 0;
	border-right: 0;
	padding: 5px;
	}
ul#commentlist li:hover {
	background: #5DAE07 url(images/comment.jpg) no-repeat;
	}
ul#commentlist {
	list-style: none;
	}
ul#commentlist h4 {
	margin: 0 0 0 3px;
	font: bold 1.2em Verdana;
	}
ul#commentlist .commentmeta {
	font-size: 0.8em;
	}
ul#commentlist a:hover {
	color: #000;
	}

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" >
<head>
<title>X-Tream Lan, die Lan der Klasse 10c</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="format.css" />
</head>
<body>
<div id="header">
 <h1><img src="images/logo.jpg" alt="X-Tream Lan" /></h1>
</div>
<ul id="navigation">
 <li><a href="#">Startseite</a></li>
 <li><a href="#">Archiv</a></li>
 <li><a href="#">Bilder</a></li>
 <li><a href="#">Forum</a></li>
 <li><a href="#">Impressum</a></li>
</ul>
<div id="content">
 <div class="postneu">
  <img src="images/neu.png" alt="NEU!" id="neu" />
  <h2>Neues Design</h2>
  <div class="meta">
   <img src="images/autor.gif" alt="Autor:" />Fritz | <img src="images/datum.gif" alt="Datum" />3.Juni 2006
  </div>
  <div class="postcontent">
  <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin diam quam, aliquet ac, dignissim non, dictum in, quam. Pellentesque accumsan viverra orci. Aliquam erat volutpat. Curabitur euismod leo a justo. Nullam mattis nunc. Morbi vel purus id orci ornare ultricies. Sed et diam id nibh pretium posuere. Vivamus molestie velit vel magna. Donec sapien. Curabitur imperdiet bibendum dui. Donec id ante. Nunc tristique nisl id nisl. Vivamus ac erat dignissim enim congue elementum. Quisque imperdiet pede et velit. Fusce consequat. Morbi lacus leo, tristique pellentesque, imperdiet pretium, viverra vitae, lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ac massa sit amet lacus laoreet accumsan. Nunc magna. Praesent cursus lorem at tortor.
</p>
 <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin diam quam, aliquet ac, dignissim non, dictum in, quam. Pellentesque accumsan viverra orci. Aliquam erat volutpat. Curabitur euismod leo a justo. Nullam mattis nunc. Morbi vel purus id orci ornare ultricies. Sed et diam id nibh pretium posuere. Vivamus molestie velit vel magna. Donec sapien. Curabitur imperdiet bibendum dui. Donec id ante. Nunc tristique nisl id nisl. Vivamus ac erat dignissim enim congue elementum. Quisque imperdiet pede et velit. Fusce consequat. Morbi lacus leo, tristique pellentesque, imperdiet pretium, viverra vitae, lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ac massa sit amet lacus laoreet accumsan. Nunc magna. Praesent cursus lorem at tortor.
</p>
  </div>
  <a href="#">>> Alles lesen?</a>
 </div>
 <div class="post">
  <h2>Nächste Lan in Planung</h2>
  <div class="meta">
   <img src="images/autor.gif" alt="Autor:" />Lukas | <img src="images/datum.gif" alt="Datum" />4.Juni 2006
  </div>
  <div class="postcontent">
  <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="http://google.de">Proin</a> diam quam, aliquet ac, dignissim non, dictum in, quam. Pellentesque accumsan viverra orci. Aliquam erat volutpat. Curabitur euismod leo a justo. Nullam mattis nunc. Morbi vel purus id orci ornare ultricies. Sed et diam id nibh pretium posuere. Vivamus molestie velit vel magna. Donec sapien. Curabitur imperdiet bibendum dui. Donec id ante. Nunc tristique nisl id nisl. Vivamus ac erat dignissim enim congue elementum. Quisque imperdiet pede et velit. Fusce consequat. Morbi lacus leo, tristique pellentesque, imperdiet pretium, viverra vitae, lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ac massa sit amet lacus laoreet accumsan. Nunc magna. Praesent cursus lorem at tortor.
</p>
  </div>
  <a href="#">>> Alles lesen?</a>
 </div>
</div>
<div id="sidebar">
 <h3>Feeds</h3>
 <ul id="feeds">
  <li><a href="#">RSS Feed Beiträge</a></li>
  <li><a href="#">RSS Feed Kommentare</a></li>
  <li><a href="#">RSS Feed All-in-one ;)</a></li>
 </ul>
 <h3>Infos</h3>
 <p><a href="#">Was ist ein Weblog?</a><br />
 <a href="#">Was ist RSS? / Was ist ein RSS Feed?</a><br />
 <a href="#">Registrieren</a> / <a href="#">Login</a><br />
 Gilt nur für die Webseite, nicht für's Forum!</p>
 <h3>Kategorien</h3>
 <ul class="liste">
  <li><a href="#">Planung</a></li>
  <li><a href="#">Bilder</a></li>
  <li><a href="#">Internes</a></li>
  <li><a href="#">Sonstiges</a></li>
 </ul>
 <h3>Die letzten Kommentare</h3>
 <ul id="lastcomments">
  <li>Keine Kommentare</li>
 </ul>
 <div id="footer">
  <p><a href="#">(X)HTML</a> | <a href="#">CSS</a> | <a href="#">Administration</a> | <a href="#">WordPress</a><br /><a href="#">Impressum</a> | <a href="#">Credits</a></p>
 </div>
</div>
</body>
</html>

Yhi · #2 (**permalink**) 02.07.2006, 20:58

Code:

ul#navigation a:hover {
	color: #000;
	background: #fff;
	}

Meinst du in diesem Teil?

Ich hab das grad ausprobiert... funktioniert bei mir ohne Probleme (mit Firefox).

trashhero · #3 (**permalink**) 02.07.2006, 21:05

Ups, ich depp. Total vergessen anzugeben welche Liste ich meine.
Also ich meine das:

Code:

ul.liste a:hover {
	background: #5DAE07 url(images/kateghover.jpg) repeat-x;
	color: #fff;
	}

Das funzt nicht.

Yhi · #4 (**permalink**) 02.07.2006, 21:09

Aso ok. Nimm

Code:

#sidebar a:hover {
	color: #5DAE07;
	}

raus. Oder so:

Code:

ul.liste a:hover {
	background: #5DAE07 url(images/kateghover.jpg) repeat-x;
	color: #fff !important;
	}

heiko_rs · #5 (**permalink**) 02.07.2006, 21:10

Zitat:

Zitat von trashhero

Code:

ul#commentlist li:hover {
	background: #5DAE07 url(images/comment.jpg) no-repeat;
	}

Du weißt, daß das im IE nicht geht? Das solltest Du anders lösen.

heiko_rs · #6 (**permalink**) 02.07.2006, 21:14

Zitat:

Zitat von Yhi

Aso ok. Nimm

Code:

#sidebar a:hover {
	color: #5DAE07;
	}

raus. Oder so:

Code:

ul.liste a:hover {
	background: #5DAE07 url(images/kateghover.jpg) repeat-x;
	color: #fff !important;
	}

Oder Spezifität erhöhen: #sidebar ul.liste a:hover

trashhero · #7 (**permalink**) 02.07.2006, 21:45

So, danke für die Hilfe. Das !important hat gereicht, damit es bei Opera, IE und FF funzt. Mehr Browser hab z.Z. nicht zum Testen da.

Wegen der "ul#commentlist li:hover": Das ist sowieso noch nicht fertig und das Bild als Hover sieht sowieso nicht sehr gut, von daher wird das wohl noch mal neu gemacht.

Danke für die schnelle Hilfe.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Ausrichtung Kalender	greece4u	CSS	20	14.05.2012 13:32
Seite links ausrichten	like.no.other	CSS	10	26.01.2011 01:10
Ungewöhnlicher abstand beim clearen von floats	adrianno	CSS	14	16.09.2009 14:20
Hilfe bei Positionierung eines Menüs	opa-rudi	CSS	0	18.11.2008 11:21
#boxes a:hover.info: 2.posting mit css !!!	marioN	CSS	5	25.01.2004 17:04