Problem mit Ausrichtung meiner Navigation

[ChaoZz]

Hallo miteinander,
ich habe ein Problem, bei der Ausrichtung meiner Navigation. Hier ein Bild zu meinem Problem:
Bild.
Ich mache nichts im CSS Code und die ist einfach mal oben und mal unten. Ich würde sie gerne in der mitte haben also vom headerContainer. Sie bewegt sich wenn ich z.B. eine andere Seite per Navigation öffne und dann wieder zurückgehe, dann ist sie meistens oben. Hierzu mal meinen bisherigen CSS Code und HTML:
CSS:

#headerContainer {  
	height: 100px;  
	-webkit-box-shadow: 0 8px 6px -6px #a1a1a1;  
	-moz-box-shadow: 0 8px 6px -6px #a1a1a1;  
	box-shadow: 0 8px 6px -6px #a1a1a1;  
	margin-left: -8px;  
	margin-right: -8px;  
	margin-top: -8px;  
	margin-bottom: 5px;  
	padding-left: 200px;  
	padding-right: 200px;  
}  
  
#nav {  
	position:relative;  
	font-family: 'Source Sans Pro';  
	float: right;  
	margin-top: 0px;  
}  
  
ul#navigation {  
    margin:0px auto;  
    position:relative;  
    float: right;  
	padding:0;  
}  
  
ul#navigation li {  
    display:inline;  
    font-size:12px;  
    font-weight:bold;  
    margin:0;  
    padding:0;  
    float:left;  
    position:relative;  
}  
  
ul#navigation li a {  
    padding:10px 25px;  
    color:#616161;  
    text-shadow:1px 1px 0px #fff;  
    text-decoration:none;  
    display:inline-block;  
    border-top:1px solid #fff;  
    background: #fafafa;  
  
    -webkit-transition:color 0.2s linear, background 0.2s linear;  
    -moz-transition:color 0.2s linear, background 0.2s linear;  
    -o-transition:color 0.2s linear, background 0.2s linear;  
    transition:color 0.2s linear, background 0.2s linear;  
}  
  
ul#navigation li a:hover {  
    background:#f8f8f8;  
    color:#00ec11;  
}  
  
ul#navigation li a.first {  
    border-left: 0 none;  
}  
  
ul#navigation li a.last {  
    border-right: 0 none;  
}  
  
ul#navigation li:hover > a {  
    background:#fff;  
}  
  
ul#navigation li:hover > ul {  
    visibility:visible;  
    opacity:1;  
}  
  
ul#navigation ul, ul#navigation ul li ul {  
    list-style: none;  
    margin: 0;  
    padding: 3px;  
    visibility:hidden;  
    opacity:0;  
    position: absolute;  
    z-index: 99999;  
    width:auto;  
    background:#f8f8f8;  
    box-shadow:1px 1px 3px #ccc;  
  
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;  
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear;  
    -o-transition:opacity 0.2s linear, visibility 0.2s linear;  
    transition:opacity 0.2s linear, visibility 0.2s linear;  
}  
  
ul#navigation ul {  
    top: 43px;  
    left: 1px;  
}  
  
ul#navigation ul li ul {  
    top: 0;  
    left: 181px;  
}  
  
ul#navigation ul li {  
    clear:both;  
    width:100%;  
    border:0 none;  
    border-bottom:1px solid #c9c9c9;  
}  
  
ul#navigation ul li a {  
    background:none;  
    padding:7px 15px;  
    color:#616161;  
    text-shadow:1px 1px 0px #fff;  
    text-decoration:none;  
    display:inline-block;  
    border:0 none;  
    float:left;  
    clear:both;  
    width:150px;  
}  
  
.input {  
	padding: 7px;  
	border: 1px solid lightgrey;  
	width: 200px;  
}  
			  
.input:focus {  
	transition-duration: 0.5s;  
	box-shadow: 0px 0px 2px orange;  
	cursor: pointer;  
}  
			  
.input:hover {  
	cursor: pointer;  
}  
			  
.button {  
	padding: 6px;  
	border: 0px;  
	border: 1px solid lightgrey;  
}  
			  
.button:hover {  
	transition-duration: 0.3s;  
	background-color: lightgrey;  
}

HTML:

<div id="headerContainer">  
		<img src="../images/logo_green.png" alt="YOUR NAME" class="logo">  
		<nav id="nav">  
			<ul id="navigation">  
				<li><a href="?p=home" color="#00ec11">Home</a></li>  
				<li><a href="#" color="#000">Info</a></li>  
				<li><a href="#" color="#000">Kontakt</a></li>  
				<li><a href="#" color="#000">Login &raquo;</a>  
					<ul><li><?php showLogin(); ?></li></ul>  
				</li>  
			</ul>  
		</nav>  
	</div>

Es wäre supernett wenn ihr mir helfen könntet, da ich am Verzweifeln bin.

Mit freundlichen Grüßen
ChaoZz

[Matthias Apsel]

Om nah hoo pez nyeetz, ChaoZz!

Es wäre supernett wenn ihr mir helfen könntet, da ich am Verzweifeln bin.

Es wäre supernett, wenn du die Seite verlinken könntest, damit sich nicht jeder Hilfsbereite erst eine Testseite zusammenbauen muss.

Matthias

[Der Martin]

Hallo,

Es wäre supernett wenn ihr mir helfen könntet, da ich am Verzweifeln bin.
Es wäre supernett, wenn du die Seite verlinken könntest, damit sich nicht jeder Hilfsbereite erst eine Testseite zusammenbauen muss.

allerdings, ja.

Unabhängig davon würde ich anhand des gezeigten Codes jetzt schon sagen:

* Die zahlreichen IDs sind IMO zum großen Teil nicht nötig.
 * Die Kombination von position:absolute, position:relative und float in einigen Elementen
   lässt mich vermuten, dass der OP die Wirkung dieser Eigenschaften nicht verstanden hat.
 * position:relative ohne eine Angabe zur Position mag einen Sinn ergeben - dann nämlich,
   wenn das Element nur als Koordinatenursprung für positionierte Nachfahrenelemente dienen
   soll (was aber im gezeigten Code nirgends genutzt wird). Aber position:absolute ohne
   Positionsangabe ist IMO sinnlos.

So long,
 Martin

[ChaoZz]

Om nah hoo pez nyeetz, ChaoZz!

Es wäre supernett wenn ihr mir helfen könntet, da ich am Verzweifeln bin.

Es wäre supernett, wenn du die Seite verlinken könntest, damit sich nicht jeder Hilfsbereite erst eine Testseite zusammenbauen muss.

Matthias

Ich werde gleich einen Link zur Seite schicken, diese ist aber nur zum lernen da.

[ChaoZz]

Om nah hoo pez nyeetz, ChaoZz!

Es wäre supernett wenn ihr mir helfen könntet, da ich am Verzweifeln bin.

Es wäre supernett, wenn du die Seite verlinken könntest, damit sich nicht jeder Hilfsbereite erst eine Testseite zusammenbauen muss.

Matthias

Ich werde gleich einen Link zur Seite schicken, diese ist aber nur zum lernen da.

hier mal drauf gehen

und wenn ihr dann ein wenig rumspielt mit der navi mal auf home klicken und wieder zurück und wieder auf home klicken, irgendwann, dann bugt es rum

[M.]

Mahlzeit,

hier mal drauf gehen

" Diese Seite ist leider nicht mehr verfügbar, Fehler 404"

und wenn ihr dann ein wenig rumspielt mit der navi mal auf home klicken und wieder zurück und wieder auf home klicken, irgendwann, dann bugt es rum

An wem soll ich denn rumspielen?

[ChaoZz]

Mahlzeit,

hier mal drauf gehen

" Diese Seite ist leider nicht mehr verfügbar, Fehler 404"

und wenn ihr dann ein wenig rumspielt mit der navi mal auf home klicken und wieder zurück und wieder auf home klicken, irgendwann, dann bugt es rum

An wem soll ich denn rumspielen?

http://79.238.56.201
Geh da mal drauf sollte funktionieren. Einloggen kann man sich dort mit den daten: Username: amdin PW: admin. Profil buggt noch rum, aber dann kann man immer auf Profil gehen und auf home, also imemr die seiten wechseln

[ChaoZz]

Mahlzeit,

hier mal drauf gehen

" Diese Seite ist leider nicht mehr verfügbar, Fehler 404"

und wenn ihr dann ein wenig rumspielt mit der navi mal auf home klicken und wieder zurück und wieder auf home klicken, irgendwann, dann bugt es rum

An wem soll ich denn rumspielen?

http://79.238.56.201
Geh da mal drauf sollte funktionieren. Einloggen kann man sich dort mit den daten: Username: amdin PW: admin. Profil buggt noch rum, aber dann kann man immer auf Profil gehen und auf home, also imemr die seiten wechseln

sry:
http://79.238.14.48

[M.]

Mahlzeit,

sry:
http://79.238.14.48

Mal schnell ausprobiert: Beim ersten Aufruf greift5 das float: right; nicht
Wieso das so ist, hab ich nicht geprüft, aber die Fehler im Validator sollten da kein Problem sein, wäre aber möglich.

[ChaoZz]

Mahlzeit,

sry:
http://79.238.14.48

Mal schnell ausprobiert: Beim ersten Aufruf greift5 das float: right; nicht
Wieso das so ist, hab ich nicht geprüft, aber die Fehler im Validator sollten da kein Problem sein, wäre aber möglich.

Verstehe jetzt nicht wie ich den Fehler beheben soll

[Matthias Apsel]

Om nah hoo pez nyeetz, ChaoZz!

Verstehe jetzt nicht wie ich den Fehler beheben soll

Du solltest jetzt nach einigen Antworten mitbekommen haben, dass hier Vollzitate nicht notwendig sind, sie stören nur den Lesefluss.

Matthias

[ChaoZz]

Om nah hoo pez nyeetz, ChaoZz!

Verstehe jetzt nicht wie ich den Fehler beheben soll

Du solltest jetzt nach einigen Antworten mitbekommen haben, dass hier Vollzitate nicht notwendig sind, sie stören nur den Lesefluss.

Matthias

Ja aber die frage ist jetzt wie ich es beheben kann ^^

[Matthias Apsel]

Om nah hoo pez nyeetz, ChaoZz!

[wieder Vollzitat]
Ja aber die frage ist jetzt wie ich es beheben kann ^^

offensichtlich nicht.

Ich kann den Fehler nicht reproduzieren.

Matthias

[ChaoZz]

offensichtlich nicht.

Doch habe es! Habe das float: right; entfernt und einfach die höhe mittels margin geändert. Es klappt es klappt :D Danke :)