Auf Thema antworten 2026

Beitrag

<blockquote data-quote="xxxsharkyxxx" data-source="post: 1656805" data-attributes="member: 105429">[gelöst] Formatierungsproblem bei horizontaler NavigationIch arbeite gerade an einer Website mit horizontaler Navigation und komme jetzt seit längerem nicht weiter. Der HTML-Teil sieht folgendermassen aus:[html]&lt;div id=&quot;HorizontalNavi&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;punkt1.aspx&quot;&gt;Punkt1&lt;/a&gt; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;punkt2.aspx&quot;&gt;Punkt2&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;punkt3.aspx&quot;&gt;Punkt3&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;punkt4.aspx&quot;&gt;Punkt4&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&lt;/div&gt;[/html]Der zugehörige CSS-Teil:[code]ul{&nbsp; &nbsp; list-style-image:none;&nbsp; &nbsp; list-style-type:none;}a{&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; outline-style:none;&nbsp; &nbsp; outline-color:invert;&nbsp; }#HorizontalNavi{&nbsp; &nbsp; height: 29px;&nbsp; &nbsp; border-left: 1px solid #cccccc;&nbsp; &nbsp; border-top:1px solid #ccc;&nbsp; &nbsp; border-right: 1px solid #ccc;&nbsp; &nbsp; border-bottom: 1px solid #666666;&nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; vertical-align:top;}#HorizontalNavi li{&nbsp; &nbsp; float:left;&nbsp; &nbsp; border-right:1px solid #ccc;&nbsp; &nbsp; overflow:visible;&nbsp; &nbsp; background-color: #d8d8d8;}#HorizontalNavi a{&nbsp; &nbsp; color:#333;&nbsp; &nbsp; display:inline-block;&nbsp; &nbsp; padding: 6px 12px 6px 12px;&nbsp; &nbsp; height:17px;}[/code]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 &quot;drin&quot; sein. Jedenfalls kriege ich das ganze nicht hochgeschoben. Kann mir jemand helfen?Gruss</blockquote>

[QUOTE="xxxsharkyxxx, post: 1656805, member: 105429"] [b][gelöst] Formatierungsproblem bei horizontaler Navigation[/b] Ich arbeite gerade an einer Website mit horizontaler Navigation und komme jetzt seit längerem nicht weiter. Der HTML-Teil sieht folgendermassen aus: [html] <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> [/html]Der zugehörige CSS-Teil: [code] 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; } [/code]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 [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?