Kleine Formatierungshilfe gesucht ^^

[Nedo]

Hi,

arbeite gerade an einem kleinem Projekt. habe mein Template in Typolight integrieren können, funzt soweit alles super... nur jetzt habe ich ein Problem xD
Ich bin irgendwie zu doof das zu verhindern.

Beim mouseover in der Navi soll oben und unten ein border erscheinen. Tuts auch, aaaber, die Navi "verwackelt dann immer um 1px oder so.

Link: http://typo.ned0r.de

#navcontainer ul
{
margin-left:148px;
padding:16px 0px 2px 0px;
font-weight:normal;
font-size:90%;
color:#006633;
list-style-type:none;
font-style: normal;
font-variant: normal;
}

li
{
float:left;
}

li p
{
float:left;
padding:.2em 1em;
font-style:italic;
text-decoration:none;
color:#666666;
}

li a
{
float:left;
padding:.2em 1em;
text-decoration:none;
color:#666666;
}

li a:hover
{
border-top:1px solid #666666;
border-bottom:1px solid #666666;
color:#333333;
}


Hat mir jemand die Erleuchtung? :redface:

Hab mir schon überlegt vorher auch einen Rahmen hinzumachen, der sollte dann aber durchsichtig sein X-D Geht das vielleicht? ^^

[rotalever]

Versuch es mal mit negativem margin.
Durchsichtige Farbe ist transparent

[mictasm]

In deinem Design würde ich anstatt der Linien einen Wechsel der Hintergrundfarbe vorziehen. Wenn du da ein passendes leichtes Grau nimmst, sieht das bestimmt auch ordentlich aus.

[Nedo]

Versuch es mal mit negativem margin.
Durchsichtige Farbe ist transparent
Wie würde das dann mit dem margin aussehen?

Zur Farbe: also border: 1px solid transparent; ?

@mictasm: Joa, hatte ich auch schon, sah nett aus, aber irgendwie habens mir border voll angetan xD

Aber wenn ich nicht hinbekomme, dann mach ich es so ;)

E: HA alter danke xD es funktioniert mit transparent. Aber das mit dem margin würde mich jetzt trotzdem noch interessieren =)

Ah, neues Problem. Die Seite auf der man sich befindet soll kursiv geschrieben werden. Klapt auch wie man sieht, allerdings verschieben sich dann immer die anderen 2 Navpunkte. Da gibts doch bestimmt auch so einen Profitrick xD

[rotalever]

Aber das mit dem margin würde mich jetzt trotzdem noch interessieren =)
Das Problem ist halt, dass durch den Border bei hover oben und unten 1px mehr dazu kommt. Das kann man sozusagen rückgängig machen, wenn man dann margin: -1px 0 -1px 0; macht. Aber ich leg mich da nicht fest, das letzte mal, dass ich sowas gemacht hab ist schon was her. Ich probier dann immer mit padding und margin so lange rum, bis es passt...

edit: bzw. kann man auch einfach bei dem nicht-gehoverten Button ein margin: 1px 0 1px 0; anstatt des transparenten borders machen. Fällt mir grad so ein.