Ansicht:   

#308244

thorr zur Homepage von thorr

Münster (Nordrhein-Westfalen),
31.03.2012, 13:29:01
(editiert von thorr, 31.03.2012, 13:31:26)

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

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.

Hier mal ein Screenshot:
[image]
Der Pfeil ist hier blau in blau, deswegen sieht man ihn jetzt nicht.

So soll es aussehen:
[image]

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>



CSS-Code:

span.toprow {
	padding: 0px 20px;
	width: 800px;
	height: 60px;
	display: block;
}

ul.menu {
	margin: 25px 20px 0px 0px;
	font-size: 0.9em;
	vertical-align: top;
	float: right;
	display: block;
}

ul.menu li {
	margin: 0px;
	padding: 0px 5px;
	text-align: center;
	display: inline-block;
}

ul.menu li a:link, ul.menu li a:visited {
	color: #c1c1c1;
	text-decoration: none;
}

ul.menu li a:hover, ul.menu li a:active, ul.menu li.selected a:link, ul.menu li.selected a:hover, ul.menu li.selected a:visited, ul.menu li.selected a:active {
	color: #ffffff;
	text-decoration: none;
}

/*ul.menu li.selected {
	position: relative;
	top: 15px;
}*/



Hat jemand eine Idee, wie ich hier vertical-align: top; realisieren kann? Oder wie ich meine Idee anderweitig umsetzen kann?

LG

#308248

Johann [Gast]

31.03.2012, 14:30:45

@ thorr

ul mit inline-lis und vertikaler Ausrichtung

Hallo,

Möglichkeit: Arbeite doch mit einer leeren Grafik gleicher Höhe des Pfeiles bei den inaktiven Listenelementen. Vertical-align funktioniert auch nur bei Text und das auch noch ausserordentlich fehlerbehaftet, je nach Browser. Mit Blindgrafik bist Du auf der sicheren Seite.

Gruß,
Johann

#308249

MudGuard zur Homepage von MudGuard

München,
31.03.2012, 14:33:58
(editiert von MudGuard, 31.03.2012, 14:35:09)

@ thorr

ul mit inline-lis und vertikaler Ausrichtung (ed)

> 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

#308253

thorr zur Homepage von thorr

Münster (Nordrhein-Westfalen),
31.03.2012, 14:43:42

@ Johann

ul mit inline-lis und vertikaler Ausrichtung

Vielen Dank für deine Antwort. Ich möchte Blindgrafiken eigentlich umgehen. Allerdings habe ich, wie ich jetzt festgestellt habe, verwechselt, dass vertical-align, im Gegenteil zu text-align, das Element, das dieses Attribut besitzt, ausrichtet und nicht beinhaltete Elemente. Wenn ich vertical-align den lis zuweise, klappt es.

#308254

thorr zur Homepage von thorr

Münster (Nordrhein-Westfalen),
31.03.2012, 14:46:03

@ MudGuard

ul mit inline-lis und vertikaler Ausrichtung

Vielen Dank für den Tipp mit dem seperator, die Möglichkeit kannte ich gar nicht. Dass ul nur lis beinhalten darf, habe ich mir schon gedacht, aber ich wusste mir nicht anders zu helfen  ;-)

Die Idee mit dem Pfeil habe ich noch nicht ganz verstanden. Was passiert hier mit dem nachfolgenden Element?

#308255

Johann [Gast]

31.03.2012, 14:56:37

@ thorr

ul mit inline-lis und vertikaler Ausrichtung

> Ich möchte Blindgrafiken eigentlich umgehen.

Geschmacksache. Da Du ja sowieso mit Grafiken arbeitest ist das m.E. egal.

> Allerdings habe ich, wie ich jetzt festgestellt habe, verwechselt, dass
> vertical-align, im Gegenteil zu text-align, das Element, das dieses
> Attribut besitzt, ausrichtet und nicht beinhaltete Elemente. Wenn ich
> vertical-align den lis zuweise, klappt es.

So denn, jedoch nicht vergessen, das in den aktuell populären Browsern zu testen.
Auch empfiehlt es sich bei der Entwicklung entweder den W3C Validator oder ein geeignetes Plugin im Entwicklungsbrowser zu verwenden.
Viele Fehldarstellungen basieren auf invalidem Markup, da sucht man sich ohne Validierung oftmals zum Schänzchen.

Gruß,
Johann

#308308

thorr zur Homepage von thorr

Münster (Nordrhein-Westfalen),
31.03.2012, 20:27:53
(editiert von thorr, 31.03.2012, 20:32:56)

@ thorr

ul mit inline-lis und vertikaler Ausrichtung (ed)

Ich habe jetzt einmal versucht, deine Vorschläge umzusetzen. Der Separator hat auf Anhieb funktioniert, beim Pfeil habe ich mit left: 50%; gearbeitet.

Jedoch habe ich noch ein kleines Problemm, die list items haben auf der rechten Seite nämlich einen Phantomabstand.
[image]

HTML-Code:

		<ul class=\"menu\">
			<li><a href=\"#\">Startseite</a>
				<!-- <img src=\"./design/menu_pointer.png\" alt=\"\" style=\"display: inline;\" /> --></li>
			<!-- </a><img src=\"./design/menu_separator.jpg\" alt=\"|\" style=\"display: inline;\" /> -->
			<li><a href=\"#\">Aktuelles</a></li>
			<li><a href=\"#\">Gastlieger</a></li>
			<li><a href=\"#\">Kontakt</a></li>
			<li class=\"selected\"><a href=\"#\">Wassersport</a></li>
		</ul>



CSS-Code:

ul.menu {
	margin: 41px 20px 0px 0px;
	font-size: 0.9em;
	float: right;
	display: block;
}

ul.menu li {
	margin: 0px;
	padding: 0px;
	text-align: center;
	vertical-align: top;
	display: inline-block;
}

ul.menu li:first-child {
	padding-left: 5px;
}

ul.menu li:last-child {
	padding-right: 5px;
}

ul.menu li:not :)first-child):before {
	content: url(\'menu_separator.jpg\');
	vertical-align: top;
	margin: 0px 6px;
	padding: 0px;
}

ul.menu li.selected:after {
	content: url(\'menu_pointer.png\');
	text-align: center;
	position: absolute;
	left: 50%;
	top: 15px;
}

ul.menu li a:link, ul.menu li a:visited {
	color: #c1c1c1;
	text-decoration: none;
}

ul.menu li a:hover, ul.menu li a:active, ul.menu li.selected a:link, ul.menu li.selected a:hover, ul.menu li.selected a:visited, ul.menu li.selected a:active {
	color: #ffffff;
	text-decoration: none;
}

ul.menu li.selected {
	position: relative;
}

#308389

thorr zur Homepage von thorr

Münster (Nordrhein-Westfalen),
01.04.2012, 23:56:36

@ Johann

ul mit inline-lis und vertikaler Ausrichtung

Der build-in-Validator war ein guter Tipp, sehr praktisch. Der zeigte mir an, ich dürfe keine Blockelemente innerhalb eines spans als Inlineelement verwenden. Bezieht sich die Restriktion hier auf das span an sich, das als inline-Element festgelegt ist, oder auf die Inlinedarstellung (d.h. mit display: block ist die Validität wiederhergestellt)?

#308540

Johann [Gast]

03.04.2012, 19:05:15

@ thorr

ul mit inline-lis und vertikaler Ausrichtung

> Bezieht sich die Restriktion hier auf das span an sich, das als
> inline-Element festgelegt ist,

Ja.

> oder auf die Inlinedarstellung (d.h. mit
> display: block ist die Validität wiederhergestellt)?

Nein. Markup != CSS. Das kann zwar wieder zu korrekter Darstellung führen, aber valide ist es nicht. W3C recommendation

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