Hover-Effekt

guenther9846 · 26 März 2011

Hallo u. guten Tag,

ich habe eine Seite erstellt. Beim vertikalen und horizontalen Menü verändert sich die Schriftfarbe von silver nach weiß, der Hintergrund jeweils nach maroon wie von mir gewünscht (im hmenue ist der Hintergrund auch maroon).

Im content habe ich mehrere Listen, bei denen es genauso gehen soll. Der Hintergrund ändert sich, die Schriftfarbe bleibt dort schwarz ... keine Ahnung welche Einstellung sich hier beißt.

Ich möchte schon, dass alles Links gleich aussehen ...

Vielen Dank im Voraus.

MfG
Günther Preiß

hier die HTML und anschließend die CSS Eingaben

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Links</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/druck.css" rel="stylesheet" type="text/css" media="print" />

<style type="text/css">
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<h1 class="auto-style3" style="width: 275px"> G P </h1>
<h2 class="auto-style4" style="width: 169px">
<span class="auto-style5">St</span> </h2>
<h5> </h5>
<p>

</p>
</div>

<div id="hmenue">
<ul class="auto-style6 c3">
<li><a href="index.html">Startseite</a></li>
<li class="c3"> </li>
<li><a href="kanzlei.html">Kanzlei</a></li>
<li class="c3"> </li>
<li><a href="leistungen.html">Leistungen</a></li>
<li class="c3"> </li>
<li><a href="news.html">News</a></li>
<li class="c3"> </li>
<li><a href="kooperationen.html">Kooperation</a></li>
<li class="c3"> </li>
<li><a href="links.html">Links</a></li>
<li class="c3"> </li>
</ul>
</div>

<div id="menue">
<ul>
<li> <a href="kontakt.html"> Kontakt </a> </li>
<li> <a href="impressum.html"> Impressum </a> </li>
</ul>
</div>

<div id="content">

<h2>Surfbrett</h2><br /><br />
<h4>Nur perfekt informiert können Sie am heutigen Markt existieren - Das Internet und meine Links helfen Ihnen dabei.</h4>
<br /><br />
<a href="Links/berufsstand.html">Berufsständische Einrichtungen</a><br />
<img src="images/Fotolia1.jpg" class="rechts" alt="" width="222" height="136"/>
<a href="Links/region.html">Regionale Behörden</a><br />
<a href="Links/bundesgerichte.html">Bundesgerichte</a><br />
<img src="images/Fotolia2" alt="" class="rechts" width="212" height="142"/>
<br/>
<a href="Links/bundesbehoerden.html">Bundesbehörden</a><br />
<a href="https://www.bsi.bund.de/cln_156/DE/Home/home_node.html" target="_blank">Sicherheit im Internet</a><br />
<img src="images/Fotolia3.jpg" class="links" width="144" height="208" alt="" />
</div>

<div id="footer">
</div>
</div>

</body>
</html>
-------------------------------------------------------------------------------
CSS:

* {
margin : 0;
padding : 0;
}
body {
font-size : 14pt;
color : black;
}

#wrapper {
width : 1023px;
border : 1px solid black;
margin : 10px auto;
background-image: url('images/verlauf_grau.jpg')
}

#header {
float : left;
width : 980px;
height : 90px;
border-bottom-color: maroon;
border-bottom-style: solid;
margin: 5px;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
}
#hmenue {
float: right;
width : 990px;
height : 20px;
margin-left:5px;
margin-right:5px;
margin-top : 90px;
padding-right: 10px;
display: block;
letter-spacing: 1px;
font-family : Arial, Helvetica, sans-serif;
}

#menue {
float : left;
width : 160px;
height: 300px;
margin-top : 200px;
padding: 5px 15px;
letter-spacing: 1px;
display: block;
font-family : Arial, Helvetica, sans-serif;
}

#content {
float : right;
width : 700px;
margin : 5px;
margin-top : 80px;
margin-right : 60px;
text-align: justify;
text-decoration: none;
font-style: normal;
font-family : Arial, Helvetica, sans-serif;
color: black;
}

#footer {
clear : both;
width : 990px;
height : 50px;
border : 4px solid maroon;
margin : 5px;
padding-top:4px;
padding-bottom:4px;
font-family : Arial, Helvetica, sans-serif;
}

.aktiv {
color : white;
font-family : Arial, Helvetica, sans-serif;
}

right top, left top {
font-size : 24pt;
text-align : center;
padding-top : 20px;
font-family : Arial, Helvetica, sans-serif;
}

#menue ul {
margin-top : 40px;
margin-left : 20px;
font-weight : normal;
font-size : 12pt;
}

#menue ul li {
list-style : none;
font-family : Arial, Helvetica, sans-serif;
margin : 10px;
}

#menue a {
font-weight: bold;
text-decoration: none;
color: #bc1001;
}

#menue a:link {
color : silver;
text-decoration : none;
}

#menue a:visited {
color: silver;
text-decoration: none;
}

#menue a:hover {
background-color : maroon;
text-decoration : none;
color : white;
}

#hmenue ul {
margin: 0;
font-size : 12pt;
font-family : Arial, Helvetica, sans-serif;
text-align:right;
background-color: maroon;
}

#hmenue ul li {
display : inline;
list-style : none;
padding-right: 10px;
}

#hmenue a {
font-weight: bold;
text-decoration: none;
color: silver;
}

#hmenue a:link {
color: silver;
text-decoration : none;
}

#hmenue a:visited {
text-decoration: none;
}

#hmenue a:hover {
background-color: maroon;
text-decoration: none;
color: white;
}

#content ul {
display : inline;
text-decoration : none;
color : black;
font-size : 12pt;
font-family : Arial, Helvetica, sans-serif;
margin-right : 10px;
margin-top : 350px;
}
#content ul li {
display: inline;
list-style : none;
font-family: Arial, Helvetica, sans-serif;
}
#content a:hover {
color: white;
background-color: maroon;
text-decoration: none;
}
#content a:link {
color: black;
text-decoration : none;
}
#content a:visited {
text-decoration : none;
color: black;
}
#content a {
font-weight: lighter;
text-decoration: none;
color: #bc1001;
}
.links {
float: left;
margin-right: 10px;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
.rechts {
float: right;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right:10px;
}
.auto-style3 {
margin-left: 400px;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style4 {
margin-left: 430px;
}
.auto-style5 {
font-family: Arial, Helvetica, sans-serif;
}
.auto-style6 {
margin-top: 9px;
margin-bottom: 0;
}
.textfeld {
margin: 15 px;
}
.submitbutton {
margin: 15px;
}
.textfeld input {
width: 250px;
padding: 4px;
display: block;
border: 1px solid #333;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.textfeld label {
display: block;
}

threadi · 26 März 2011

Achte auf die Reihenfolge in der Du Style-Angaben für Links definierst. Bei dem Menü hast Du es richtig gemacht, bei #content kommen jedoch erst die Pseudoklassen und dann noch eine Pseudoklassen-lose Definition.

Weiterhin haben die Überschriften im Content-Bereich keine Style-Angaben soweit ich sehe. Du musst also noch h2 und h4 stylen um auch dort die Schriftfarbe anzupassen.

Ich habe das auch gleich mal zu CSS geschoben da es eindeutig um Gestaltung geht.

Hover-Effekt

guenther9846

Neues Mitglied

threadi

Moderator

Neueste Beiträge