XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Probleme mit einem Drop Down Menü (http://xhtmlforum.de/showthread.php?t=67460)

netzwerg 09.05.2012 11:47

Probleme mit einem Drop Down Menü
 
Hallo ihr Lieben,

ich habe hier ein, wahrscheinlich für Euch ein kleines Problem und hoffe nun, dass mir hier jemand eventuell helfen kann. Ich bin noch ein Anfänger was die HTML Programmierung betrifft und versuche es zu erlernen. Für Hilfe wäre ich dankbar und auch für jede Kritik. Sehr wahrscheinlich mache ich auch noch völlig unsinnige Fehler und kann nur daraus lernen wenn mich jemand darauf aufmerksam macht.

Nun gut, mein aktuelles Problem besteht darin, dass ich ein einfaches Drop Down Menü erstellen möchte - soweit klappt das auch... Allerdings öffnen sich meine Drop Down Links wenn ich mit der Maus darüber fahre nicht unter dem entsprechenden Link, sondern irgendwo weiter unten. Frage: Warum? Was mache ich falsch?

Dies ist mein HTML Code:
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>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Ich bin Versuch 1</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
</head>
  <body>
      <div id="up_div"> <!-- BEGINN up_div -->
          <div id="header"> <!-- BEGINN header -->
 <ul id="navigation">
            <li>
              <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Link 1</a>
                <ul>
                    <li><a href="#">Unterseite 1.1</a></li>
                    <li><a href="#">Unterseite 1.2</a></li>
                    <li><a href="#">Unterseite 1.3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Link 2</a>
                <ul>
                    <li><a href="#">Unterlink 2.1</a></li>
                    <li><a href="#">Unterlink 2.2</a></li>
                    <li><a href="#">Unterlink 2.1</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Link 3</a>
            </li>
            <li>
                <a href="#">Link 4</a>
            </li>
        </ul>
        </div> <!-- ENDE header -->
      </div> <!-- ENDE up_div -->

  </body>
</html>

Und dies ist mein CSS Code:
Code:

/*--CSS Document---------------------------------------------------*/
body {
      padding:0; margin:0;
      }

div, ul, p, h1, h2, h3, h4, img {
      padding:0;
      margin:0;
      }

ul {
      list-style-type:none;
      }

.bank {
      line-height:0px; font-size:0px; clear:both;
      }

/*--up_div----------------------------------------------------------*/

#header {
      background:url(images/header2.jpg) no-repeat 0 0;
      width:778px;
      margin:0 auto;
      position:relative;
      height:260px;
      }


#header ul {
      width:646px;
      display:block;
      position:absolute;
      top:190px;
      left:0px;
      }


#header ul li a {
      font:13px/20px 'Trebuchet MS', Arial, Helvetica, sans-serif;
      text-transform:uppercase;
      font-weight:bold;
      padding:0 15px 0 8px;
      color:#434341;
      display:block;
      text-decoration:none;
      }

/*-- Abstände auf "Null" setzen:--*/

* {
margin: 0;
padding: 0;
}

/*--Formatiert die Menüleiste--*/
ul{

            list-style:none;
            margin:0;
            padding:0;
        }

#navigation > li{
            display:inline-block;
        }


#navigation > li > ul{
            position:absolute;
            visibility:hidden;

        }
#navigation > li:hover > ul{
            visibility:visible;
        }

Viele Grüße und danke für Eure Hilfe,
netzwerg

fricca 09.05.2012 11:59

Bitte gib immer einen Link zum Problem an. Kaum jemand hat Lust und Zeit, deine Codeteile rauszukopieren, im Editor zusammenzusetzen und dann lokal zu betrachten. Siehe dazu auch die Hinweise für Fragende.

Ohne deinen Code im Browser angeschaut zu haben, würde ich sagen: Schau dir mit den Entwicklerwerkzeugen deines Browsers an, welchen Wert für "top" du deinen Submenüs gegeben hast.

BTW: Darstellungsprobleme sind CSS-Probleme, dafür gibt es ein eigenes Forum.

netzwerg 09.05.2012 12:46

Hallo,

danke.

Ich habe leider zur Zeit noch keinen Link womit ich die Darstellung einfacher machen kann, entschuldigt bitte. Falls mir doch jemand helfen möchte, wäre ich sehr dankbar darum.

Was "top" betrifft, habe ich schon ausprobiert. Damit ist doch gemeint, wie weit die Links bzw. Menüleiste vom oberen Rand der Webseite entfernt sind, oder? Je höher die px-Zahl, je weiter rutschen die Links bzw. Menüleiste nach unten.

Nun ja, da bleibt mir wohl nichts anderes übrig als das CSS-Forum aufzusuchen.

Trotzdem danke,
netzwerg

fricca 09.05.2012 12:51

Zitat:

Zitat von netzwerg (Beitrag 516156)
Ich habe leider zur Zeit noch keinen Link womit ich die Darstellung einfacher machen kann, entschuldigt bitte.

Es gibt "Freehoster" (<- Suchbegriff).

Zitat:

Was "top" betrifft, habe ich schon ausprobiert.
Du verstehst nicht. Was hat deine Analyse ergeben? Welchen Wert für "top" hat dein Submenü, das ul-Element?
Du hast allen ul Elementen, die Nachfahre des Elements #header sind, den Wert 190px für top gegeben. Lies bitte nach über den Unterschied von Nachfahren- und Kindselektoren. Dann schau dir nochmal genau an, was du in deinem Code stehen hast.

edit:
Zitat:

Damit ist doch gemeint, wie weit die Links bzw. Menüleiste vom oberen Rand der Webseite entfernt sind, oder?
Nein, um die Links geht es in dem Fall nicht, sondern um die ul-Elemente.
Lies bitte nach, wie absolute Positionierung funktioniert und wonach sich deren Position richtet. Welches Buch verwendest du, um CSS zu lernen?


Zitat:

Nun ja, da bleibt mir wohl nichts anderes übrig als das CSS-Forum aufzusuchen.
Nein, du brauchst keinen neuen Thread eröffnen. Rechts oben in deinem Beitrag kannst du den Thread dem Administrator melden, und ihn bitten, dass er ihn in den CSS-Bereich verschiebt.

netzwerg 09.05.2012 13:17

Danke, für den Übergang ist die Lösung mit Freehoster nicht verkehrt.

Das Problem ist nun gelöst, das Menü sieht nun so aus wie gewünscht. Besten Dank für den Hinweis was den Unterschied von Nachfahren- und Kindselektoren betrifft, so genau war mir deren Funktion nicht bekannt - nun habe ich etwas dazu gelernt.

Alles was ich bislang über CSS weiß und gelernt habe, habe ich aus dem Internet. Ein gutes Buch welches mir zusagt habe ich bisher noch nicht gefunden. Gegen Tipps was richtig gute CSS sowie HTML Bücher betrifft, habe ich nichts einzuwenden... ich plane schon seit längerem mir zwei Bücher für diese Themen zu kaufen.

fricca 09.05.2012 13:22

Zitat:

Zitat von netzwerg (Beitrag 516160)
Das Problem ist nun gelöst, das Menü sieht nun so aus wie gewünscht. Besten Dank für den Hinweis was den Unterschied von Nachfahren- und Kindselektoren betrifft, so genau war mir deren Funktion nicht bekannt - nun habe ich etwas dazu gelernt.

Schön. Jetzt poste bitte noch deine Lösung, damit auch andere etwas davon haben.

Zitat:

Gegen Tipps was richtig gute CSS sowie HTML Bücher betrifft, habe ich nichts einzuwenden...
Das neue »Little Boxes« - als Buch und Videotraining - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
Ich empfehle dir, das komplett durchzuarbeiten. Damit bekommst du eine guten Grundlage.
Dropdown-Menüs wirst du erst relativ weit hinten finden, und das hat einen guten Grund. Um sowas erstellen zu können muss man schon relativ sicher im Umgang mit CSS sein -- von daher ist das kein gutes Vorhaben für den Einstieg.


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

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

© Dirk H. 2003 - 2023