nicht angemeldet
li ul LINKS unten ausrichten + bei hover langsam vergrössern!
Gunnar BittersmannIch möchte ein Menü gestalten, in der die Links als Vierecke zu sehen sindm beim anklicken sollen sie groß werden. Jetzt mein Problem:
Meine Links, Vierecke sind oben ausgerichtet, sie sollen allerdings unten an der Linie sein, ich habe es schon mit bottom:0 versucht aber irgendwie bekomme ich es nicht hin.
Weiter habe ich noch eine weitere Frage, aber ich weis nicht ob so was mit CSS zu verwirklichen ist. Wenn man auf einen Link, Viereck geht, kommt sofort das grosse Viereck, was ja OK ist, schöner wäre es aber, wenn es langsam von KLEIN auf GROSS gehen würde....
Puhh ich hoffe ich habe einigermassen verständlich formuliert.
Einen schönen Sonntag noch und vieleicht die eine oder andere Idee und Anmerkung
Ani
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
ul.haupt {
list-style-type: none;
height:200px;border: 1px solid #CDBE70;
}
li.haupt {
margin: 2px;
float:left;
}
a.haupt {
display: block;
}
a.haupt:link, a.haupt:visited {
background: #F1EDC2;
border: 1px solid #CDBE70;
color: #000;
width: 100px;
height: 100px;
padding: 5px;
text-decoration: none;
}
a.haupt:hover{
border: 1px solid #008800;
color: #191970;
width: 150px;
height: 150px;
padding: 5px;
text-decoration: none;
}
</style>
</head>
<body>
<ul class="haupt">
<li class="haupt"><a class="haupt" href="xxxx">1</a></li>
<li class="haupt"><a class="haupt" href="xxxx">2</a></li>
<li class="haupt"><a class="haupt" href="xxxx">3</a></li>
<li class="haupt"><a class="haupt" href="xxxx">4</a></li>
<li class="haupt"><a class="haupt" href="xxxx">5</a></li>
</ul>
</body>
</html>
-
@@Anabell (ohne Rennpferde):
nuqneH
Meine Links, Vierecke sind oben ausgerichtet, sie sollen allerdings unten an der Linie sein, ich habe es schon mit bottom:0 versucht aber irgendwie bekomme ich es nicht hin.
Die 'bottom'-Eigenschaft wirkt nur auf positionierte Elemente. [CSS2 §9.3.2]
Du könntest das 'ul'-Element relativ positionieren und dessen 'li'-Elemente darin absolut.
Aber das ist wohl nicht das, was du willst. Du verwendest besser nicht 'float', sondern 'display: inline-block' mit 'vertical-align: bottom'. [INLINE-BLOCK]
Weiter habe ich noch eine weitere Frage, aber ich weis nicht ob so was mit CSS zu verwirklichen ist. Wenn man auf einen Link, Viereck geht, kommt sofort das grosse Viereck, was ja OK ist, schöner wäre es aber, wenn es langsam von KLEIN auf GROSS gehen würde....
Ja, das lässt sich mit CSS 3 verwirklichen. Oder man sollte sagen: Es wird sich mit CSS 3 verwirklichen lassen. [CSS3-TRANSITIONS, ALA318b]
Um es gegenwärtig browserübergreifend zu realisieren, ist JavaScript erforderlich.
<ul class="haupt">
<li class="haupt"><a class="haupt" href="xxxx">1</a></li>
<li class="haupt"><a class="haupt" href="xxxx">2</a></li>
<li class="haupt"><a class="haupt" href="xxxx">3</a></li>
<li class="haupt"><a class="haupt" href="xxxx">4</a></li>
<li class="haupt"><a class="haupt" href="xxxx">5</a></li>
</ul>Die Klassen sind unsinnig. Wenn alle Elemente auf gleicher Ebene derselben Klasse angehören, ist das ein sicheres Indiz dafür, dass die Klasse überflüssig ist. Es genügt, dem 'ul'-Element eine Klasse zu vergeben und im Stylesheet dessen Nachfahren 'li' und 'a' per Nachfahrenselektor [CSS2 §5.1, §5.5, http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML]
Vermutlich ist ul[@class="haupt"] aber einzigartig, so dass eine ID sinnvoller wäre als eine Klasse. [CLASS-ID] Für Screenreader bietet sich @role="navigation" an. [ALA319a, ALA319b]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)