|
|||
Problem mit dropdown Menue
Hallo,
ich mache grade meine ersten Gehversuche mit CSS Auf meiner Webseite habe ich noch alle Menues als einfache URLs. Daraus habe ich jetzt Rolloverbuttons gemacht. Damit nicht zu viele Buttons auf einmal angezeigt werden, kam ich auf die Idee einen "more..."-Button zu definieren, der dann beim drüberfahren mit der Maus ein vertikales Menü aufklappt. Das funktioniert auch alles so weit, nur wird die Zeile in der der "more..." Button steht, dann so gross wie die das Vertikale Menü. (Ich habe das horizontale und Vertikale Menue jeweils in einer Tabelle) Unter Rollover-Buttons und Dropdown-Menmit CSS kann man sich das Ergebnis gerne mal anschauen, sieht bescheuert aus Direkt darunter habe ich das horizontale Menue mal ohne Tabelle umgesetzt; sieht noch schlimmer aus Hat jemand eine Idee für mich, wie ich das Aufklappmenü "obendrauf" legen kann, ohne dass der Seiteninhalt darunter verschoben wird? Ach ja, nach Möglichkeit einfach mit HTML bzw. CSS. Ich mache das Ganze nicht nur für schön, sondern HTML und CSS zu lernen. Hier noch der Code vom HTML: HTML-Code:
<html> <head> <meta http-equiv="Content-Type" content="text/html; "> <title>Rollover-Buttons und Dropdown-Menümit CSS</title> <style type="text/css"> <!-- @import url(style4.css); --> </style> </head> <body > <div align="center" > <table width="100%" border="0" bgcolor="#C8C8C8"> <tr valign="middle" align="center"> <td bgcolor="#C8C8C8"> <div class="menu" align="center" > <a class="menu" href="index.php?typ=Score" >Score</a> </div> </td> <td> <div class="menu" align="center"> <a class="menu" href="index.php?typ=Brutto" >Brutto</a> </div> </td> <td > <div id="box" class="menu" align="center"><a class="menu" href="#">more... <span> <table> <tr> <td> <div class="menu" align="center"><a class="menu" href="beste_runde.php?gleit=30">Beste</a></div> </td> </tr> <tr> <td> <div class="menu" align="center"><a class="menu" href="index.php?typ=Abschlag">Fairway getroffen?</a></div> </td> </tr> <tr> <td> <div class="menu" align="center"><a class="menu" href="index.php?typ=Putt">Putts</a></div> </td> </tr> </table> </span></a></div> </td> <td> <div class="menu" align="center"><a class="menu" href="hilfe.php">?</a></div> </td> </tr> </table> </div> <br> <div class="menu" align="center" > <a class="menu" href="index.php?typ=Score" >Score</a> <a class="menu" href="index.php?typ=Brutto" >Brutto</a> <a class="menu" href="index.php?typ=Netto" >Netto (Stableford)</a> <a class="menu" href="index.php?typ=Abschlag">Fairway getroffen?</a> <a class="menu" href="overview.php?umfang=10">Übersicht</a> <a class="menu" href="index.php?typ=Putt">Putts</a> <a class="menu" href="index.php?typ=GiR">GiR</a> <a class="menu" href="kurz_lang.php?typ=Kurz">Kurz/Lang</a> <a class="menu" href="tabelle.php">Tabelle</a> <a class="menu" href="last_ten.php?letzte=10">Ø letzte 10</a> <a class="menu" href="index.php?typ=Zeit">Zeitleiste</a> <a class="menu" href="beste_runde.php?gleit=30">Beste</a> <a class="menu" href="gruppe_index.php">Runde</a> <a class="menu" href="club.php">Clubs</a> <a class="menu" href="http://hape42.de/Golf/">Blog</a> <div id="box" class="menu" align="center"><a class="menu" href="#">more... <span> <a class="menu" href="beste_runde.php?gleit=30">Beste</a> <a class="menu" href="index.php?typ=Abschlag">Fairway getroffen?</a> <a class="menu" href="index.php?typ=Putt">Putts</a> </span></a></div> <a class="menu" href="hilfe.php">?</a> </div> </body> </html> Code:
a.menu { font-family:Helvetica; } a.menu:link { color:#666; background-color:transparent; text-decoration:none; border:1px double #fff; padding:2px;} a.menu:visited { color:#666; background-color:transparent; text-decoration:none; border:1px double #fff; padding:2px; } a.menu:hover { color:#ffffff; background-color:#000000; text-decoration:none; border:1px double #f99; } a.menu:active { color:#c66; background-color:transparent; text-decoration:none; border:1px double #f99; } div.menu { text-align:center; } #box { position:relative; top:0px; left:0px; z-index:3;} #box a { color:black; background:#C8C8C8; font: verdana, sans-serif; text-decoration:none; display:block; padding:2px; border:1px solid white;} #box a:hover { color:black; background:#C8C8C8; } #box a span {display:none;} #box a:hover span { color:black; background:#c8c8c8; font:normal verdana, sans-serif; border:1px solid black; display:inline; padding:2px;} vielen Dank schon mal für Antworten/Hilfe Geändert von hape42 (18.11.2011 um 18:35 Uhr) |
Sponsored Links |
|
|||
Auch wenn du das sicher nicht lesen willst, ich versuch's trotzdem:
Ehe du dich mit solchen Effekten befasst, brauchst du erstmal Grundlagenwissen. Dieses fehlt dir sehr offensichtlich noch. Beispiele: Deinem Code fehlt ein Doctype (Google: "Doctype Switch") und das HTML ist alles andere als sinnvoll. Das richtige Markup für eine Navigation (= Auflistung von Links) ist eine Liste. Attribute (z.B. "align", "bgcolor"), die nur der Darstellung dienen, gehören auf den Müll. Dafür gibt es CSS. Bitte leg das erstmal beseite und widme dich Grundlagenlektüre. Empfehlung: Das neue »Little Boxes« - als Buch und Videotraining - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Zitat:
Ja, Du hast Recht. Und zwar sowohl als auch. 1. Ich lese das ungern 2. Ich werde mich mit den Grundlagen beschäftigen. Aber: Diese Webseiten, aus denen ich den Schnipsel rausgelöst habe, existieren seit vielen Jahren. Und ich benötige möglichst bald eine Lösung, die verwendbar ist. Ich befürchte, da Du als Profi da jetzt gleich mit der großen Kelle über meinen Code hergezogen bist, wird es wohl nicht mehr viele Forumsteilnehmer geben, die mir einen Tipp geben. So nach dem Motto: Du musst doch nur bei xy aus dem "A" ein "B" machen. Oder so ähnlich Ich fühle mich wie kurz vor der Lösung, sehe es aber nicht selbst. |
|
||||
Naja, was soll man dir sonst raten?? Solche Navigationen baut man halt komplett anders auf.
Wenn du dich damit nicht beschäftigen willst/kannst, dann kopier dir den Code (gibt genügend Demos im Web). Beispiel: Simple Dropdown Navbar Allerdings wirst du auch hier keine table oder div Konstrukte finden. Manfred |
|
|||
Zitat:
Das hat wirklich geholfen. Jetzt SEHE ich, was Ihr meint. Sorry, da war ich wohl in etwas verrannt |
|
|||
Vielen Dank noch mal an die deutlichen Worte. Musste zwar erst mal schlucken, aber wenn ich jetzt meinen Code zu vorher vergleiche, schäm ich mich fast.
Und je mehr ich stdl. dazu lerne, um so mehr erkenne ich, was ich alles gar nicht weiß So sieht das jetzt aus: Golfstatistiken Hummelbachaue 9-Lochplatz Leider habe ich noch nicht raus gefunden, warum alles nach links ausgerichtet ist. Ich hätte das Menue gerne zentriert (und alles folgende; das muss ich aber erst noch umbauen) Hier der geschrumpfte HTML-Code: HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; "> <title>Golfstatistiken Hummelbachaue 9-Lochplatz</title> <style type="text/css"> <!-- @import url(style4.css); --> </style> </head> <body > <h1> Golfstatistiken Hummelbachaue 9-Lochplatz </h1> <ul id="nav"> <li><a href="index.php?typ=Score" >Score</a></li> <li><a href="index.php?typ=Brutto" >Brutto</a></li> <li><a href="index.php?typ=Netto" >Netto</a></li> <li><a href="overview.php?umfang=10">Übersicht</a></li> <li><a href="last_ten.php?letzte=10">Ø letzte 10</a></li> <li><a href="#">Bahn 1-9 Score » </a> <ul> <li><a href="index.php?typ=1" >Loch 1 Score </a></li> <li><a href="index.php?typ=2" >Loch 2 Score </a></li> <li><a href="index.php?typ=3" >Loch 3 Score </a></li> <li><a href="index.php?typ=4" >Loch 4 Score </a></li> <li><a href="index.php?typ=5" >Loch 5 Score </a></li> <li><a href="index.php?typ=6" >Loch 6 Score </a></li> <li><a href="index.php?typ=7" >Loch 7 Score </a></li> <li><a href="index.php?typ=8" >Loch 8 Score </a></li> <li><a href="index.php?typ=9" >Loch 9 Score </a></li> </ul> </li> <li><a href="#">Bahn 1-9 Netto » </a> <ul> <li><a href="indexStable.php?typ=1" >Loch 1 Stableford </a></li> <li><a href="indexStable.php?typ=2" >Loch 2 Stableford </a></li> <li><a href="indexStable.php?typ=3" >Loch 3 Stableford </a></li> <li><a href="indexStable.php?typ=4" >Loch 4 Stableford </a></li> <li><a href="indexStable.php?typ=5" >Loch 5 Stableford </a></li> <li><a href="indexStable.php?typ=6" >Loch 6 Stableford </a></li> <li><a href="indexStable.php?typ=7" >Loch 7 Stableford </a></li> <li><a href="indexStable.php?typ=8" >Loch 8 Stableford </a></li> <li><a href="indexStable.php?typ=9" >Loch 9 Stableford </a></li> </ul> </li> <li></li> <li></li> <li></li> <li></li> <li><a href="#">more » </a> <ul> <li><a href="index.php?typ=Putt">Putts / Runde</a></li> <li><a href="index.php?typ=GiR">GiR</a></li> <li><a href="kurz_lang.php?typ=Kurz">Kurz/Lang</a></li> <li><a href="index.php?typ=Zeit">Zeitleiste</a></li> <li><a href="beste_runde.php?gleit=30">Beste</a></li> <li><a href="gruppe_index.php">Runde</a></li> <li><a href="tabelle.php">Tabelle</a></li> <li><a href="club.php">Clubs</a></li> <li></li> <li><a href="index.php?typ=Abschlag">Fairway getroffen?</a></li> </ul> </li> <li><a href="http://hape42.de/Golf/">Blog / Feedback</a></li> <li><a href="hilfe.php">?</a></li> </ul> <p></p> </body> </html> Code:
body { background-color:#E9E9E9; text-align:center;} h1 { text-align:center; font-family:Verdana; font-size:1.5em;} #nav, #nav ul { margin:0px; padding:2px; list-style:none; } #nav li { position:relative;/* set containing block for AP sub ul */ float:left; background:#BBB; text-align:center; } #nav li:hover { background:#222; } #nav a { float:left; width:150px; padding:.25em 0; text-decoration:none; color:#000; /*font-weight:bold;*/ border:1px double #fff; padding:2px; } #nav li:hover a {color:#BBB}/*lime*/ /* ------ Sub UL (Drop Down) ------ */ #nav ul { position:absolute; width:150px; left:0; top:100%; margin-left:-999em;/* hide the sub ul */ } #nav li:hover ul { margin-left:0;/* reveal the sub ul on li:hover */ } #nav li:hover li a { color:#000}/*reset "li:hover a" on sub li*/ #nav li li a:hover { color:#0FF;/*cyan*/ background:#555; } |
|
||||
Vermute mal, da kommt noch mehr rein in die Seite?
Dann pack um alles (innerhalb body) einen div. Diesem gibts du eine Breite und 'margin: 0 auto;' Steht alles in "Little Boxes" |
|
|||
Zitat:
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit einer DropDown Liste | manuel_g | CSS | 2 | 31.03.2010 11:11 |
PNG in IE Problem mit der Mauserkennung (klickbar oder nicht) | Angélique | CSS | 13 | 16.03.2010 19:20 |
Dropdown Menü Problem | dannN | CSS | 0 | 18.02.2010 17:31 |
Zwei DropDown Navigationen verschmelzen | Drian | Offtopic | 1 | 13.02.2010 15:00 |
Problem mit Horizonztalem DropDown in Netscape/Mozilla | martin lange | CSS | 1 | 16.03.2007 12:53 |