Ansicht:   

#308249 ul mit inline-lis und vertikaler Ausrichtung (web.design)

verfaßt von MudGuard zur Homepage von MudGuard, München, 31.03.2012, 14:33:58
(editiert von MudGuard, 31.03.2012, 14:35:09)

> Hallo,
>
> ich habe eine ul-Liste mit inline-lis. Der aktive Menüpunkt soll mit einem
> unteren Pfeil dargestellt werden, der über das übliche li hinausragt.
> Allerdings verschiebt sich nun die ul-Liste nach oben, was ja auch richtig
> ist. Jedoch verharren alle anderen lis weiterhin unten oder mittig in der
> ul-Liste. Ich möchte jedoch erreichen, dass diese oben angesiedelt sind und
> dann das aktive li wegen es Bildes halt nach unten hin größer ist, damit
> ich das ul mittels position nach unten verschieben kann und die lis
> weiterhin in einer Reihe sind.

> HTML-Code:

	<span class=\"toprow\">
> <ul class=\"menu\">
> <li class=\"selected\"><a href=\"#\">Startseite</a><br />
> <img src=\"./design/menu_pointer.png\" alt=\"\" style=\"display: inline;\"
> /></li>
> <img src=\"./design/menu_seperator.jpg\" alt=\"|\" style=\"display: inline;
> position: relative; top: 3px;\" />
> <li><a href=\"#\">Gastlieger</a></li>
> </ul>



Da ist schon mal das HTML kaputt.

Das img darf in ul gar nicht vorkommenm, ul darf als Kinder nur li enthalten.

Aber warum hast Du diese rein der Deko dienenden Bildchen (separator, pointer) überhaupt im HTML?
Die gehören ins CSS.

Die Trenner für li:not(:first-child)::before { content:url(separator.png) }

(ersatzweise li:not(:last-child)::after)

Und für den unter dem Menüpunkt angeordneten Pfeil:
für das betroffene li.selected position:relative setzen, und dann das li.selected::after {content:url(pointer.png); position:absolute; left:0; top:??px; } per absoluter Positionierung setzen.

--
[image]
MudGuard
O-o-ostern

 

gesamter Thread:

Ansicht:   
Auf unserer Web-Seite werden Cookies eingesetzt, um diverse Funktionalitäten zu gewährleisten. Hier erfährst du alles zum Datenschutz