• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

hover-Effekt anpassen

C

Corraggiouno

Mitglied
Hi,

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Jaki und Klaiber</title>
<link href="css/jk.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<h1>Jaki und Klaiber</h1>
 <div id="central">
  <div id="nav">
   <ul>
    <li><a href="kontakt.php">Kontakt</a></li>
    <li><a href="stellenangebote.php">Stellenangebote</a></li>
    <li><a href="partner.php">Partner</a></li>
    <li><a href="leistungen.php">Leistungen</a></li>
    <li><a href="unternehmen.php">Unternehmen</a></li>
   </ul>
  </div><!-- end nav -->
  
  
 </div><!-- end central -->
</div>
</body>
</html>

css-code
Code: 
html {
height: 100.3%;
}

body{
font-family: Verdana, sans-serif;
font-size:0.8em;
color: #000000;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 900px;
margin:5px auto;
clear:left;
}

h1 {
background: url(../images/logo.gif) no-repeat;
height:239px;
text-indent: -999em;
}

div#central {
background: url(../images/central.gif) repeat-y;
height: 240px;
}

div#nav {
background: url(../images/nav_bg.gif) repeat-x;
float:right;
margin-right:9px;
width:883px;
}

div#nav li {
display:inline;
float:right;
margin-right:20px;
padding-left: 40px;
list-style-type:none;
}

div#nav a {
display:block;
text-decoration: none;
color:#000000;
padding:5px 2px;
}

div#nav a:link {
}

div#nav a:hover {
background: url(../images/hover.gif);
}
mein aktuelles Ergebnis:
Jaki und Klaiber
Was muss ich an meinem Code verändern, damit der hover-Effekt der Links von der Breite angeglichen werden. Also das der Hover-Effekt nicht nur so breit ist wie die Bezeichnung der Links.
Muss ich für jeden Link ein seperates Bild entwerfen und dies in einer Klasse definieren?
Ich möchte, das die Hover-Bilder direkt nebeneinander liegen.
 
Zuletzt bearbeitet:
Dann würde div#nav li aber noch weiter auseinandergedrückt.
Besser die padding aus li entfernen und dafür div#nav a zuweisen (ohne widht).
 
was mir nicht logisch erscheint, wenn mein hover-bild bzw. nav-Container Bild 30px ist und ich diese Bilder im CSS definiere, dann wird meine Navigation dennoch nur 10px breit angezeigt. Warum ist das so? Das Bild ist doch 30px breit.
 
also habs so definiert:
Code: 
html {
height: 100.3%;
}

body{
font-family: Verdana, sans-serif;
font-size:0.8em;
color: #000000;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 900px;
margin:5px auto;
clear:left;
}

h1 {
background: url(../images/logo.gif) no-repeat;
height:239px;
text-indent: -999em;
}

div#central {
background: url(../images/central.gif) repeat-y;
height: 240px;
}

div#nav {
background: url(../images/nav_bg.gif) repeat-x;
float:right;
margin-right:9px;
width:883px;

}

div#nav li {
display:inline;
float:right;
margin-right:20px;
border-right:solid;
border-width:1px;
border-color:#8F8F8F;
list-style-type:none;
}

div#nav a {
display:block;
padding-right:25px;
padding-left:25px;
text-decoration: none;
color:#000000;
}

div#nav a:link {
}

div#nav a:hover {
background: url(../images/hover.gif);
}
mein ergebnis:
Jaki und Klaiber
irgendwie sieht das ganze noch nicht so aus, wie ich mir das vorstelle.
Die Links in meiner Liste hätte ich gerne zwischen dem Border zentriert. Kann mir da auch jemand einen Tipp geben?
 
Entferne auch das margin aus div#nav li.
display: inline; kannst du auch löschen. Das soll nur einen Bug im IE beheben den es in dieser Kombination überhaupt nicht gibt.
Code: 
div#nav li {
border-color:#8F8F8F;
border-right-style:solid;
border-width:1px;
[COLOR="DarkRed"][B]/*display:inline;*/[/B][/COLOR]
float:right;
list-style-type:none;
[COLOR="#8b0000"][B]/*margin-right:20px;*/[/B][/COLOR]
}

list-style-type:none; gehört in div#nav ul
 
Zuletzt bearbeitet:
Wow, vielen Dank für deinen Tipp. Super.
Code: 
html {
height: 100.3%;
}

body{
font-family: Verdana, sans-serif;
font-size:0.8em;
color: #000000;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 900px;
margin:5px auto;
clear:left;
}

h1 {
background: url(../images/logo.gif) no-repeat;
height:239px;
text-indent: -999em;
}

div#central {
background: url(../images/central.gif) repeat-y;
height: 240px;
}

div#nav {
background: url(../images/nav_bg.gif) repeat-x;
float:right;
margin-right:9px;
width:883px;
}

div#nav ul {
list-style-type:none;
}

div#nav li {
float:right;
border-right:solid;
border-width:1px;
border-color:#8F8F8F;
}

div#nav a {
display:block;
padding-right:25px;
padding-left:25px;
text-decoration: none;
color:#000000;
}


div#nav a:link {
}

div#nav a:hover {
background: url(../images/hover.gif);

}
Jetzt hätte ich da noch Fragen:
1. Wenn ich in meinem Code, wie du gesagt hast, das display:inline herausschmeisse, was ich getan habe, durch welchen Code-Teil wird dann meine Liste horizontal dargestellt? Kann dies nicht ganz nachvollziehen

2. Ich habe ja einen rechten Rand definiert. Ist es auch möglich den Rand bei Kontakt wegzulassen. Wahrscheinlich muss ich dann explezit eine extrag Klasse definieren, oder?

3. Warum ist meine Navigation eigentlich nur ca. 10px hoch? Ich habe doch für die Navigation bzw. für den Hovereffekt ein 30px hohes Bild entworfen. Muss ich da noch die Breite angeben?

Aktuelles Ergebnis: http://www.netcs.de
 
Zuletzt bearbeitet:
zu 1:
Das bewirkt die "float: right;"-Angabe bei li. Dadurch werden die Listeneinträge nebeneinander statt untereinander angeordnet.

zu 2:
Dazu wäre für den entsprechenden Link eine zusätzliche Klasse erforderlich.

zu 3:
Die Höhe richtet sich grundsätzlich nach dem Inhalt. In diesem Fall also nach der Schriftgröße.
Um eine vertikale Zentrierung zu bekommen, ergänze am besten noch mit
Code: 
line-height: 30px;
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben