Sponsored Links |
|
|||
Dein Code ist fehlerhaft, die Bilder können wir nicht sehen und sinnvoll ist dein Markup noch immer nicht.
Lesestoff: DOCTYPE-Switch: Unerklärliche Lücken zwischen Elementen
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
||||
Also, ich habe versucht die ganzen Seiten zu welchen ich durch das FAQ weitergeleitet werde durchzulesen, und habe mich mittlerweile auch schon durch weitere verschiedene Tutorials gearbeitet. Sowohl durch die Links, wie als auch durch selbst ergoogeltes
Leider verstehe ich nicht genau was du mir mit "falschem Markup" zu sagen versuchst, bzw. was genau du damit meinst. Ich lerne gerne und habe auch kein Problem damit, wenn man mir beibringt, dass ich was falsche gemacht habe. Ich würde allerdings gerne verstehen was genau ich denn falsch gemacht habe Also, hier meine neuste Version: (Alle Styles und Scripts habe ich zur verbesserten Anschauung direct im Code eingebaut) Hoffe auf konstruktive Kritik, Freundliche und lernfreudige Grüsse Philippe 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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>CSS Dropdown Menü - Test 1</title> <style> #navbar { margin: 0; padding: 0; height: 1em; } #navbar li { list-style: none; float: left; } #navbar li a { display: block; padding: 3px 8px; background-color: #5e8ce9; color: #fff; text-decoration: none; } #navbar li ul { display: none; width: 10em; /* Weite für Opera Bug */ background-color: #69f;} #navbar li:hover ul, #navbar li.hover ul { display: block; position: absolute; margin: 0; padding: 0; } #navbar li:hover li, #navbar li.hover li { float: none; } #navbar li:hover li a, #navbar li.hover li a { background-color: #151515; border-bottom: 0px; color: #ffffff; } #navbar li li a:hover { background-color: #202020; } body { background-color: #000000; } body,td,th { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; } </style> <script> // Javascript originally by Patrick Griffiths and Dan Webb. // http://htmldog.com/articles/suckerfish/dropdowns sfHover = function() { var sfEls = document.getElementById("navbar").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" hover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" hover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> </head> <body> <ul id="navbar"> <li> <a href="#">MENÜ 1</a> </li> <li> <a href="#">MENÜ 2</a> <ul> <li><a href="#">Subitem 1</a></li> <li><a href="#">Subitem 2</a></li> </ul> </li> <li> <a href="#">MENÜ 3</a> <ul> <li><a href="#">Subitem 1</a></li> <li><a href="#">Subitem 2</a></li> <li><a href="#">Subitem 3</a></li> </ul> </li> <li> <a href="#">MENÜ 4</a> <ul> <li><a href="#">Subitem 1</a></li> <li><a href="#">Subitem 2</a></li> <li><a href="#">Subitem 3</a></li> <li><a href="#">Subitem 4</a></li> </ul> </li> </ul> </div> </body> </html>
__________________
= ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :. Geändert von pkipper (27.03.2009 um 16:04 Uhr) |
|
|||
Vergleiche deine erste Fassung mit der zweiten. Siehst du denn nicht den Unterschied?
Fehler im HTML nennt dir der Validator. The W3C Markup Validation Service HTML Grundlagen: Einführung in XHTML, CSS und Webdesign
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
Ne, also klar sehe ich den Unterschied. Ich meinte ja nur was du unter "Markup" verstehst
Das Tutorial was ich für diesen Code verwendet habe war auch einiges ausführlicher und professioneller gestaltet. Die wesentlichen 2 Unterschiede die ich zu meiner ersten Version feststellen kann sind folgende: 1. 12 Zeilen .js für das ausmerzen einiger Fehler, somit browserübergreiffend. 2. Die Dropdown Liste passt sich nicht mehr länger der Überliste an, somit verschieben sich die Hauptmenü Punkte nicht mehr länger wenn der Text im Dropdown etwas länger ist. Ich habe allerdings eine weitere Frage, denn wenn ich Grafiken anstatt Text in der Navi benutzte, so habe ich noch immer das Problem mit der Baseline... Ich habe mir unerklärliche Lücken zwar durchgelesen, aber noch immer nicht ganz verstanden wo genau ich die Codes einbinden würde damit der Abstand unterhalb der Grafiken verschwinden... Könntest du mir nicht evntl. in 3-4 Zeilen erklären wo ich die codes die ich auf der Seite finde in meinem Code einbinden würde? Danke im Vorraus für die Antworten, Freundliche Grüsse Philippe
__________________
= ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :. Geändert von pkipper (28.03.2009 um 10:44 Uhr) |
|
|||
Zitat:
Zitat:
Auf der verlinkten Seite findest du sogar Beispiele. Studier sie. Wenn du dann immer noch Probleme hast, zeig was du versucht hast. Als Link.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Stichwörter |
css, down, drop, dropdown |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
DIV immer ganze Breite - normal?!?!? | csski | CSS | 3 | 02.07.2008 13:20 |
Wege zum guten CSS - Ausgewählte Links | Sp33dy G0nz4l3s | Ressourcen | 1 | 27.05.2008 12:09 |
CSS Dropdown menu horizontal...Help please ... | Oni | CSS | 4 | 09.04.2008 10:48 |