Abstand zwischen Elementen in horizontaler Navigation entfernen

**koerschgen2001** · 05.06.2009 11:18

Hallo zusammen,

ich habe eine horizontale Navigation so wie hier gebastelt (http://de.selfhtml.org/css/layouts/a...nav_inline.htm), nur halt mit Bildern für den mouseover Effekt.

Wie bekommt man den Abstand zwischen den Elementen Weg. Hab schon alles Mögliche ausprobiert aber diese unschöne Lücke geht nicht Weg.

hier der quelltext:

css:

Code:

#navigationinhalt {}
.navihaupt {list-style-type:none;vertical-align:top;margin:0;padding:0;background-image:url(bilder/navileiste.gif);background-repeat:no-repeat;background-position:center top;}
.navipunkt {list-style:none;display:inline;margin:0;padding:0;}

html:

HTML-Code:

<div id="navigationinhalt">
    <ul class="navihaupt">
      <li class="navipunkt"><a href="seite1.html"><img src="bilder/link1.gif" width="110" height="37" border="0" alt="seite1"></a></li>
      <li class="navipunkt"><a href="seite2.html"><img src="bilder/link2.gif" width="139" height="37" border="0" alt="seite2"></a></li>
      <li class="navipunkt"><a href="seite3.html"><img src="bilder/link3.gif" width="144" height="37" border="0" alt="seite3"></a></li>
      <li class="navipunkt"><a href="seite4.html"><img src="bilder/link4.gif" width="163" height="37" border="0" alt="seite4"></a></li>
      <li class="navipunkt"><a href="seite5.html"><img src="bilder/link5.gif" width="140" height="37" border="0" alt="seite5"></a></li>
    </ul>

**jayjay** · 05.06.2009 11:32

im css müsste es eigentlich so stehen:

HTML-Code:

#navigationinhalt {
}
#navigationinhalt ul {
    list-style-type:none;
    vertical-align:top;
    margin:0;
    padding:0;
    background-image:url(bilder/navileiste.gif);
    background-repeat:no-repeat;
    background-position:center top;
}
#navigationinhalt li {
    list-style:none;
    display:inline;
    margin:0;
    padding:0;
}

und dann

HTML-Code:

<div id="navigationinhalt">
    <ul>
        <li><a href="seite1.html"><img src="bilder/link1.gif" width="110" height="37" border="0" alt="seite1"></a></li>
        <li><a href="seite2.html"><img src="bilder/link2.gif" width="139" height="37" border="0" alt="seite2"></a></li>
        <li><a href="seite3.html"><img src="bilder/link3.gif" width="144" height="37" border="0" alt="seite3"></a></li>
        <li><a href="seite4.html"><img src="bilder/link4.gif" width="163" height="37" border="0" alt="seite4"></a></li>
        <li><a href="seite5.html"><img src="bilder/link5.gif" width="140" height="37" border="0" alt="seite5"></a></li>
    </ul>
</div>

vielleicht noch ein

HTML-Code:

* {
    padding:0;
    margin:0;
}

hinzufügen...
am besten einen link oder den gesamtem code posten

**hero-master** · 05.06.2009 16:18

Zitat von jayjay

im css müsste es eigentlich so stehen:

Da steht doch genau das Gleiche, nur hast du die Klassen gegen ul und li ausgetauscht, oder se ich das falsch

@Thread:
Wo entstehen denn die Lücken, kannst du einmal ein Screenshot oder ein Link geben? Der Browser wäre auch noch wichtig: IE? FF? Safari? Alle zusammen?

**koerschgen2001** · 05.06.2009 16:30

das ist auch das selbe nur mit bildern. das heisst aber nicht dass bei selfhtml kein abstand dazwischen ist. die haben den zwar absichtlich mit margin da rein gemacht, aber mit margin:0 geht der trotzdem nicht weg. und es gibt doch genug webseiten im netz die so eine navigationsleiste benutzen und zwar ohne nen abstand zwischen den menüpunkten.

ich meine den abstand zwischen den buttons (seite1-5). dafür hab ich ja den code gepostet

HTML-Code:

<html>
<head>
<style type="text/css">
#navigationinhalt {}
.navihaupt {list-style-type:none;vertical-align:top;margin:0;padding:0;background-image:url(bilder/navileiste.gif);background-repeat:no-repeat;background-position:center top;}
.navipunkt {list-style:none;display:inline;margin:0;padding:0;}
</style>
</head>
<body>

<div id="navigationinhalt">
    <ul class="navihaupt">
      <li class="navipunkt"><a href="seite1.html"><img src="bilder/link1.gif" width="110" height="37" border="0" alt="seite1"></a></li>
      <li class="navipunkt"><a href="seite2.html"><img src="bilder/link2.gif" width="139" height="37" border="0" alt="seite2"></a></li>
      <li class="navipunkt"><a href="seite3.html"><img src="bilder/link3.gif" width="144" height="37" border="0" alt="seite3"></a></li>
      <li class="navipunkt"><a href="seite4.html"><img src="bilder/link4.gif" width="163" height="37" border="0" alt="seite4"></a></li>
      <li class="navipunkt"><a href="seite5.html"><img src="bilder/link5.gif" width="140" height="37" border="0" alt="seite5"></a></li>
    </ul>
</body>
</html>

**hero-master** · 05.06.2009 16:57

Setz das komplette Menu einmal in eine Zeile:

HTML-Code:

<ul class="navihaupt"><li class="navipunkt"><a href="seite1.html"><img src="bilder/link1.gif" width="110" height="37" border="0" alt="seite1"></a></li><li class="navipunkt"><a href="seite2.html"><img src="bilder/link2.gif" width="139" height="37" border="0" alt="seite2"></a></li><li class="navipunkt"><a href="seite3.html"><img src="bilder/link3.gif" width="144" height="37" border="0" alt="seite3"></a></li><li class="navipunkt"><a href="seite4.html"><img src="bilder/link4.gif" width="163" height="37" border="0" alt="seite4"></a></li></ul>

**koerschgen2001** · 05.06.2009 17:01

also interpretiert der browser auch bei listen den zeilenumbruch als leerzeichen. naja danke für den tip.

**hero-master** · 05.06.2009 17:07

Zitat von koerschgen2001

also interpretiert der browser auch bei listen den zeilenumbruch als leerzeichen. naja danke für den tip.

Generell nicht.
Bei Bildern ist das immer so eine Sache. Im Grunde hätte auch gereicht, wenn du den Bildern ein display:block gegeben hättest bzw. in deinem Fall für ein horizontales Menu ein float:left.
Bilder sind von Natur aus Inlinelemente und richten sich eben an der Grundlinie des Textes aus. Dadurch entstehen ab und an Lücken, eine feste Regel kann man dazu nicht aufstellen

**koerschgen2001** · 05.06.2009 17:12

ich hatte auch zuerst float left, aber dann hatte ich das problem das ich die leiste später nicht mehr zentriert auf den bildschirm bekomme.

**sejuma** · 06.06.2009 18:24

Damit kannst du auch eine gefloatete Liste zentrieren.

zur Startseite vom TP

Thema: Abstand zwischen Elementen in horizontaler Navigation entfernen

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Abstand zwischen Elementen in horizontaler Navigation entfernen

Ähnliche Themen

Abstand zw. 2 Elementen

Abstand zwischen Spry Menü Elementen

Abstand nach gefloateten Elementen

Horizontaler Abstand im IE

CSS: vertikale abstände im MSIE5.0 zwischen elementen

Aktive Benutzer

Aktive Benutzer