# Kleiner Abstand zwischen Navigationselementen



## Räuber_Glotzenrotz (30. April 2012)

Hallo,

ich werde noch wahnsinnig, ich habe in einer horizontalen Navi kleine Abstände zwischen den Elementen, sodass der Hover-Effekt nicht ganz an das Elemt davor ansetzt.
Ich bin noch ein frischling was CSS angeht, aber dieses Prob hatte ich noch nie.
Ich stelle mich wahrscheinlich total doof an.
Ich hab das Prob mal aus meinem Layout herausgezogen und nur den Codeteil eingefügt, der davon betroffen ist.

Ich dachte zuerst, vllt. hat sich da ein List-Style-Type eingeschlichen, hab aber schon ein None stehen 

Naja die einzigste Möglichkeit, die ich momentan hatte, war der #navi ul li ein negatives margin zu geben, aber dass kann jawohl nicht die Lösung des Problems sein?


```
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

#navi{
	height: 41px;
	width: 960px;
	background: #F93;
	-webkit-border-radius: 8px;
	border-radius: 8px; 

}

	#navi ul{
		list-style: none;
		line-height: 41px;
	
	}

	#navi ul li{
		display: inline-block;
		text-decoration: none;
			
	}

		#navi ul li a{
			display: block;
			color: #FFF;
			padding-right: 30px;
			padding-left: 30px;
			border-right: 1px solid #FFF;
			
		}

			#navi ul li a:hover{
				background: #F30;
			}
</style>

<title>Unbenanntes Dokument</title>
</head>

<body>

		<div id="navi">
			<ul>
            	<li><a href="#">Home</a></li>
                <li><a href="#">Bilder</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
         </div>

</body>
</html>
```


----------



## SpiceLab (30. April 2012)

Aus

```
#navi ul li{
		display: inline-block;
		text-decoration: none;
			
	}
```
wird

```
#navi ul li{
		float: left;			
	}
```

Und *text-decoration:none* wird stattdessen dem *a*-Element zugeschrieben, damit es Wirkung zeigt.


----------



## javaDeveloper2011 (30. April 2012)

Hi,

du willst also, dass der weiße Abstand verschwindet?
Dann entfern doch einfach die Zeile die das bewirkt...

```
border-right: 1px solid #FFF;
```


----------



## SpiceLab (30. April 2012)

javaDeveloper2011 hat gesagt.:


> du willst also, dass der weiße Abstand verschwindet?


Nö, sondern die Links in ihrer vollständigen Breite "gehovert" werden - siehe die zitierte Passage:



Räuber_Glotzenrotz hat gesagt.:


> ich habe in einer horizontalen Navi kleine Abstände zwischen den Elementen, sodass der Hover-Effekt nicht ganz an das Elemt davor ansetzt.



... sowie die CSS-Interpretation des Browsers


----------



## Räuber_Glotzenrotz (1. Mai 2012)

Danke spicelab, das float:left hat funktioniert, allerdings musste das "list-style: none;" doch auf die Listenelemente und nicht auf "a" ausgewiesen werden!


----------



## SpiceLab (1. Mai 2012)

Räuber_Glotzenrotz hat gesagt.:


> allerdings musste das "list-style: none;" doch auf die Listenelemente und nicht auf "a" ausgewiesen werden!


Ich sprach von *text-decoration*, nicht von *list-style* 

Zur Erinnerung:


```
#navi ul li{
		...
		text-decoration: none;
			
	}
```
wird hierher verschoben:


```
#navi ul li a{
			...
			text-decoration: none;
			
		}
```
... damit die Links wirkungsvoll keine Textunterstreichung erfahren, wofür diese Regel steht.


----------



## Räuber_Glotzenrotz (1. Mai 2012)

Ah sorry, das hab ich irgendwie verwechselt. Danke nochmal für den Hinweis.


----------



## SpiceLab (1. Mai 2012)

Gern geschehen 

Und nicht vergessen, abschließend das Thema als erledigt zu markieren - danke


----------

