AW: CSS Navi ohne Text, aber mit Grafiken
Okay, mittlerweile klappt es doch ganz gut. Die Navigation funktioniert auch. Allerdings(!) wird mir bei Dreamweaver es so angezeigt:
<erledigt>
und in Firefox so:
<erledigt>
Dreamweaver is der sache am nähesten...
Nur sollte alles weiter nach links und die Grafik unten nach ganz rechts...
Edit:display:inline-block war der Fehler. display:inline funktioniert!
Allerdings hab ich jetzt zuviel Abstand zwischen dem header und der Navi...
In Dreamweaver ist das wieder mal okay, Firefox zeigt mir ca. 1cm luft dazwischen an...
HTML:
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>
<title>Dimensionsfabrik</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="container_oben">
<div id="header"></div>
<div id="navi">
<ul style="list-style: none; display:inline-block">
<li> <a class="button0" href="index.html"></a> </li>
<li> <a class="button1" href="index.html"></a> </li>
<li> <a class="button2" href="uebermich.html"></a> </li>
<li> <a class="button3" href="index.html"></a> </li>
<li> <a class="button4" href="uebermich.html"></a> </li>
<li> <a class="button5" href="index.html"></a> </li>
<li> <a class="button6" href="index.html"></a> </li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS:
Code:
@charset "utf-8";
/* CSS Document */
body{
background: #FFF;
color: #000; /* Schriftfarbe */
font: "Courier New", Courier, monospace;
font-size: 12px/* Schriftgroesse und Schriftart */
margin: 0px; /* Aussenabstand */
}
p, pre{
padding: 0px 0px; /* Innenabstand */
margin: 0px; /* Aussenanbstand */
color: #000; /* Schriftfarbe */
}
a {
color: #000;
}
a:visited {
color:#333;
}
a:hover {
color: #333;
}
a:active {
color:#333;
}
h1 {
font-size: 24px;
font-weight: normal;
}
h2 {
font-size: 18px;
font-weight: normal;
}
#container{
background-color:#FFF;
width:auto;
margin: 0 auto;
padding: 0;
}
#container_oben{
background-color:#FFF;
width:1024px;
height:244px;
}
#header{
background-image:url(Bilder/header.png);
width:1024px;
height:185px;
}
#navi{
width:1024px;
height:59px;
float:left;
}
a.button0:link, a.button0:visited {
background-image: url(Bilder/leer_1.png);
width:57px;
height:59px;
float:left;
}
a.button1:link, a.button1:visited {
background-image: url(Bilder/start.png);
float:left;
width:141px;
height:59px;
}
a.button1:hover {
background-image: url(Bilder/start_over.png);
float:left;
width:141px;
height:59px;
}
a.button2:link, a.button2:visited {
background-image: url(Bilder/ueber_uns.png);
float:left;
width:205px;
height:59px;
}
a.button2:hover {
background-image: url(Bilder/ueber_uns_over.png);
float:left;
width:205px;
height:59px;
}
a.button3:link, a.button3:visited {
background-image: url(Bilder/referenzen.png);
float:left;
width:231px;
height:59px;
}
a.button3:hover {
background-image: url(Bilder/referenzen_over.png);
float:left;
width:231px;
height:59px;
}
a.button4:link, a.button4:visited {
background-image: url(Bilder/kontakt.png);
float:left;
width:185px;
height:59px;
}
a.button4:hover {
background-image: url(Bilder/kontakt_over.png);
float:left;
width:185px;
height:59px;
}
a.button5:link, a.button5:visited {
background-image: url(Bilder/blog.png);
float:left;
width:147px;
height:59px;
}
a.button5:hover {
background-image: url(Bilder/blog_over.png);
float:left;
width:147px;
height:59px;
}
a.button6:link, a.button6:visited {
background-image: url(Bilder/leer_2.png);
float:left;
width:57px;
height:59px;
}
Fehler kann ich keine finden. Ein Freund von mir hat sich den Code auch angeschaut, aber fand auch nichts...
Unglaublich, was eine Navi für Arbeit machen kann...
Edit: display:inline-block war der Fehler. display:inline funktioniert!
Allerdings hab ich jetzt zuviel Abstand zwischen dem header und der Navi...
In Dreamweaver ist das wieder mal okay, Firefox zeigt mir ca. 1cm luft dazwischen an...
Edit 2: Auch erledigt... Hätte nur nochmal padding und margin auf 0 für die ul setzen sollen
