So mein Problem ist, das ich eine Navigation programmiert habe bzw. von Listamatic eine halbwegs übernommen hab. :) Jedenfalls klappt bei mir bei meiner überarbeiteten Navigation, eine Funktion nicht. Diese wäre nämlich das wenn man über ein Eintrag in der Navi geht sich die Schrift automatisch vergrößert, diese Funktion klappt auch wunderbar. Jedoch habe ich durch boorder-bottom eine Linie generiert und jedes mal wenn sich die Schrift vergrößert schneiden sich beide, sprich die Linie und die Schrift. :(
Hier der Code
Hier der Code
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Startseite</title>
<link rel="stylesheet" type="text/css" href="form.css" />
</head>
<body>
<div class="navi">
<ul>
<li><a href="#" id="current">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<ul>
</div>
</body>
</html>
Code:
.content {
height: 1024px;
width: 800px;
margin: auto;
background-color: grey;
font-family: Helvetica;
}
[COLOR=Blue].navi {
height: 20px;
width: 800px;
margin: auto;
font-family: Helvetica;
border-bottom: 1px solid #FFFFFF;
}
.navi ul {
margin-left: 40px;
margin-top: 10px;
padding: 0;
}
.navi li {
padding: 0;
margin: 0;
display: inline;
}
.navi li a {
letter-spacing: -1px;
text-decoration: none;
color: #ccc;
font-size: 1em;
padding: 0 2px;
border-left: 2px solid #FFFFFF;
}
.navi li a:hover
{
color: #6fc;
font-size: 1.5em;
border-left: 2px solid #FFFFFF;
}
.navi a#current {
color: #fc6;
font-size: 1.5em;
}[/COLOR]
body {
margin: 0px;
padding: 0px;
background-image: url(image/body_bg.png);
background-attachment: fixed;
}