Horizontale Navigationsleiste an ganzes Fenster anpassen

ILaRy · #1 (**permalink**) 23.05.2012, 22:44

Guten Abend

Ich möchte eine Horizontale Navigationsleiste an die ganze breite des Fensters anpassen. (variiert ja je nach Benutzer)

CSS

body {
font: normal 100.00% Helvetica, Arial, sans-serif;
color: black;
margin: 0xp;
padding: 0px;
width: 100%;
}

ul#Navigation {
margin: 0px;
padding: 0px;
text-align: center;
background-color: silver;
alignment-adjust:central;
}
ul#Navigation li {
list-style: none;
display: inline;
margin: 0px;
padding: 0px;
}

ul#Navigation a, ul#Navigation span {
float: left;
width: 14%;
margin: 0px;
padding: 0px;
text-decoration: none;
font-weight: bold;
color: black;
background-color: #ccc;

}

ul#Navigation a:hover, ul#Navigation span {
color: white;
background-color: gray;
}
ul#Navigation div {
clear: right;
}

Doch wie es so ist, hat es immer am rechten Rand einen etwa 1 cm grossen Abstand. Also je nach Fenstergrösse.

Wie kann ich die gesamte Breite auf 100% setzen.

Gruss und im voraus schon vielen Dank
Ilario

siluan.tahir · #2 (**permalink**) 23.05.2012, 23:35

Ich denk mal das der Fehler daran liegt das du body nicht mittels CSS margin: 0 vergeben hast.
Stichwort: Reset CSS.
Zusätzlich solltest du einen doctype in deiner HTML Datei verwenden.
Z.B. die HTML5 Variante <!DOCTYPE html>

So würde es dann im Quellcode ausschauen:

Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 Layout</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
  </head>
  <body>
  ...
  </body>
</html>

ILaRy · #3 (**permalink**) 24.05.2012, 16:48

Danke für die Antwort.

Aber dies ist nur CSS das ganze HTML habe ich schon richtig gemacht.
Der Body hat margin/padding 0px.

dazzle89 · #4 (**permalink**) 24.05.2012, 20:01

Gib ul#Navigation ein overflow: hidden;

lottikarotti · #5 (**permalink**) 24.05.2012, 22:36

Hallo,

der Wert 0 benötigt keine Einheit. Zudem hat das von dir gepostete CSS einen Tippfehler, denn dort steht margin: 0xp;.
Es wäre definitiv von Vorteil, wenn du uns das dazugehörige HTML zur Verfügung stellst und evt. sogar eine Online-Version, welche das Problem zeigt.

Gruß, lotti.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
horizontale Navigationsleiste	Kaykay	(X)HTML	3	04.11.2010 08:41
horizontale Navigationsleiste	Tobe	CSS	0	20.07.2008 10:34
Horizontale Navigationsleiste	Marco D.	CSS	10	19.08.2007 10:55
Mitwachsende horizontale Navigationsleiste und Schriftarten	boxi	CSS	1	17.04.2006 17:24
mit <li> horizontale navigationsleiste	oimelchen	CSS	17	26.10.2005 19:29