Navigation ist nicht mittig

Schokokrapfen · #1 (**permalink**) 02.09.2011, 16:35

Hallo!

Ich bin gerade dabei meine erste Webseite zu erstellen. Leider macht mir die Navigation einen Strich durch die Rechnung. =(

Ich möchte eine Navigation mit 2 Ebenen erstellen. Die erste ist horizontal und die zweite vertikal. Das hat soweit auch geklappt.

Aber: die horizontale Ebene soll 950px breit sein und auf der Seite zentriert werden. Funktioniert aber nicht.
Die vertikale Ebene soll dafür nicht zentriert sein und unter dem dazu gehörigen Punkt stehen.
Außerdem sollen die "Naviagtions-Buttons" gleich groß sein.

Ein Online-Beispiel habe ich leider nicht, da auf dem Webspace im Moment noch eine ander Seite liegt.

Aber hier mal mein vollständiger Code:

html:

Code:

<!DOCTYPE HTML PUBLIC "-//W§C/DTD XHTML 1.0 Transitional/EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">

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

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
	<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
	<title>
		Rat
	</title>
</head>

<body>

<a id="banner" href="index.html"></a>


<div id="navigation">
	<div class="innen">			
		<ul>
			<li >
				<h2><a href="index.html" title="Zur Startseite">Home</a><h2/>
			</li>
			
			<li class="active">
				<h2><a href="produkte.html" title="Erfahren Sie mehr über unsere Produkte">Produkte</a><h2/>
				<ul>
					<li >
						<a href="systemg2.html" title="Erfahren Sie mehr über das Produkt">System G2</a>
					</li>
					<li >
						<a href="systemr8.html" title="Erfahren Sie mehr über das Produkt">System R8</a>
					</li>
					<li >
						<a href="Regalwagen.html" title="Erfahren Sie mehr über das Produkt">Regalwagen</a>
					</li>
					<li >
						<a href="systemt.html" title="Erfahren Sie mehr über das Produkt">System T</a>
					</li>
					<li >
						<a href="systemw.html" title="Erfahren Sie mehr über das Produkt">System W</a>
					</li>
					<li >
						<a href="systema.html" title="Erfahren Sie mehr über das Produkt">System A</a>
					</li>
					<li >
						<a href="waeschesammler.html" title="Erfahren Sie mehr über das Produkt">Wäschesammler</a>
					</li>
					<li >
						<a href="leichtmetallwagen.html" title="Erfahren Sie mehr über das Produkt">Leichtmetallwagen</a>
					</li>
					<li >
						<a href="sonderanfertigungen.html" title="Erfahren Sie mehr über das Produkt">Sonderanfertigungen</a>
					</li>
					<li >
						<a href="technischegrundlagen.html" title="Erfahren Sie mehr über das Produkt">Technische Grundlagen</a>
					</li>
				</ul>
			</li>	
			
			<li >
				<h2><a href="kontakt.html" title="Nehmen Sie zu uns Kontakt auf">Kontakt</a><h2/>
			</li>
			
			<li >
				<h2><a href="ueberuns.html" title="Erfahren Sie mehr über uns">Über uns</a><h2/>
			</li>
			
			<li >
				<h2><a href="aktuelles.html" title="Hier erfahren Sie Neuheiten">Aktuelles</a><h2/>
			</li>
		</ul>
	</div>
</div>

<div id="wrapper">	
	<div id="main">
		<h1><a href="index.html" title="Zurück zur Startseite"> rat </a></h1>						<!-- wichtigste Überschrift -->
		<p>
			Einen Überblick über die Welt der </br>
			ROLLBEHÄLTER </br>
			für den Textilbereich - das Lager - die Transportlogistik </br>
			 </br>
			<img src="img/StartRegal.gif" alt="Ein Bild" width="225px" height="348px" /> </br>
			finden Sie auf den folgenden Seiten. </br>
		</p>
	</div>
	<!-- <div id="sidebar"></div> -->
</div>
<div id="footer">
	<div>
		<ul>
			<li >
				<a href="Impressum.html" title="Impressum">Impressum</a>
			</li>
			<li >
				<a href="english.html" title="switch to english">English</a>
			</li>
		</ul>
	</div>
</div>
</body>

</html>

css:

Code:

* {
	background:#FFFFCC;
	font-size: 14px;
	margin: 0px auto;
	padding: 0px;
}

body {
	color:#000000;
	font-family:Arial, "Times New Roman", sans-serif;
	font-size: 14px;
	text-align:center;						
	line-height: 21px;					
	}

p {
	margin: 20px 0px;		
}

#banner{
	display:block;
	background:rgb(253,223,15);
	background-image: url(../img/logo.jpg);
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:150px;
}

/* Navigation */

#navigation .innen, #wrapper, #footer div {
	clear:both;
	text-align:center;
	width:950px;
	margin: 0px auto;		
	padding:0px;
}

#navigation ul{
	width:950px;
	list-style:none;
	margin:0px auto;
}

#navigation ul li{
	position:relative;
	margin:0px auto;
	border:1px solid white;
}

#navigation li{
	float:left;
	border:1px solid white;
}

#navigation ul li.active ul{
	clear:left;
	margin:0px auto;
	padding:0px;
	position:absolute;
	width:180px;
}

#navigation ul li.active ul li{
	float:none;
	position:relative;
}

#navigation li.active{
	position:relative;
}

#navigation li a{
	display:block;
	text-decoration:none;
	font-weight:bold;
	margin:0px auto;
	padding:12px;
}

#navigation li.active li{
	clear:left;
	
}

#navigation a, #navigation li.active li a{				/* größeren Breich anklicken */
	display:block;
	margin:0px auto;
	padding:0px auto;
	background:#CCCCFF;
}

#navigation li.active li a{
	text-align:center;	
}

#navigation li.active a, #navigation li.active li.active a{
	text-align:center;
}

#main {
	clear:both;
	text-align:center;
	width: 950px;
	margin: 0px auto;
}

/* Ueberschriften*/

h1 {
	
}

h1 a {
	clear:both;
	text-align:center;
	color:rgb(253,223,15);
	font-size: 16px;
	text-decoration:none;
}

/*Pseudoklassen*/

#navigation a, #navigation a:link, #navigation li.active li a, #navigation li.active li a:link{
	color:black;
	text-decoration:none;
	background: #CCCCFF;
}

#navigation a:visited, #navigation li.active li a:visited{
	color:#0000FF;
	text-decoration:none;
	background: #CCCCFF;
}

#navigation a:hover, #navigation li.active li a:hover, #navigation a:active, #navigation li.active li a:active, #navigation a:focus, #navigation li.active li a:focus  {
	color:black;
	text-decoration:none;
	background: #66CCFF;
}
	
/* Fussbereich */

#footer {
	margin: 0px auto;
	text-align:center;
	clear: both;		/* verhindert dass footer nach oben wandert */
}

#footer ul{
	list-style:none;
}

#footer li{
	float:left;
}

#footer a{				/* größeren Breich anklicken */	
	clear:both;
	display:block;
	padding:8px 12px 6px;
}

Könnte mir da bitte jemand helfen? ich komm echt nicht mehr weiter. =(
Habe schon in anderen Foren gefragt, aber die konnten oder wollten mir nicht helfen..
Vielen Dank
Schokokrapfen

Chris2011 · #2 (**permalink**) 02.09.2011, 16:48

ich versteh nicht, was soll das werden ein Aufklappmenü ?

http://de.selfhtml.org/css/layouts/n...ten.htm#modern

fricca · #3 (**permalink**) 02.09.2011, 16:53

http://xhtmlforum.de/47790-cross-u-m...-sind-sie.html

Praktikant · #4 (**permalink**) 02.09.2011, 16:55

Zitat:

Zitat von fricca

http://xhtmlforum.de/47790-cross-u-m...-sind-sie.html

Hallo Corina, danke für den Hinweis.
Wenn es dir nicht zu viel Arbeit macht, kannst du noch das andere Thema verlinken, damit man schauen kann was schon geschrieben wurde? Danke

fricca · #5 (**permalink**) 02.09.2011, 16:57

Ich weiß nicht mehr, in welchem Forum ich den gleichen Thread heute schon gesehen habe. Aber der OP weiß es sicher.

K.Roland · #6 (**permalink**) 02.09.2011, 18:48

Hallo,

evtl. müsste man sich selber erstmal eine Testseite erstellen, um mit dein CSS-Code klar zu kommen.
Wenn du schon Code postest, wäre es besser gewesen dein HTML vernünftig einrücken, erleichtert die Lesbarkeit.

___________
Gruß,
Roland

take_a_7 · #7 (**permalink**) 02.09.2011, 19:20

Moin,

Zitat:

Zitat von Praktikant

Hallo Corina, danke für den Hinweis.
Wenn es dir nicht zu viel Arbeit macht, kannst du noch das andere Thema verlinken, damit man schauen kann was schon geschrieben wurde? Danke

http://forum.de.selfhtml.org/?t=2067...04031#m1404031

gruß,
take

K.Roland · #8 (**permalink**) 02.09.2011, 20:16

Hallo

@ fricca, was soll der Hinweis?

Der Fragende Sagte doch:

Zitat:

....
Habe schon in anderen Foren gefragt, aber die konnten oder wollten mir nicht helfen..

_________
Gruß,
Roland

Praktikant · #9 (**permalink**) 02.09.2011, 20:19

Zitat:

Zitat von K.Roland

@ fricca, was soll der Hinweis?

Es fehlt ein Link bzw. die Links auf die Themen.

take_a_7 · #10 (**permalink**) 02.09.2011, 20:21

Moin,

Zitat:

Zitat von K.Roland

@ fricca, was soll der Hinweis?

Der Fragende Sagte doch:

Zitat:

Zitat von Schokokrapfen

Habe schon in anderen Foren gefragt, aber die konnten oder wollten mir nicht helfen..

Nein, er wollte nicht helfen, indem er es Online stellt oder einen ohne Copy-Paste-Orgie (Ein einfaches Copy-Paste ist beim Codeposten ja nicht zu vermeiden) nachbaubaren Testcase zur Verfügung stellt. Das hat er übrigens hier auch noch nicht getan.

gruß,
take

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
Problem mit Navigation	safari	CSS	12	20.04.2011 12:11
Float-Problem?	mischaef	CSS	33	20.10.2010 17:20
Problem mit FlyOut Menu im IE7	quarki69	CSS	5	15.03.2010 16:46
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 16:29
Container mit 2 Container darin -> Hintergrund anzeigen	bendar	CSS	4	05.04.2005 19:18