#308244 thorrMü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, <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>
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;
}*/
|
|
#308248 Johann [Gast]31.03.2012, 14:30:45 @ thorr |
ul mit inline-lis und vertikaler Ausrichtung |
Hallo, |
|
#308249 MudGuardMü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, <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>
|
|
#308253 thorrMü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 thorrMü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 |
|
#308255 Johann [Gast]31.03.2012, 14:56:37 @ thorr |
ul mit inline-lis und vertikaler Ausrichtung |
> Ich möchte Blindgrafiken eigentlich umgehen. |
|
#308308 thorrMü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. <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>
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 thorrMü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 |