Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
splintercell
Threadersteller
Dabei seit: 03.07.2003
Ort: Göttingen
Alter: -
Geschlecht:
|
Verfasst So 17.02.2008 03:09
Titel Dropdown mit CSS - kicker.de |
|
|
Hallo zusammen!
Ich habe jetzt die halbe Nacht rumgesucht, und auch die einschlägigen Sites/Beispiele wie "ALA" und "Son of Suckerfish" durchgeackert - die dort genannten Beispiele funktionieren auch toll.
Bei kicker.de öffnet sich ein Dropdown-Menü, wenn man auf den Link "Weitere Informationen" geht (mouseover). Aber irgendwie bin ich zu blöd, die Codeschnipsel von den o.a. Sites an das vom kicker verwendete Prinzip anzupassen. Oder arbeiten die dort nach einem anderen Prinzip?
Sobald ich die padding, margin, height und width Werte für "nav, nav ul, nav a und nav li" ändere, zerschieße ich das komplette Layout. Aus irgendeinem Grund bekomme ich die Positionierung nicht absolut hin. Entweder erscheint der Text rechts bei mouseover rechts versetzt oder er schiebt sich gleich direkt über den Link, der den Effekt hervorrufen soll.
Hat jemand eine tolle Idee? Und einen hilfreichen Tipp? Wär total super! Danke schonmal!
|
|
|
|
|
pRiMUS
Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht:
|
Verfasst So 17.02.2008 09:11
Titel
|
|
|
das ist ein ganz einfaches display:block/none js gefummel mit einem div und bissle positionierungskram. mehr ist das nicht.
|
|
|
|
|
Anzeige
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst So 17.02.2008 11:23
Titel
|
|
|
müßt aber auch ohne js gehen schau mal da
|
|
|
|
|
splintercell
Threadersteller
Dabei seit: 03.07.2003
Ort: Göttingen
Alter: -
Geschlecht:
|
Verfasst Di 19.02.2008 12:11
Titel selfhtml-Infobox |
|
|
Danke für die Antworten - habe nach einer reinen CSS-Lösung gesucht. Leider funzt die absoluten Positionierung noch immer nicht so, wie ich mir das vorgestellt habe, aber es wird langsam
Bin durch Zufall noch bei der Infobox von selfhtml (http://aktuell.de.selfhtml.org/artikel/css/infobox/index.htm) gelandet, und die kommt dem, was ich machen will schon sehr nahe.
Bliebe nur noch ein Frage: wie bekomme ich es hin, dass bei unterschiedlichen Textstyles, also h1, h2 und p, der Text wirklich direkt untereinander steht, und nicht jedesmal diese unseelige Zeilenhöhe dazwischenhaut? Habe irgendwas von "padding-top: 0px" gelesen, aber entweder wende ich es falsch an oder es ist der falsche Befehl...
Man muss das padding halt an die richtige Stelle setzen... dann geht's!
Das nächste Problem ist: wenn ich einen weiteren Link in dem Info Text setzen will, zeigt er mir diesen nicht an, sondern setzt eine neue Box in die bestehende, die man dann nicht sieht, und schmeißt den nachfolgenden Text aus der ersten Box raus. Hänge mal meinen bisherigen Code an:
#box {
position:absolute; top:50px; left:50px;
z-index:3;}
#box a {
color:#111111;
background:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}
#box a:hover {
color:#111111;
background:#ffffff;
width:400px;}
#box a span {display:none;}
#box a:hover span {
color:black;
background:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
display:block;
padding-top:25px;
}
-->
</style>
</head>
<body>
<div id="box"><a href="#">INFOBOX<span>Und hier geht der Testtext weiter, inklusive Zeilenumbruch, und eventuell ohne Leerzeile dazwischen.</span></a></div>
Zuletzt bearbeitet von splintercell am Di 19.02.2008 12:21, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Nach Dropdown auswahl neues Dropdown erscheinen
CSS Dropdown
Dropdown Menue
JS-Dropdown Menu
Dropdown - MYSQL
Dropdown Box mit Rollover
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|