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

Zeilenumbruch macht Abstand..

B

bobomampf

Mitglied
Hallo,
ich habe ein simples Problem, dessen Lösung mich nun aber schon eine Weile beschäftigt und ich nicht darauf komme.

Ich habe eine horizontale Navigation mit Bildern erstellt. Diese habe ich wie üblich in einer Liste. So sieht mein Code aus.

HTML: 
<ul id="Navigation">

<li><img src="Logo.jpg" width="371" height="53" alt="Logo von Stefan Binder - Fotograf aus Ravensburg" /></li><li><img src="Platz.jpg" width="108" height="53" alt="Platzhalter" /></li><li><a href="./" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Startseite','','Home.png',0)"><img src="Homehover.png" alt="Startseite" id="Startseite" width="72" height="53" ></a></li><li><img src="Dot.jpg" width="26" height="53" alt="Punkt" /></li><li><a href="Portfolio.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Portfolio','','Portfoliohover.png',1)"><img src="Portfolio.png" alt="Portfolio" width="129" height="53" id="Portfolio" /></a></li><li><img src="Dot.jpg" width="26" height="53" alt="Punkt" /></li><li><a href="About.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About','','Abouthover.png',0)"><img src="About.png" alt="Über mich" width="81" height="53" id="About" /></a></li><li><img src="Dot.jpg" width="26" height="53" alt="Punkt" /></li><li><a href="Impressum.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Imprint','','Imprinthover.png',0)"><img src="Imprint.png" alt="Impressum" width="117" height="53" id="Imprint" /></a></li>

  </ul>

Jetzt ist der Code für mich natürlich sehr unübersichtlich, wenn ich mal etwas verändern möchte. Deshalb habe ich den Code aufgeräumt, dass er so aussieht.

HTML: 
<ul id="Navigation">
<li><img src="Logo.jpg" width="371" height="53" alt="Logo von Stefan Binder - Fotograf aus Ravensburg" /></li>
<li><img src="Platz.jpg" width="108" height="53" alt="Platzhalter" /></li>
<li><a href="./" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Startseite','','Home.png',0)"><img src="Homehover.png" alt="Startseite" id="Startseite" width="72" height="53" ></a></li>
<li><img src="Dot.jpg" width="26" height="53" alt="Punkt" /></li>
<li><a href="Portfolio.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Portfolio','','Portfoliohover.png',1)"><img src="Portfolio.png" alt="Portfolio" width="129" height="53" id="Portfolio" /></a></li>
<li><img src="Dot.jpg" width="26" height="53" alt="Punkt" /></li>
<li><a href="About.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About','','Abouthover.png',0)"><img src="About.png" alt="Über mich" width="81" height="53" id="About" /></a></li>
<li><img src="Dot.jpg" width="26" height="53" alt="Punkt" /></li>
<li><a href="Impressum.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Imprint','','Imprinthover.png',0)"><img src="Imprint.png" alt="Impressum" width="117" height="53" id="Imprint" /></a></li>
</ul>

So ist er viel übersichtlicher. Wenn ich den aber so mache, dann bildet sich zwischen den Bildern ein viel größerer Abstand als zuvor. Das ist natürlich doof, da die Navigation dann nicht mehr bündig mit dem Contentdiv abschließt.

Jetzt die Frage: Wie kann ich so einen Abstand verhindern, so dass die Navigation so dargestellt wird, als hätte ich den Code vom ersten Beispiel verwendet.
 
Das einzige, was ich mir vorstellen kann ist, das dort i-welche unsichtbaren Zeichen sind, die den Abstand verursachen.
 
Hier mal ein Screenshot, der das Problem veranschaulichen soll.. :(

srq8h552lk9q.jpg
 
Das sind alle die damit im entferntesten was damit zu tun haben. Ich verzweifle echt noch :sad:

HTML: 
 ul#Navigation {
	min-width: 960px;
	height: 68px;
	text-align: center;
	margin: 10px auto 10px auto;
	font-size: 28px;
	position: inherit;
	list-style: none;
	list-style-image: none;
	padding: 0px;
	border-bottom: 15px #425e24;
	border-bottom-width: 100%;
	border-bottom-style: solid;
	  }
#logo {
	text-align: left;
	margin-right: 60px;
		}
	a { 
		margin: 0px;
	}
	li {
		margin: 0px;
	}
	
ul#Navigation li {
    list-style: none;
    display: inline;
	margin: auto;
	padding: 0px;
  }

p {
	margin: 0px;
	}
img {
	border: none;
	margin: 0px;
	padding: 0px;
}
 
Also ich hab es mal in eine Seite kopiert und da sieht es aufgrund fehlender Bilder, JS codes und so weiter ganz anders aus. Wenn du ein Problem hast, dann versuche, es einzugrenzen. Vereinfache den Code so weit wie möglich, so dass das Problem noch immer auftaucht. Wenn dazu unbedingt Bilder erforderlich sind, dann stelle die auf deinen Server und mache in deinem Code absolute Referenzen. Mach es den Leuten, von denen du Hilfe erwartest, so einfach wie möglich, keiner hat nämlich Lust, das Wichtige vom Unwichtigen für dich zu trennen.
 
In welchem Browser passiert das? Wenn es der IE ist, ergänze mal bei "ul#Navigation li {" noch ein "float: left;".
 
Also ich habe das Problem jetzt gelöst, indem ich einen Div um die Tabelle gemacht und diesen zentriert habe. Aber das müsste doch eig. auch anders gehen :/
 
Ich löse es im Moment auf folgende Art und Weise, die ist zwar auch nicht toll, aber bis CSS3 die Eigenschaft "white-space-collapse:discard;" ordentlich umsetzt, wird es die einzige Möglichkeit sein:

Code: 
<ul>
       <li>Text</li><!--
    --><li>Text</li><!--
    --><li>Text</li>
</ul>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben