XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Dropdown, woher kommt die graue Leiste? (http://xhtmlforum.de/showthread.php?t=56341)

pkipper 20.03.2009 17:22

CSS Dropdown, woher kommt der extra Abstand?
 
Hallo Leute,

Hab mir mal ein CSS Dropdown gebastelt... Nun habe ich aber folgendes Problem: Aus mir unerklärlichen Gründen habe ich unterhalb meiner Navi Grafiken einen überflüssigen Abstand (zur verbesserten Ansicht habe ich diesen grün eingefärbt). Ich weiss auch welcher Teil des Codes dafür verantwortlich ist, verstehe allerdings NICHT wieso der Abstand passiert, denn mein Padding, Margin etc ist ja auf 0px gesetzt. Das einzige was ich mir noch vorstellen könnte ist dass es mit dem...

#menu ul{width:auto;float:left;margin:0px;padding:0px;ba ckground:#12ff00;list-style:none;}
.clear{clear:both;height:10px;}

...zu tun haben könnte, allerdings verändert sich rein gar nichts wenn ich die 10px verändere, egal ob ich sie kleiner, grösser mache, oder gar lösche, der Abstand bleibt...

Hier der Screenshot:
http://img13.imageshack.us/img13/6171/picture2djv.png

Und hier der gesammte Code (ignoriert die Parameter, ich war faul und hab das File auf dem Desktop liegen lassen :P):
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=UTF-8" />

<title>CSS Dropdown Test</title>

<style type="text/css">

body{font-family:arial;}
#container{width:500px;margin:0 px;font-size:10pt;background:transparent;}

#menu{position:absolute;margin-top:0px;}
#menu ul .item{display:none;}

#menu ul:hover .item{display:block;background:#000000;padding:0px;margin:0px;}
#menu ul:hover .item a{color:#999999;font-size:8pt;text-decoration:none;}
#menu ul:hover .item a:hover{color:#ffffff;}

#menu ul{width:auto;float:left;margin:0px;padding:0px;background:#12ff00;list-style:none;}
.clear{clear:both;height:10px;}

</style>

</head>

<body>

<div id="menu">

<ul id="item1">
<li class="top"><img src="Eigene Arbeiten/Bassride_Web/Web/images/layout_02.png" alt="home" /></li>
<center>
<li class="item"><a href="#">Testmenü 1</a></li>
<li class="item"><a href="#">Testmenü 2</a></li>
<li class="item"><a href="#">Testmenü 3</a></li>
</center>
</ul>

<ul id="item2">
<li class="top"><img src="Eigene Arbeiten/Bassride_Web/Web/images/layout_03.png" alt="home" /></li>
<center>
<li class="item"><a href="#">Testmenü 1</a></li>
<li class="item"><a href="#">Testmenü 2</a></li>
<li class="item"><a href="#">Testmenü 3</a></li>
</center>
</ul>

<ul id="item3">
<li class="top"><img src="Eigene Arbeiten/Bassride_Web/Web/images/layout_04.png" alt="home" /></li>
<center>
<li class="item"><a href="#">Testmenü 1</a></li>
<li class="item"><a href="#">Testmenü 2</a></li>
<li class="item"><a href="#">Testmenü 3</a></li>
</center>
</ul>

<ul id="item4">
<li class="top"><img src="Eigene Arbeiten/Bassride_Web/Web/images/layout_05.png" alt="home" /></li>
<center>
<li class="item"><a href="#">Testmenü 1</a></li>
<li class="item"><a href="#">Testmenü 2</a></li>
<li class="item"><a href="#">Testmenü 3</a></li>
</center>
</ul>

</div>


<p>&nbsp;</p>
<p>blablablablablabla usw usw usw</p>
<p>blablalbasdiuashdaisuhd</p>
</body>
</html>

Wäre echt froh wenn mich jemand aufklären könnte warum dies passiert... Und wenn möglich hätte ich noch eine Frage.

Die Navi sollte zuoberst auf einer "div"-gesättigten Seite angebracht werden ("div"-gesättigt weil direkt aus Photoshop exportiert). Wird es mir die unteren divs, bzw mein Layout, nach unten verschieben wenn das dropdown sich nun expandiert oder wird das einfach darüber gelegt wie bei normalem Text auch?

Ich danke euch schon mal im Vorraus für die hilfreichen Antworten,

Freundliche Grüsse Philippe

fricca 20.03.2009 18:26

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

pkipper 27.03.2009 16:01

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>


fricca 27.03.2009 17:56

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

pkipper 28.03.2009 10:42

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

fricca 28.03.2009 10:53

Zitat:

Zitat von pkipper (Beitrag 427954)
Ne, also klar sehe ich den Unterschied. Ich meinte ja nur was du unter "Markup" verstehst

HTML = Hypertext Markup Language

Zitat:

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?
Nein, ich schreibe dir deinen Code nicht.
Auf der verlinkten Seite findest du sogar Beispiele. Studier sie.
Wenn du dann immer noch Probleme hast, zeig was du versucht hast. Als Link.


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:56 Uhr.

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

© Dirk H. 2003 - 2023