|
|||
Drop Down Menu Problem
Liebe Community,
nach langer Zeit habe ich mich mal wieder an CSS / HTML getraut und komme in folgendem Problemfall einfach nicht weiter. Ich denke der HTML teil ist soweit in Ordnung. Ich schaffe es nur leider nicht den "DropDown" Effekt zum laufen zu kriegen. Ich würde mich freuen wenn ihr mir helfen könntet das Teil ans laufen zu bekommen! Vielen vielen Dank im Vorraus. Wenn ihr sonst irgendeinen Mist in dem CSS/HTML teil findet - Ich bin für jede kontruktive Kritik offen!!! HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="k3.css"> <title>TITEL</title> </head> <body> <div id="mainframe"> <div id="headerframe"> <div id="headerl"> </div> <div id="headerr"> </div> </div> <div id="nav"> <ul> <li><a href="#" class="mlink">Home</a></li> <ul> <li><a href="#" class="link">Link 1</a></li> <li><a href="#" class="link">Link 2</a></li> <li><a href="#" class="link">Link 3</a></li> <li><a href="#" class="link">Link 4</a></li> <li><a href="#" class="link">Link 5</a></li> </ul> </ul> </div> <div id="inhalt"> </div> <div id="footer"> </div> </div> </body> </html> Code:
#mainframe { margin: auto; padding: 0; width: 800px; } body { font:Tahoma, Geneva, sans-serif; font-size: 12px; color: #fff; } #headerframe { width: 800px; margin: 0; padding: 0; } #headerl { background-image: url(cut100130.jpg); height: 100px; width: 130px; margin: 0; padding: 0; float: left; } #headerr { width: 670px; height: 100px; float: right; background-color: #fff; } #nav { margin: 0; height: 25px; width: 800px; float: left; background-repeat:repeat-x; padding: 0; border-top-width: 2px; border-top-color: #006; border-top-style: solid; } .mlink { text-decoration: none; text-transform: capitalize; font-size:12px; font-family: Century Gothic; color: #006; list-style: none; } .link { color: #000; text-decoration: none; text-transform:uppercase; font-size:12px; font-family:Arial, Helvetica, sans-serif; list-style: none; } #nav ul { display: inline-block; list-style: none; margin: 0; padding: 0; } #nav ul li { display: block; line-height: 25px; text-align: center; margin: auto; padding: 0; width: 80px; background-color: #DDF; } #nav ul li:hover { display: block; line-height: 25px; text-align: center; background-color: #006; margin: auto; padding: 0; width: 80px; } #nav ul li:hover .mlink { color: #FFF; } #nav ul ul li { display: block; line-height: 25px; text-align: center; background-color: #ddf; margin: auto; padding: 0; width: 80px; } #nav ul ul { visibility: hidden; } #nav ul li:hover ul { visibility: visible; } |
Sponsored Links |
|
|||
Nein, ist er nicht. Warum validierst du nicht?
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
||||
Hallo,
zuerst einmal solltest du die zusammengehörigen Listeneinträge und Listen ineinander verschachteln, denn so kannst du sie mittels deines Selektors "#nav ul li:hover ul" auch problemlos selektieren: Code:
<ul> <li> <a href="#">Home</a> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li> </ul> Optional kannst du die Klassen "mlink" und "link" auch mit einem "display: block" versehen. Das hat den netten Effekt, dass der Link sich über die gesamte Breite des umschließenden Elementes erstreckt. PS: Ich habe hier ein ganz nettes Tutorial zum Thema Dropdown Menüs gefunden. Das wird dir sicherlich weiterhelfen: - CSS3 Dropdown Menu Gruß, lotti.
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint Geändert von lottikarotti (02.05.2012 um 16:17 Uhr) |
|
||||
Zitat:
Aus demselben Grund ist auch das verlinkte Tut imho unbrauchbar. Man kann die Subliste per position:absolute und left:-9999px ausblenden und durch das hovern mit left:auto wieder einblenden.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus Geändert von hubspe (02.05.2012 um 17:14 Uhr) |
|
||||
Zitat:
nicht immer ist die Barrierefreiheit Teil der Anforderungen, weshalb die von mir genannte Lösung und das verlinkte Tutorial nicht grundsätzlich unbrauchbar sind. Ich persönlich finde die Lösung über die display-Eigenschaft "schöner", denn ich will das Element ausblenden und nicht verschieben. Gruß, lotti.
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
|
|||
vielen dank + neues problem
Vielen lieben dank für die schnelle Hilfe! Wie so oft folgt auf ein grade gelöstes Problem schnell ein neues! Mein Dropdownmenu wird im Firefoxbrower nicht korrekt angezeigt. Das ganze sieht wie folgt aus:
https://rapidshare.com/files/129280627/fsfsfsfsf.jpg HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="kontakt.css"> <title>K3 - Real Estate</title> </head> <body> <div id="mainframe"> <div id="headerframe"> <div id="headerl"> </div> </div> <div id="nav"> <ul> <li><a href="#" class="mlink">Home</a> <ul> <li><a href="#" class="link">Link 1</a></li> <li><a href="#" class="link">Link 2</a></li> <li><a href="#" class="link">Link 3</a></li> <li><a href="#" class="link">Link 4</a></li> <li><a href="#" class="link">Link 5</a></li> </ul> </li> <li><a href="#" class="mlink">Wir</a> <ul> <li><a href="#" class="link">Link 1</a></li> <li><a href="#" class="link">Link 2</a></li> <li><a href="#" class="link">Link 3</a></li> <li><a href="#" class="link">Link 4</a></li> <li><a href="#" class="link">Link 5</a></li> </ul> </li> <li><a href="#" class="mlink">Immobilien</a> <ul> <li><a href="#" class="link">Link 1</a></li> <li><a href="#" class="link">Link 2</a></li> <li><a href="#" class="link">Link 3</a></li> <li><a href="#" class="link">Link 4</a></li> <li><a href="#" class="link">Link 5</a></li> </ul> </li> <li><a href="#" class="mlink">Beratung</a> <ul> <li><a href="#" class="link">Link 1</a></li> <li><a href="#" class="link">Link 2</a></li> <li><a href="#" class="link">Link 3</a></li> <li><a href="#" class="link">Link 4</a></li> <li><a href="#" class="link">Link 5</a></li> </ul> </li> <li><a href="#" class="mlink">Kontakt</a> <ul> <li><a href="#" class="link">Link 1</a></li> <li><a href="#" class="link">Link 2</a></li> <li><a href="#" class="link">Link 3</a></li> <li><a href="#" class="link">Link 4</a></li> <li><a href="#" class="link">Link 5</a></li> </ul> </li> <li><a href="#" class="mlink">Datenschutz</a> <ul> <li><a href="#" class="link">Link 1</a></li> <li><a href="#" class="link">Link 2</a></li> <li><a href="#" class="link">Link 3</a></li> <li><a href="#" class="link">Link 4</a></li> <li><a href="#" class="link">Link 5</a></li> </ul> </li> </ul> </div> <div id="inhalt"> <div id="ilinks"> <iframe width="330" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=k%C3%B6ln+heumarkt&aq=&sll=51.151786,10.415039&sspn=14.653642,43.286133&ie=UTF8&hq=&hnear=Heumarkt,+50667+K%C3%B6ln,+Nordrhein-Westfalen&t=m&ll=50.936147,6.960182&spn=0.016227,0.025749&z=14&iwloc=A&output=embed"></iframe><br /><small><a href="http://maps.google.de/maps?f=q&source=embed&hl=de&geocode=&q=k%C3%B6ln+heumarkt&aq=&sll=51.151786,10.415039&sspn=14.653642,43.286133&ie=UTF8&hq=&hnear=Heumarkt,+50667+K%C3%B6ln,+Nordrhein-Westfalen&t=m&ll=50.936147,6.960182&spn=0.016227,0.025749&z=14&iwloc=A" style="color:#0000FF;text-align:left">Größere Kartenansicht</a></small> </div> <div id="irechts"> <p class="kontakth">Kontakt:</p> <p class="kontakth1"> </p> <p class="kontakth1">XXXXXXXXXXXXXXXXXX GmbH</p> <p class="kontakth2"> </p> <p class="kontakth2">XXXXXXXXXXXXXstr 42 </p> <p class="kontakth2">50966 Köln </p> <p class="kontakth2"> </p> <p class="kontakth2">Tel.: +49 221 XXXXXXXX</p> <p class="kontakth2">Fax: +49 221 XXXXXXXX </p> <p class="kontakth2"> </p> <p class="kontakth2">E-Mail: welcome(at)XXXXXXXXX.de</a></p> <p class="kontakth2"> Internet: www.XXXXXXXXX.de </p> <div id="kf"> <br /> <br /> <form action="#index" method="post"> <input type="text" name="name" value="Name" onBlur="if (this.value == '') this.value='Name'" onFocus="if (this.value == 'Name') this.value='';" size="15"><br> <input type="text" name="vorname" value="Vorname" onBlur="if (this.value == '') this.value='Vorname'" onFocus="if (this.value == 'Vorname') this.value='';" size="15"><br> <input type="text" name="email"" value="Email" onBlur="if (this.value == '') this.value='Email'" onFocus="if (this.value == 'Email') this.value='';" size="15"><br><br> <textarea style="background-color:#DDF ; color: #000000; width: 310px; border: solid 1px #ffffff;" rows="7" cols="70" class="textfeld" name="comment" value="Kommentar" onBlur="if (this.value == '') this.value='Kommentar'" onFocus="if (this.value == 'Kommentar') this.value='';" ></textarea> <input type="submit" value="Send" style="background-color:#ffffff; color: #000000; border: none; border-style:none;"/> </form> </div> </div> <div id="iunten"> </div> </div> <div id="footer"> <a href="#" class="footer">AGB</a> <a href="#" class="footer">Impressum</a> <a href="#" class="footer">Datenschutz</a> </div> </div> </body> </html> Code:
#mainframe { margin: auto; padding: 0; width: 800px; } body { font:Tahoma, Geneva, sans-serif; font-size: 12px; color: #fff; } #headerframe { width: 800px; margin: 0; padding: 0; } #headerl { background-image: url(k3_thin_3_flipGC.jpg); height: 200px; width: 196px; margin: auto; padding: 0; } #nav { margin: 0; height: 25px; width: 800px; float: left; padding: 0; border-top-width: 2px; border-top-color: #006; border-top-style: solid; } .mlink { text-decoration: none; text-transform: capitalize; font-size:12px; font-family: Century Gothic; color: #006; list-style: none; display: block; } .link { color: #fff; text-decoration: none; font-size:12px; font-family:Arial, Helvetica, sans-serif; list-style: none; display: block; } #nav ul { display: inline-block; list-style: none; margin: 0; padding: 0; } #nav ul li { display: block; line-height: 25px; text-align: center; margin: auto; padding: 0; width: 80px; background-color: #DDF; float: left; } #nav ul li:hover { display: block; line-height: 25px; text-align: center; background-color: #006; margin: auto; padding: 0; width: 80px; } #nav ul li:hover .mlink { color: #FFF; } #nav ul ul li { line-height: 25px; text-align: center; background-color: #ddf; margin: auto; padding: 0; width: 80px; } #nav ul li ul { display: none; } #nav ul li:hover ul { display: block; } #nav ul ul li:hover { background-color: #AEAEFF;; width: 80px; } #inhalt { border: #000 solid 1px; height: auto; width: 800px; margin-top: 35px; padding-top: 10px; } #footer { width: 800px; margin-top: 3px; height: 30px; border-top-width: 2px; border-top-color: #006; border-top-style: solid; color: #000; font-size:12px; padding: auto; } .footer { text-align: center; margin-left: 20px; text-decoration: none; text-transform:uppercase; color: #000; clear: both; } #ioben { height: 100px; width: 750px; margin: 5px 25px; } #ilinks { height: auto; width: auto; margin-left: 55px; float: left; margin-bottom: 5px; } #irechts { height: 400px; width: 310px; margin-right: 55px; float: right; background: #ffffff; color: #000; padding-top: 0px; } #iunten { height: 100px; width: 750px; margin-top: 5px; margin-bottom: 5px; margin-left: 25px; clear: both; } .kontakth { font-weight: bold; font-size: 14px; margin: 0; } .kontakth1, .kontakth2 { margin: 1px; padding: 0; } .kontakth1 { font-size:14px } #kf { width: auto; height: auto; padding: 0; margin: 0; } Dreamweaver zeigt alles korrekt an..... Vielen dank für eure Hilfe schonmal im Vorraus! Liebe Grüße, Anton |
Stichwörter |
drop down menu, visibility hide |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Css Menu Problem | Rapidement | CSS | 11 | 16.06.2011 15:38 |
DHTML-Drop Down - Menü |Drop Down erst bei Click | Scolex | CSS | 1 | 22.02.2011 18:05 |
Kindelement eines ausgeblendeten Elternelementes ansprechen | wandler | CSS | 7 | 19.06.2010 02:32 |
CSS navigations problem | domi1984 | CSS | 10 | 07.12.2007 14:59 |