Formatierungsproblem bei horizontaler Navigation

[xxxsharkyxxx]

[gelöst] Formatierungsproblem bei horizontaler Navigation

Ich arbeite gerade an einer Website mit horizontaler Navigation und komme jetzt seit längerem nicht weiter. Der HTML-Teil sieht folgendermassen aus:

<div id="HorizontalNavi">
                <ul>
                    <li><a href="punkt1.aspx">Punkt1</a> </li>
                    <li><a href="punkt2.aspx">Punkt2</a></li>
                    <li><a href="punkt3.aspx">Punkt3</a></li>
                    <li><a href="punkt4.aspx">Punkt4</a></li>
                </ul>
</div>

Der zugehörige CSS-Teil:

ul
{
    list-style-image:none;
    list-style-type:none;
}

a
{
    text-decoration:none;
    outline-style:none;
    outline-color:invert;  
}

#HorizontalNavi
{
    height: 29px;
    border-left: 1px solid #cccccc;
    border-top:1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #666666;
    overflow:hidden;
    vertical-align:top;
}

#HorizontalNavi li
{
    float:left;
    border-right:1px solid #ccc;
    overflow:visible;
    background-color: #d8d8d8;
}

#HorizontalNavi a
{
    color:#333;
    display:inline-block;
    padding: 6px 12px 6px 12px;
    height:17px;
}

Das Resultat sieht folgendermassen aus:



Die ganze Liste müsste eigentlich bündig mit dem oberen und unteren Border sein, sie ist aber 14px zu weit unten. Ich habs mit negativem Margin versucht, funktioniert aber auch nicht. Diese 14px scheinen die Höhe der ul-List zu sein. Jedoch müssten die Links ja in dieser List "drin" sein. Jedenfalls kriege ich das ganze nicht hochgeschoben. Kann mir jemand helfen?

Gruss

 

[MatthiasM2D]

AW: Formatierungsproblem bei horizontaler Navigation

Hi,

schau Dir mal deine Klasse #HorizontalNavi. Du vergibts eine feste Höhe in Verbindung mit:

overflow:hidden;

Deswegen ist die Navi abgeschnitten

Gruß

 

[xxxsharkyxxx]

AW: Formatierungsproblem bei horizontaler Navigation

Das ist mir schon klar, aber das ist ja eigentlich auch nicht das Problem. Wenn ich das Hidden wegnehme, ragt die Liste einfach über den Div-Container hinaus. Aber das Positionierungsproblem ist weiterhin vorhanden. Ich will ja einfach die ganze Liste nach oben schieben....

 

[AndrOve]

AW: Formatierungsproblem bei horizontaler Navigation

Hallo, ich würde erstmal generell resetten.

Da gibt's inziwschen unterschiedliche Meinungen, ob das guter Stil,weil der Code ja aufgebläht wird etc pp.....
Aber da geh ich konform mit den großen Frameworks und nehme das in Kauf, zumal das mit serverseitig eingeschalter gzip-Komprimierung nur ein paar Bytes sind.

Alternativ solltest Du vielleicht Erfolg haben, wenn #HorizontalNavi ul mal explizit keinen margin zuweist.

Hoffe, dass hat Dir geholfen.
Gruß Andreas

 

[xxxsharkyxxx]

AW: Formatierungsproblem bei horizontaler Navigation

Juhuu danke dir, hat geholfen =)

Herzlichen Dank

 

[MatthiasM2D]

AW: Formatierungsproblem bei horizontaler Navigation

Hi,

dann vergib für die ul mal ein padding und margin 0 Aktuell hat die Liste noch die Standardhöhen und Auffüllungen.

Gruß

War ich wohl zu spät

 

[AndrOve]

AW: Formatierungsproblem bei horizontaler Navigation

Bitte gerne.
Und danke fürs Danke sagen .

Gruß Andreas

Edit:
Threadtitel bitte, wenn es geht, auf gelöst setzen