XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Dropdownmenue funktioniert nicht (http://xhtmlforum.de/showthread.php?t=68054)

YandelF 01.09.2012 16:36

Dropdownmenue funktioniert nicht
 
Folgendes: Mein Dropdownmeue lässt sich zwar herunterfahren, aber ich kann dann nicht auf das neu aufgelistete zugreifen, wahrscheinlich weil da eine kleine Lücke ist. Leider hab ich keine Ahnung wie ich die wegbekomme oder was das Problem sonst sein könnte :(

Hier der HTML-Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head>
            <link href="style.css" type="text/css" rel=StyleSheet>
                <title>Grundgerüst</title>
        </head>
        <body>
                <nav>
                      <div id="navigation_main">
                     
                <div id="main">
               
                      <ul id="navi_main">
                     
                          <a href="#"><li class="Home">Home
                          </li></a>
                          <a href="#"><li class="News">News
                                <ul class="dropdown_navi">
                                    <a href="#"><li>Half|Craft</li></a>
                                </ul>
                          </li></a>
                         
                      </ul>
               
                </div>
               
              </div>
                </nav>
        </body>
</html>

Und hier der CSS-Code der Navigation:

Code:

/* css script dropdown_navi */

ul#navi_main {
    text-align: center;
    font-family: Arial;
    font-weight: bold;
    font-size: small;
    color: #000000;
}
ul#navi_main a {
    text-decoration: none;
    color: white;
}
ul#navi_main a:hover {
    text-decoration: none;
    color: #00FF00;
}
ul#navi_main li {
    float: left;
    position: relative;
    list-style-type: none;
}
ul#navi_main li.Home {
    width: 125px;
    padding-top: 5px;
    padding-bottom: 5px;   
}
ul#navi_main li.News {
    width: 125px;
    padding-top: 5px;
    padding-bottom: 5px;
}
    ul#navi_main li.Home:hover {
    width: 125px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #00FF00;
    background-color: #C1C1C1;
    }
    ul#navi_main li.News:hover {
    width: 125px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #00FF00;
    background-color: #C1C1C1;
    }


ul#navi_main li ul.dropdown_navi {
    background-color: #C1C1C1;
    position: absolute;
    left: 0;
    top: 30px;
    width: 125px;
    padding: 5px;
}
ul#navi_main li ul li {
    float: none;
    text-align: left;
    display: block;
    color: white;
    padding:5px;
    border-bottom-color: #000000;
    border-bottom: solid;
    border-bottom-width: 1px;
}
ul#navi_main li ul li:hover {
    float: none;
    text-align: left;
    display: block;
    background-color: gray;
    padding: 5px;
   
}
ul#navi_main li>ul {
    display: none;
}
ul#navi_main li:hover>ul {
    display: block;
}

Hier noch die eigentliche CSS-Datei:

Code:

/* css script */

@import url("navi.css");

body {
    background-color: #808080;   
}

ich hoffe ihr könnt mir weiterhelfen :))

Manfred62 01.09.2012 17:18

1. dein html ist falsch bzw. falsch verschachtelt --> Validator
2. stell das mal online (nach der Korrektur), dann kann man besser helfen

YandelF 01.09.2012 17:51

Zitat:

Zitat von Manfred62 (Beitrag 520104)
1. dein html ist falsch bzw. falsch verschachtelt --> Validator
2. stell das mal online (nach der Korrektur), dann kann man besser helfen

Hab den Code mal dadurch gejagt ... Keine falsche verschachtelung.

Manfred62 01.09.2012 17:55

Hmm, weiss nicht, was du da getestet hast..?
Zitat:


Info No Character encoding declared at document level

No character encoding information was found within the document, either in an HTML meta element or an XML declaration. It is often recommended to declare the character encoding in the document itself, especially if there is a chance that the document will be read from or saved to disk, CD, etc.

See this tutorial on character encoding for techniques and explanations.

Info Using Direct Input mode: UTF-8 character encoding assumed

Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.

If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.

↑ Top
Validation Output: 7 Errors

Error Line 8, Column 7: element "NAV" undefined

<nav>



You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
Error Line 15, Column 39: start tag for "LI" omitted, but its declaration does not permit this

<a href="#"><li class="Home">Home


Error Line 15, Column 56: document type does not allow element "LI" here

<a href="#"><li class="Home">Home



The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Error Line 17, Column 56: document type does not allow element "LI" here

<a href="#"><li class="News">News



The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Error Line 19, Column 48: document type does not allow element "A" here

<a href="#"><li>Half|Craft</li></a>



The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Error Line 19, Column 52: document type does not allow element "LI" here

<a href="#"><li>Half|Craft</li></a>



The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Error Line 20, Column 37: end tag for "UL" which is not finished

</ul>



Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

YandelF 01.09.2012 18:03

Hmm ... ok dann hab ich das wohl falsche gemacht ;o

Ich hab mir deine Fehlermeldungen mal angeschaut: Sind das denn relevante Punkte die dort aufgeführt werden? Eigentlich könnte es ja garnicht daran liegen oder?

gato 01.09.2012 18:59

Zitat:

Zitat von YandelF (Beitrag 520107)
Ich hab mir deine Fehlermeldungen mal angeschaut: Sind das denn relevante Punkte die dort aufgeführt werden? Eigentlich könnte es ja garnicht daran liegen oder?

Nicht alle Fehler die du erzeugt hast wirken auf dein Problem ein, aber die schiere Anzahl der Fehler macht es schwer, den tatsächlichen Übeltäter zu finden.

Außerdem würde ich dir raten, dein Stylesheet etwas aufzuräumen, d.h. unnötige oder doppelte Angaben entfernen.

Wie dem auch sei, dein Problem besteht ganz einfach darin, dass die Submenüs 30 Pixel unter dem gehoverten Hauptmenüpunkt beginnen. Die Hauptmenüpunkte sind aber keine 30 Pixel hoch, daher hast du keinen Kontakt/Übergang zwischen beiden Elementen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:36 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019