mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 22:41 Benutzername: Passwort: Auto-Login

Thema: Dropdown mit CSS - kicker.de vom 17.02.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> Dropdown mit CSS - kicker.de
Autor Nachricht
splintercell
Threadersteller

Dabei seit: 03.07.2003
Ort: Göttingen
Alter: -
Geschlecht: Männlich
Verfasst So 17.02.2008 03:09
Titel

Dropdown mit CSS - kicker.de

Antworten mit Zitat Zum Seitenanfang

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!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pRiMUS

Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht: Männlich
Verfasst So 17.02.2008 09:11
Titel

Antworten mit Zitat Zum Seitenanfang

das ist ein ganz einfaches display:block/none js gefummel mit einem div und bissle positionierungskram. mehr ist das nicht.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst So 17.02.2008 11:23
Titel

Antworten mit Zitat Zum Seitenanfang

müßt aber auch ohne js gehen schau mal da
  View user's profile Private Nachricht senden
splintercell
Threadersteller

Dabei seit: 03.07.2003
Ort: Göttingen
Alter: -
Geschlecht: Männlich
Verfasst Di 19.02.2008 12:11
Titel

selfhtml-Infobox

Antworten mit Zitat Zum Seitenanfang

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 *zwinker*

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... * Keine Ahnung... *

* Ich geb auf... * 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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Nach Dropdown auswahl neues Dropdown erscheinen
CSS Dropdown
Dropdown Menue
JS-Dropdown Menu
Dropdown - MYSQL
Dropdown Box mit Rollover
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Tipps & Tricks für Nonprint


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.