ChaoZz: Problem mit Ausrichtung meiner Navigation

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

  1. 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 Unterschied zwischen Java und JavaScript ist größer als der zwischen Pier und Piercing.

    1. 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

      --
      In Ägypten haben früher 150000 Leute 35 Jahre lang an einer Pyramide gearbeitet. Aber bei uns arbeiten doppelt so viele Leute doppelt so lange allein an der Baugenehmigung.
        (Dieter Nuhr, deutscher Kabarettist)
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    2. 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.

      1. 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

        1. 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?

          --
          42
          1. 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

            1. 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

              1. 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.

                --
                42
                1. 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

                  1. 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

                    --
                    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Quark und Quarks.

                    1. 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 ^^

                      1. 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

                        --
                        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen grau und grausam.

                        1. 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 :)