zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigation ist nicht mittig

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.09.2011, 16:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.09.2011
Beiträge: 48
Schokokrapfen befindet sich auf einem aufstrebenden Ast
Frage Navigation ist nicht mittig

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.09.2011, 16:48
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 301
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

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

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

Geändert von Chris2011 (02.09.2011 um 16:51 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.09.2011, 16:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

http://xhtmlforum.de/47790-cross-u-m...-sind-sie.html
Mit Zitat antworten
  #4 (permalink)  
Alt 02.09.2011, 16:55
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 02.09.2011, 16:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ich weiß nicht mehr, in welchem Forum ich den gleichen Thread heute schon gesehen habe. Aber der OP weiß es sicher.
Mit Zitat antworten
  #6 (permalink)  
Alt 02.09.2011, 18:48
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 02.09.2011, 19:20
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

Zitat:
Zitat von Praktikant Beitrag anzeigen
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
Mit Zitat antworten
  #8 (permalink)  
Alt 02.09.2011, 20:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 02.09.2011, 20:19
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von K.Roland Beitrag anzeigen
@ fricca, was soll der Hinweis?
Es fehlt ein Link bzw. die Links auf die Themen.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.09.2011, 20:21
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

Zitat:
Zitat von K.Roland Beitrag anzeigen
@ fricca, was soll der Hinweis?

Der Fragende Sagte doch:
Zitat:
Zitat von Schokokrapfen Beitrag anzeigen
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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:00 Uhr.