zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit einem Drop Down Menü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.05.2012, 11:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2012
Beiträge: 3
netzwerg befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.05.2012, 11:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.05.2012, 12:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2012
Beiträge: 3
netzwerg befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 09.05.2012, 12:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von netzwerg Beitrag anzeigen
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.

Geändert von fricca (09.05.2012 um 12:55 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 09.05.2012, 13:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2012
Beiträge: 3
netzwerg befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 09.05.2012, 13:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von netzwerg Beitrag anzeigen
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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Drop down Menü bleibt aktiv nach zurück mit back button vom Firefox gombi CSS 0 18.01.2010 16:34
CSS Drop Down Menü gachet CSS 9 08.11.2009 19:36
CSS: Menü, IE 6 und Drop down Probleme HaraldMenza (X)HTML 14 09.10.2007 10:01
Fehler mit Drop Down Menü bei Überschreitung der Container Grenzen! webfabrik CSS 4 16.01.2007 02:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:43 Uhr.