Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 10.12.2011, 17:52
Cookie Cookie ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2011
Beiträge: 7
Cookie befindet sich auf einem aufstrebenden Ast
Frage navigationsproblem

Hey,
ich habe ein kleines Problem mit meiner navigation. ich habe eine horizontale, welche mit bildern (links) ausgeschmückt ist. ich hab die alle positioniert, aber ich habe irgendwie einen 4px abstand zwischen den bildern, obwohl ich im ganzen dokument kein einziges mal margin/padding benutze, und diese auch immer auf 0 setze. man kann die bilder natürlich einzeln alle 4 px nach links verschieben, aber ich nehme eher an, dass ich irgendwas grundlegendes vergessen hab/nicht weiß.

Hier mein quellcode:

HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="css.css" />
</head>
<body text="#000000" background="bgpattern.png">

<div id="border">




        <div id="main">
                <div id="header">
                <img src="banner1.png"/>
                      <!-- links -->
                          <ul id="navigation">
                          <li><a href="index.html"><img src="buttons/home.png" onmouseover="javascript:this.src='buttons/home1.png'" onmouseout="javascript:this.src='buttons/home.png'" /></a>         </li>
                          <li><a href="gaming.html"><img src="buttons/gaming.png" onmouseover="javascript:this.src='buttons/gaming1.png'" onmouseout="javascript:this.src='buttons/gaming.png'" /></a>      </li>
                          <li><a href="news.html"><img src="buttons/news.png" onmouseover="javascript:this.src='buttons/news1.png'" onmouseout="javascript:this.src='buttons/news.png'" /></a>          </li>
                          <li><a href="team.html"><img src="buttons/team.png" onmouseover="javascript:this.src='buttons/team1.png'" onmouseout="javascript:this.src='buttons/team.png'" /></a>          </li>
                          <li><a href="about.html"><img src="buttons/about.png" onmouseover="javascript:this.src='buttons/about1.png'" onmouseout="javascript:this.src='buttons/about.png'" /></a>        </li>
                          </ul>
                          <div id="line"></div>
                </div>


        </div>

</div>

</body>
</html>

und das CSS

Code:
* {
  margin: 0px;
  padding: 0px;
}
html, body {
  height:100%;
}

#border {
  background: url(border.png);
  width:1020px;
  height:100%;
  margin: 0 auto ;

}


#main {
  background: url(mainpattern.png);
  width:1000px;
  height:100%;
  margin:0 auto;
  border-right-width:thin;
  border-right-color:silver;
  border-right-style:dashed;
  border-left-width:thin;
  border-left-color:silver;
  border-left-style:dashed;
}

#header {
  width:1000px;
  height:205px;
  background-color:black;
}

ul#navigation {
  width: 1000px;
  height: 60px;
  padding:0;
  margin:0;
}

ul#navigation li {
  list-style: none;
  margin: 0;
  padding: 0;
  display:inline;
  height:60px;
  width:200px;
  overflow:hidden;
}

#line {
  width:1000px;
  height:5px;
  background-color:#2f2f2f;
}
Mit Zitat antworten
Sponsored Links