• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Horizontale Scrollbar bei 100 % width

Heiermann

New member
Hallo zusammen,

ich habe folgendes Problem. Auf der Website soll oben ein 100 % breiter Bereich entstehen, der die skalierbare Navigation aufnimmt.

Mit dem u.g. Code zeigen aber IE und auch der Firefox einen horizontalen Balken an. Beim IE kann ich diesen Balken ja noch mit

html {
overflow-x: hidden;
}

unterbinden, aber beim Firefox ändert sich natürlich nichts. Hab ich irgendwo einen Fehler im u.g. Code, oder was kann man anders machen?

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>myhome.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
   @import url("/css/screen.css");
</style>
</head>

<body id="intro">

	<ul id="nav">
		<li id="intro"><a href="/">Magazin</a></li>
		<li id="service"><a href="service.html">Service</a></li>
		<li id="gemeinschaft"><a href="gemeinschaft.html">Gemeinschaft</a></li>
		<li id="ueber_uns"><a href="ueber_uns.html">Über uns </a></li>
	</ul>
</body>
</html>

und die CSS-Datei

HTML:
/* CSS Dokument */

body {
	margin: 0;
	padding: 0;
	font-size: small;
	}
#nav {
	float: left;
	width: 100%;
	margin: 0;
	padding: 60px 0 0 155px; 
	list-style: none;
	background: #ECECF1 url(/img/nav_bg.gif) repeat-x bottom left;
	}
#nav li {
	float: left;
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", sans-serif;
	}
#nav a {
	float: left;
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 8px;
	color: #333;
	text-decoration: none;
	border: 1px solid #9B8748;
	border-bottom: none;
	background: #F9E9A9 url(/img/off_bg.gif) repeat-x top left;
	}
#nav a:hover, body#intro #intro a {
	color: #333;
	padding-bottom: 5px;
	border-color: #727377;
	background: #fff url(/img/on_bg.gif) repeat-x top left;
	}

Viele Grüße

Matthias
 
Zuletzt bearbeitet:
Probiere mal die Zuweisung list-style-position:inside; aus.
Wenn das nicht funktioniert, eventuell keine 100% nehmen, sondern etwas weiniger.
 
Dein Vorschlag mit list-style-position hat leider nicht funktioniert. Habe jetzt die Breite niedriger gesetzt, wobei das echt schade ist, weil der Kopf jetzt natürlich oben rechts nicht abschliesst.

Danke!
 
Moin!

Du könntest, falls es in Dein Konzept paßt, relative Angaben beim padding verwenden:
#nav {
...
width: 85%;
...
padding: 7% 0 0 15%;
...
}

Ahoi - Pit
 
Zurück
Oben