Hi,
Habe eine Navileiste die wenn man den Link anklickt so gestaltet sein sollte das es aussieht wie ein Registerreiter. Aber beim Anklicken bleibt der untere "Strich" erhalten. Ich will die Navi am Ende noch mit runden Ecken aber jetzt muss erst mal das hier klappen.
Habe eine Navileiste die wenn man den Link anklickt so gestaltet sein sollte das es aussieht wie ein Registerreiter. Aber beim Anklicken bleibt der untere "Strich" erhalten. Ich will die Navi am Ende noch mit runden Ecken aber jetzt muss erst mal das hier klappen.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Impressum</title>
<link href="css/layout.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #f0eee8;
}
-->
</style>
</head>
<body>
<div id="container">
<div align="center">
<div id="content"><img src="bilder/logo.jpg" alt="logo"/></div>
</div>
<div id="navigation"><div align="center">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul></div>
</div>
</div>
Code:
#navigation ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: 12px Verdana, sans-serif;
}
#navigation ul li {
list-style: none;
margin: 0;
display: inline;
}
#navigation ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navigation ul li a:link {
color: #448;
}
#navigation ul li a:visited {
color: #667;
}
#navigation ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navigation ul li a#current {
background: white;
border-bottom: 1px solid white;
}