Hallo miteinander,
ich habe ein Problem, bei der Ausrichtung meiner Navigation. Hier ein Bild zu meinem Problem:
Ich mache nichts im CSS Code und die Navigation 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 unten. Hierzu mal meinen bisherigen CSS Code und HTML:
CSS:
Code
#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:
PHP
<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 »</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
