<ul> Border um 1/2 verschoben?!

[kakado]

Hey Leute,
ich habe folgendes Problem bei meiner website, die ich versuche zu programmieren:
Ich habe eine ganz normale Navigations-bar(fixed) die ich nicht mittels display:inline zentriert habe, sondern mittels Float:left usw. Jetzt habe ich es nach langem rumprobieren auch mal geschafft ein Dropdown Untermenü für den Punkt "Account" zu erstellen; jetzt wollte ich um mein Dropdown-untermenu einen Border setzten, der diese <ul> in der die unterpunkte drin sind umrandet, das klappt aber kurioser weise nicht. Der border ist zwar sichtbar, aber er ist meiner meinung nach ca. um die Hälfte der <ul> nach rechts verschoben...habs auch schon mit diversen <div> versucht aber es will einfach nicht klappen...ich weiss echt nicht mehr was das Problem ist :/, Ich hoffe ihr könnt mir hier weiterhelfen,so sieht das aus:
hier meine Codes:
Der Html code:

...
<header>
<div id="nav">
    <nav class="cl-effect-5">
        <div id="centeredmenu">
            <ul>
                    <li><a href="protected.php" class="active"><span data-hover="Home">Home</span></a></li>
                    <li><a href="Account.php"><span data-hover="Account">Account</span></a>
                        <ul>
                            <li><a href="">Unterpunkt1.1</a></li>
                            <li><a href="">Unterpunkt1.2</a></li>
                        </ul>
                    </li>
                    <li><a href="helpProtected.html"><span data-hover="Help">Help</a></span></li>
                    <li><a href="contactProtected.html"><span data-hover="Contact">Contact</span></a></li>
            </ul>
        </div>
    </nav>
</div>
</header>
...

die zugehörige CSS:

...
#centeredmenu
{
    clear:left;
   float:left;
   width:100%;
   height:80px;
   background:#1A1A1A;
   overflow:visible;
   position:relative;
   font-size:2em;

}

#centeredmenu ul
{  

   float:left;
   list-style:none;
   margin-top:10px;
   padding:0;
   position:relative;
   left:50%;
}

#centeredmenu ul li
{

   float:left;
   list-style:none;
   margin:0 0 0 20px;
   padding:0;
   position:relative;
   right:50%;
   text-align:center;


}

#centeredmenu ul li ul
{
    position:absolute;
    margin:0;
    padding:0px;
    border:4px solid blue;
}

#centeredmenu ul li ul li
{
    float:none;
    display:block;
    margin:0px;
    padding:0px;


}


#centeredmenu ul li > ul
{
    display: none;
}

#centeredmenu ul li:hover>ul
{
    display: block;

}

#centeredmenu ul li ul li a
{

    border: 4px solid white;
    border-bottom-left-radius:15px;
    border-top-left-radius:15px;
    border-bottom-right-radius:15px;
    border-top-right-radius:15px;
    width:120px;
    height:50px;
    color:grey;
    text-decoration:none;
    display:block;
    background:black;
    line-height:50px;
    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background  0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}

#centeredmenu ul li ul li a:hover
{
    background:grey;
    border: 4px solid white;

}

#centeredmenu ul li a
{
    border: 4px solid white;
    border-bottom-left-radius:15px;
    border-top-left-radius:15px;
    border-bottom-right-radius:15px;
    border-top-right-radius:15px;
    width:120px;
    height:50px;
    color:grey;
    text-decoration:none;
    display:block;
    background:url(navpics/navback2.jpg);
    line-height:50px;
}


#centeredmenu ul li a:hover,
#centeredmenu ul li a.active:hover
{
   background:url(navpics/navback.jpg);
   color:#fff;
   border: 4px solid #7D7D7D;
}

#centeredmenu ul li a.active
{
   color:white;
   background:url(navpics/navback.jpg);
}
...

 

[AzRaIL]

Ein Link wäre natürlich besser aber ich denke es liegt an dem right und left 50%
Wieso positionierst du deine Elemente damit? Sollte auch anders gehen.
Ansonsten mal im Browser untersuchen da kommt man schnell dahinter welche Styles das ganze verursachen

 

[Tronjer]

ch habe eine ganz normale Navigations-bar(fixed) die ich nicht mittels display:inline zentriert habe, sondern mittels Float:left usw.

Mit float: left wird nichts zentriert.

Ich würde erst mal das Div #centeredmenu löschen. Das ist semantisch falsch, und das float:left im obigen Kontext sinnfrei. Anschließend das CSS bereinigen. Alle position relative/absolute löschen, für die ul li anstatt float: left ein display: inline-block verwenden. Die Anweisungen für border lassen sich in einer Zeile schreiben und das transition ist für die Problemstellung auch nicht unbedingt notwendig.

Wenn du das überflüssige Div gelöscht, dein CSS auf den halben Umfang gekürzt und das Ergebnis mit Firebug im Browser überprüft hast und die Probleme immer noch nicht bereinigt sind, dann stelle die Seite online, damit Andere sich das anschauen können.

 

[kakado]

...
Wieso positionierst du deine Elemente damit? Sollte auch anders gehen.

... Und wie? Vll einen Vorschlag? - hab heute wieder vieles ausprobiert aber irgendwie will das einfach nocht klappen... Kann mir niemand helfen?...

 

[Tronjer]

Was hilft gegen Ignoranz?

Ich hatte einen Ansatz gepostet, auf dem du hättest aufbauen können. Wenn du das ignorierst, ist dir nicht zu helfen.

 

[kakado]

Schau mal, ich habe deinen ansatz ausprobiert... Sobald ich das div lösche habe ich wieder probleme die leiste zu zentrieren. Dann hab ich es geschafft zu zentrieren aber dann hat die animation der button das ist so ein same word slide in nicht mehr so funktioniert wie sie sollte... Ich werde meine arbeit mal später posten... Ich ignoriere dich nicht:)... Ruhig bleiben:)

 

[AzRaIL]

http://jsfiddle.net/ELQ3w/

right und left rausgenommen und den a's keine feste breite geben.
Dennoch solltest du an deiner Struktur arbeiten sonst kommt da kein sauberer Code zustande.