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

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

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.


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;
}

gesamter Thread: