| trashhero |
02.07.2006 20:52 |
A:hover Angaben werden nicht übernommen
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>
|
