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

Nicht beabsichtigter Abstand in der Navi

R

R93

Neues Mitglied
Hallo liebe HTML'er,

ich hab folgendes Problem. Habe ich in der Navigation (zwischen den Links) Abstände, die weder durch padding, margin noch durch border="0" beseitigen lassen.
Hier mal mein HTML-Code:
HTML: 
<!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" xml:lang="de" lang="de">

<head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  <title>Portfolio Startseite</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
  <div id="page">

   <div id="navi">
     <img src="Bilder/navi_01.png" width="50" height="40" border="0" alt="Logo" />
    <a href="index.html">
     <img src="Bilder/navi_02.png" width="100" height="40" border="0" alt="Start" onMouseOver="this.src='Bilder/navihover_02.png';" onMouseOut="this.src='Bilder/navi_02.png';" />
    </a>
    <a href="works.html">
     <img src="Bilder/navi_03.png" width="100" height="40" border="0" alt="Arbeiten" onMouseOver="this.src='Bilder/navihover_03.png';" onMouseOut="this.src='Bilder/navi_03.png';" />
    </a>
    <a href="tutorials.html">
     <img src="Bilder/navi_04.png" width="100" height="40" border="0" alt="Tutorials" onMouseOver="this.src='Bilder/navihover_04.png';" onMouseOut="this.src='Bilder/navi_04.png';" />
    </a>
    <a href="downloads.html">
     <img src="Bilder/navi_05.png" width="100" height="40" border="0" alt="Downloads" onMouseOver="this.src='Bilder/navihover_05.png';" onMouseOut="this.src='Bilder/navi_05.png';" />
    </a>
    <a href="about.html">
     <img src="Bilder/navi_06.png" width="100" height="40" border="0" alt="Über mich" onMouseOver="this.src='Bilder/navihover_06.png';" onMouseOut="this.src='Bilder/navi_06.png';" />
    </a>
    <a href="partner.html">
     <img src="Bilder/navi_07.png" width="100" height="40" border="0" alt="Partner" onMouseOver="this.src='Bilder/navihover_07.png';" onMouseOut="this.src='Bilder/navi_07.png';" />
    </a>
    <a href="kontakt.html">
     <img src="Bilder/navi_08.png" width="100" height="40" border="0" alt="Kontakt" onMouseOver="this.src='Bilder/navihover_08.png';" onMouseOut="this.src='Bilder/navi_08.png';" />
    </a>
   </div>
 
   <div id="header">
   </div>

 </div>
</body>
</html>
Der dazugehörige CSS-Code:
HTML: 
* {
margin:0px;
padding:0px;
background-color:#1a1a1a;

}

#page {
   background-color:#1a1a1a;
}

#navi {
   width:750px;
   height:40px;
   margin:0 auto;
}
Das ganze lässt sich lösen, indem ich den gesamten Inhalt der div="navi" hintereinander schreibe also so:
HTML: 
<!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" xml:lang="de" lang="de">

<head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  <title>Portfolio Startseite</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
  <div id="page">

   <div id="navi">
     <img src="Bilder/navi_01.png" width="50" height="40" border="0" alt="Logo" /><a href="index.html"><img src="Bilder/navi_02.png" width="100" height="40" border="0" alt="Start" onMouseOver="this.src='Bilder/navihover_02.png';" onMouseOut="this.src='Bilder/navi_02.png';" /></a><a href="works.html"><img src="Bilder/navi_03.png" width="100" height="40" border="0" alt="Arbeiten" onMouseOver="this.src='Bilder/navihover_03.png';" onMouseOut="this.src='Bilder/navi_03.png';" /></a><a href="tutorials.html"><img src="Bilder/navi_04.png" width="100" height="40" border="0" alt="Tutorials" onMouseOver="this.src='Bilder/navihover_04.png';" onMouseOut="this.src='Bilder/navi_04.png';" /></a><a href="downloads.html"><img src="Bilder/navi_05.png" width="100" height="40" border="0" alt="Downloads" onMouseOver="this.src='Bilder/navihover_05.png';" onMouseOut="this.src='Bilder/navi_05.png';" /></a><a href="about.html"><img src="Bilder/navi_06.png" width="100" height="40" border="0" alt="Über mich" onMouseOver="this.src='Bilder/navihover_06.png';" onMouseOut="this.src='Bilder/navi_06.png';" /></a><a href="partner.html"><img src="Bilder/navi_07.png" width="100" height="40" border="0" alt="Partner" onMouseOver="this.src='Bilder/navihover_07.png';" onMouseOut="this.src='Bilder/navi_07.png';" /></a><a href="kontakt.html"><img src="Bilder/navi_08.png" width="100" height="40" border="0" alt="Kontakt" onMouseOver="this.src='Bilder/navihover_08.png';" onMouseOut="this.src='Bilder/navi_08.png';" /></a>
   </div>
 
   <div id="header">
   </div>

 </div>
</body>
</html>
Das ist aber unschön und wirkt sehr unordentlich.
Kann mir einer sagen, wie man es auch sauberer hinbekommt?

mfg R93

PS: Sorry, falls die Frage schonmal gestellt wurde, hab durch die Suchfunktion nichts gefunden.
 
Hi R93,

Poste doch mal bitte einen Link zu deiner Seite.
Dann kann man sich das Problem live in verschiedenen Browsern ansehen.
Btw, welchen Browser nutzt du?
Unter firefox, safari und opera sollte dieser bug nicht auftreten. Wenn du zufällig den IE7 benutzt, dann liegt es an diesem und nicht an deinem code.
Dafür gibt es auch leider keinen Fix, außer den, den du auch schon gefunden hast^^
Jetzt heißt es abwägen. Abstände in Kauf nehmen im IE7 (alle anderen browser laufen ja), oder eine unschöne codeform wählen.
Ich würde zu ersterem tendieren und dir dazu raten Firefox 3 zu nutzen.

Aber wie gesagt. Noch nutze ich nur meine Glaskugel. Ein paar mehr INfos und ein Link zur Website wären hilfreich ;-)

grüße hokage
 
das KÖNNEN geht immer, aber listen sind das kompakteste mit den besten formatierungsmöglichkeiten.

Nils aka XraYSoLo
 
hokage555 schrieb:
Unter firefox, safari und opera sollte dieser bug nicht auftreten. Wenn du zufällig den IE7 benutzt, dann liegt es an diesem und nicht an deinem code.
Zum Vergrößern anklicken....
Das ist kein Bug sondern ganz normales Verhalten der inline-Elemente.
Es sind die Abstände bzw. Zeilenumbrüche (whitespace) im Quelltext, wie sie zwischen Wörten auch dargestellt werden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben