Ul-Tag für Navigatorleiste unnötige pixel

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

~~k*******a~~

18:19, 6.9.2009

Hallo Leute,

hab jetzt ein komisches Problem :D

Ich habe ein xhtml-Seite erstellt und wollte eine Navigationsleiste einbauen. Soweit ging es auch wunderbar, aber zwischen den einträgen kommen immer nicht erwartette Pixel.

Hier erstmal die Navigationsleiste: http://kyokosama.lima-city.de/navi.xhtml

Und hier der XHTML-Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="style.css"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">


 <head>
  <title>Testprojekt</title>
 </head>

 <body>

 <ul id="navi">
 <li><a href="#1">Startseite</a></li>
 <li><a href="#3">Links</a></li>
 <li><a href="#2">Impressum</a></li>
 </ul>

 </body>

</html>

Hier der CSS-Code:

body {
	font-size: 11pt;
	font-family: Calibri;
	background-color: lightblue;
	}

   #navi {
    list-style-type: none;
	padding: 1px;
	background-color: white;
	border-color: grey;
	border-width: 1px;
	border-style: solid;
	}

   #navi li  {
	display: inline-block;
	width: 100px;
    }
	
   #navi li + li {
       padding-left: 1px;
	}
	
   #navi a {
	line-height: 25px;
    height: 25px;
	padding-left: 5px;
	padding-right: 5px;
    display:block;
	border-bottom-color: grey;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	text-decoration:none;
	}
	
   #navi a:hover {
	border-bottom-color: blue;
	background-color: lightblue;
	}

Nun sollte er zwischen den Elementen einen Pixel Abstand machen:

#navi li + li {
       padding-left: 1px;
	}

Doch da sind mehr Pixel wie man sieht....

Dies lässt sich zwar durch folgendes korrigieren:

#navi li + li {
       margin-left: -2px;
	}

aber ich wüsste dennoch gerne wo die 2px herkommen.

Gruß
Kyoko

Beitrag zuletzt geändert: 6.9.2009 18:20:13 von kyokosama

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
~~e********l~~

15:17, 8.9.2009
Ganz einfach.
Zur Zeit sind deine LI Elemente auf "display: inline-block" gestellt. Lass die einfach ganz normal als Block Elemente und setze stattdessen ein "float: left" in die CSS Eigenschaften. Dann ist der Abstand auch weg und nur noch so groß wie du die Margin/Padding Werte setzt. Das A Element würde ich dann auf "display: block" setzen um die notwendige Größe zu haben.
color

color hat kostenlosen Webspace.
21:51, 8.9.2009
Ich würde dir noch empfehlen deinen CSS-Code so zu schreiben das er überall tauglich ist.

"display:inline-block" ist nicht schön, nutz hier lieber "float:left;" zudem würde ich
vor dem code sowas schreiben
```
html,body,ul,ol,li
{
margin:0px;
padding:0px;
}
html,body
{
width:100%;
height:100%;
}
```
Damit wären unerwünschte Pixel größtenteils ausgelöscht, und evt. Größenangaben korrekt.

In CSS ist es möglich, Werte zu vereinen. Damit meine ich z.B. dein padding-right / padding-left
schreib doch lieber
```
padding:0px 5px;
```
damit nimmt er oben und unten 0px und links / rechts 5 pixel

Border würde ich so schreiben
```
border-top:1px solid black;
border-bottom:1px solid white;
..
```
auf solche spezialitäten wie li + li solltest du ganz verzichten und normale Vererbung nutzen,
auch wenn der IE6 doof is... mit gescheitem Code funktioniert eine CSS Datei ohne
Browserweichen in allen Browsern.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city