Ansicht:   

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

verfaßt von thorr zur Homepage von thorr, Münster (Nordrhein-Westfalen), 31.03.2012, 13:29:01
(editiert von thorr, 31.03.2012, 13:31:26)

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

 

gesamter Thread:

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