Ergebnis 1 bis 9 von 9

Thema: Dropdown Menu - CSS Problem

  1. #1
    HTML Newbie
    Registriert seit
    05.01.2016
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Dropdown Menu - CSS Problem

    Hallo,

    habe schon seit einigen Tagen einen "Grafikfehler" in meinem dropdown menü. Bin relativ neu im Thema programmieren und hoffe das mir jemand weiterhelfen kann ...

    MfG L.

    HTML-Code:
    <!Doctype Html>
    <html>
    <head>


    <link rel="stylesheet" type="text/css" href="style.css">


    <meta charset="utf-8">
    <title>Longboarden</title>


    </head>


    <body>


    <div id="Box">
    </div>


    <nav>

    <ul>
    <li>Home</li>
    <li> <a href = "../ÜberMich/ÜberMich.html"> Über mich </a> </li>
    <li> <a href = "../Tipps/Tipps.html"> Tipps </a>
    <ul>
    <li> <a href = "../Tipps/Kaufempfehlungen.html"> Kaufempfehlungen </a> </li>
    <li> <a href = "../Tipps/Tricks.html"> Tricks </a> </li>
    <li> <a href = "../Tipps/Tests.html"> Tests </a> </li>
    <li> <a href = "../Tipps/Sonstiges.html"> Sonstiges </a> </li>
    </ul>
    </li>
    <li> <a href = "../News/News.html"> News </a> </li>
    <li> <a href = "../Blog/Blog.html"> Blog </a> </li>
    </ul>

    </nav>

    <div id="Bild" style="position:absolute; top:150px; left:725px;">
    <img src="Bild.bmp">
    </div>

    <div id="Text" style="width:600px; height:250px; position:absolute; top: 500px; left:680px;">
    </div>

    </body>
    </html>

    und die css dazu:
    HTML-Code:
    body {
    background:url(background.png);
    }


    nav {
    position:absolute;
    top:40px;
    left:750px;
    }


    nav ul {
    margin:0;
    width:auto;
    float:left;
    box-shadow:0px 0px 32px 0px #111;
    border-radius:10px;
    padding:0;
    border-top:1px solid #222;
    border-bottom:1px solid #222;


    }


    nav ul li {
    position:relative;
    padding:10px;
    float:left;
    list-style:none;
    color:#FFF;
    background:#187F46;
    width:70px;
    text-align:center;
    border-right:1px solid #222;
    }


    nav ul li:hover {
    background:#0EF676;
    }


    nav ul li:last-child {
    border-radius:0 10px 10px 0;
    }


    nav ul li:first-child {
    border-radius:10px 0 0 10px;
    }


    nav ul li:hover ul {
    height:auto; opacity:1;
    }


    nav ul li ul {
    position:absolute;
    top:45px;
    left:0;
    background-color:#222;
    color: #0EF676;
    z-index:2;
    height:0;
    overflow:hidden;
    }
    nav ul li ul li:last-child {
    border-radius:0 0 10px 10px;
    }
    nav ul li ul li {
    width:150px;
    text-align:left;
    }
    nav ul li ul li:first-child {
    border-radius:10px 10px 0 0;
    }


    nav ul li a {
    text-decoration: none ;
    color:white;
    }


    #Box {
    margin-left:auto;
    margin-right:auto;
    background-color:white;
    width:980px;
    height: 1000px;
    box-shadow:0px 0px 32px 0px #111;
    }


    #Text {
    color:#000;
    font-family:Arial,Helvetica;
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Dropdown Menu - CSS Problem

    Hallo

    es wäre schön wenn du dir bei der Fragestellung etwas mehr Mühe geben würdest.

    Setze den Quellcode zunächst in die dafür vorgesehenen Code-Tags. Ab besten ist aber immer ein Link zu der betroffenen Seite. Und ja - es gibt Freeware-Provider wie bplaced.net.

    Auf das Bild haben wir weder Zugriff noch irgendwelche sonstigen Angaben - was sollen wir damit anfangen?

    Und das entscheidende:

    habe schon seit einigen Tagen einen "Grafikfehler" in meinem dropdown menü
    Das ist keine Problembeschreibung mit der wir etwas anfangen können. Zumal grade in HTML und CSS viele Anfänger das ganz normale und vorgesehene Verhalten als Fehler oder Problem ansehen.

    In das Menü sind hover-Effekte eingebaut. Wie soll das Menü sich bei Touchscreens (Smartphones, Tablets und andere) verhalten - die kennen den hover-Effekt ja nicht.

    Gruss

    MrMurphy
    Geändert von MrMurphy (06.01.2016 um 02:35 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    05.01.2016
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Dropdown Menu - CSS Problem

    Hallo,

    setze den Quellcode jetzt nochmal in Code-Tags. Mein genaues Problem ist das unter Tipps und News ein schwarzer Balken zu sehen ist der anscheinend durch das Dropdown Menü entsteht..bekomme es aber einfach nicht hin diesen Balken zu entfernen. Außerdem muss ich die Website nicht online stellen brauche sie nur für mich.

    HTML-Code:
    <!Doctype Html>
    <html>
    <head>
    
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
    
    <meta charset="utf-8">
    <title>Longboarden</title>
    
    
    </head>
    
    
    <body>
    
    
    <div id="Box">
    </div>
    
    
    <nav>
    
    <ul>
    <li>Home</li>
    <li> <a href = "../ÜberMich/ÜberMich.html"> Über mich </a> </li>
    <li> <a href = "../Tipps/Tipps.html"> Tipps </a>
    <ul>
    <li> <a href = "../Tipps/Kaufempfehlungen.html"> Kaufempfehlungen </a> </li>
    <li> <a href = "../Tipps/Tricks.html"> Tricks </a> </li>
    <li> <a href = "../Tipps/Tests.html"> Tests </a> </li>
    <li> <a href = "../Tipps/Sonstiges.html"> Sonstiges </a> </li>
    </ul>
    </li>
    <li> <a href = "../News/News.html"> News </a> </li>
    <li> <a href = "../Blog/Blog.html"> Blog </a> </li>
    </ul>
    
    </nav>
    
    <div id="Bild" style="position:absolute; top:150px; left:725px;">
    <img src="Bild.bmp">
    </div>
    
    <div id="Text" style="width:600px; height:250px; position:absolute; top: 500px; left:680px;">
    </div>
    
    </body>
    </html>
    Und die CSS dazu:

    HTML-Code:
    body {
    background:url(background.png);
    }
    
    
    nav { 
    position:absolute;
    top:40px; 
    left:750px;
    }
    
    
    nav ul { 
    margin:0;
    width:auto; 
    float:left; 
    box-shadow:0px 0px 32px 0px #111;
    border-radius:10px; 
    padding:0; 
    border-top:1px solid #222;
    border-bottom:1px solid #222;
    
    
    }
    
    
    nav ul li { 
    position:relative; 
    padding:10px; 
    float:left; 
    list-style:none; 
    color:#FFF; 
    background:#187F46; 
    width:70px; 
    text-align:center; 
    border-right:1px solid #222; 
    }
    
    
    nav ul li:hover { 
    background:#0EF676;
    }
    
    
    nav ul li:last-child { 
    border-radius:0 10px 10px 0;
    }
    
    
    nav ul li:first-child { 
    border-radius:10px 0 0 10px;
    }
    
    
    nav ul li:hover ul { 
    height:auto; opacity:1;
    }
    
    
    nav ul li ul { 
    position:absolute; 
    top:45px;
    left:0; 
    background-color:#222;
    color: #0EF676;
    z-index:2;
    height:0;
    overflow:hidden; 
    }
    nav ul li ul li:last-child { 
    border-radius:0 0 10px 10px;
    }
    nav ul li ul li { 
    width:150px; 
    text-align:left;
    }
    nav ul li ul li:first-child { 
    border-radius:10px 10px 0 0;
    }
    
    
    nav ul li a { 
    text-decoration: none ; 
    color:white;
    }
    
    
    #Box {
    margin-left:auto;
    margin-right:auto;
    background-color:white;
    width:980px;
    height: 1000px;
    box-shadow:0px 0px 32px 0px #111;
    }
    
    
    #Text { 
    color:#000;
    font-family:Arial,Helvetica;
    }

    Hoffe du/ihr könnt mir jetzt ein bisschen mehr helfen.

    Vielen Dank

    MfG

  4. #4
    Interessierte/r
    Registriert seit
    05.01.2016
    Beiträge
    146
    Danke
    9
    Bekam 11 mal "Danke" in 11 Postings

    Standard AW: Dropdown Menu - CSS Problem

    naja Murphy,
    hover Angaben werden von Phone´s ja nicht ganz ignoriert oder..
    sie werden ja als "(click)" ausgeführt..

    und dann gibt es ja noch die Möglichkeit
    events darauf anders feuern zu lassen..
    zum Beispiel längeres berühren zb. des Elements..
    was natürlich keine gute usability ist..

    ohne Javascript kommt man bei Phones teils nicht weit
    wenn man bestimmtes erreichen will..
    zb scroll to top button
    oder
    eine element id tauschen die bei nochmaligem berühren
    zb eine Navi wieder verschwinden lässt..
    left minus xxpx zb.

    PS. die frage von oben habe ich auch nicht ganz verstanden -
    und wer will schon alles paste´n und auf ne Domain hochladen
    um das Problem zu erkennen u. analysieren..

    @display: none;




    - - - Aktualisiert - - -

    hab nicht alles durchgesehen..
    aber nach erstem </ul>
    kommt ein schließendes </li>
    statt einem dem zweiten öffnenden <ul>
    schau mal obs im Original auch so ist..
    Geändert von modem-kind (06.01.2016 um 03:58 Uhr)

  5. #5
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Dropdown Menu - CSS Problem

    Hallo

    das unter Tipps und News ein schwarzer Balken zu sehen
    Es handelt sich um zwei Balken, die auch keineswegs schwarz sind. Die hast du mittels

    Code:
    nav ul { 
    ...
    border-top:1px solid #222;
    border-bottom:1px solid #222;
    }
    eingebaut. Warum du die allerdings einbaust wenn du sie gar nicht haben willst erschließt sich mir nicht.

    Die Anmerkung von modem-kind

    aber nach erstem </ul>
    kommt ein schließendes </li>
    statt einem dem zweiten öffnenden <ul>
    verstehe ich auch nicht. Das ist der ganz normale Aufbau von verschachtelten Listen.

    Gruss

    MrMurphy
    Geändert von MrMurphy (06.01.2016 um 06:52 Uhr)

  6. #6
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Dropdown Menu - CSS Problem

    Border ist schon ok. Muss aber überschrieben werden.
    Code:
    nav ul li ul {
    position:absolute;
    top:45px;
    left:0;
    background-color:#222;
    color: #0EF676;
    z-index:2;
    height:0;
    overflow:hidden;
    border:none;
    }
    
    
    nav ul li:hover ul {
    height:auto; 
    opacity:1;
    border-top:1px solid #222;
    border-bottom:1px solid #222;
    }
    Hier eine korrigierte Version der Navigation.
    HTML-Code:
    <!Doctype Html>
    <html>
    <head>
    
    
    <meta charset="utf-8">
    <title>Longboarden</title>
    
    <style>
    
    nav {
     margin:30px 100px 0 0;
      float:right;
    }
    
    nav ul {
     box-shadow:0px 0px 15px #111;
     border-radius:10px;
     background:#187F46;
    }
    
    nav ul , nav li {
     margin:0;
     padding:0;
     list-style:none;
     float:left;
    }
    
    nav ul li:first-child,
    nav ul li:first-child strong {
    border-radius:10px 0 0 10px ;
    }
    
    nav ul li:last-child,
    nav ul li:last-child strong {
    border-radius:0 10px 10px 0;
     border-right:none;
    }
    
    nav li {
     float:left;
     position:relative;
     border:1px #222;
     border-style:solid solid none none;
    }
    
    nav a , nav strong {
     display:block;
     padding:10px 25px;
     color:#fff;
     text-decoration:none;
    }
    
    nav  strong {
     background:#0EF676;
     color:#222;
    }
    
    nav li:hover {
     background:#0EF676;
    }
    
    nav li ul {
     position:absolute;
     top:-99999em;
     padding:15px 0 0 0;
     background:none;
     box-shadow:none;
    }
    
    nav li ul:before {
     content:"";
     position:absolute;
     top:15px;
     left:0;
     right:0;
     bottom:0px;
     background:#187F46;
     box-shadow:0 0 10px #111;
     border-radius:10px;
    }
    
    nav li li {
     margin:0;
     padding:0;
     float:none;
     background:#187F46;
     border:none;
    } 
    
    nav li li:first-child, 
    nav li li:hover:first-child  {
    border-radius:10px 10px 0 0; 
    }
    
    nav li li:last-child, 
    nav li li:hover:last-child  {
    border-radius:0 0 10px 10px;
    }
    
    nav li li a {
     padding:10px;
    }
    
    nav li:hover ul {
     top:auto;
    }
    </style>
    </head>
    
    
    <body>
    
    <nav>
    <ul>
    <li><strong>Home</strong></li>
    <li> <a href = "../ÜberMich/ÜberMich.html"> Über mich</a>
    <li> <a href = "../Tipps/Tipps.html"> Tipps </a>
    <ul>
    <li> <a href = "../Tipps/Kaufempfehlungen.html"> Kaufempfehlungen </a> </li>
    <li> <a href = "../Tipps/Tricks.html"> Tricks </a> </li>
    <li> <a href = "../Tipps/Tests.html"> Tests </a> </li>
    <li> <a href = "../Tipps/Sonstiges.html"> Sonstiges </a> </li>
    </ul>
    </li>
    <li> <a href = "../News/News.html"> News </a> </li>
    <li><a href = "../Tipps/blog.html">  Blog </a></li>
    </ul>
    </nav>
    
    </body>
    </html>
    
    Geändert von djheke (06.01.2016 um 11:41 Uhr)

  7. Folgende User finden die Antwort von djheke gut:


  8. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    05.01.2016
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Dropdown Menu - CSS Problem

    Super vielen Dank,

    ich habe jetzt aber noch ein Problem:

    Screenshot_1.jpgScreenshot_2.jpg

    nachdem ich den code:

    HTML-Code:
    nav ul li ul {position:absolute;
    top:45px;
    left:0;
    background-color:#222;
    color: #0EF676;
    z-index:2;
    height:0;
    overflow:hidden;
    border:none;
    }
    
    
    nav ul li:hover ul {
    height:auto; 
    opacity:1;
    border-top:1px solid #222;
    border-bottom:1px solid #222; }
    eingefügt habe war der schwarze Balken zusehen, ohne den Code war das Dropdown von Tipps unter dem Bild.
    Hast du/ihr noch eine Idee wie ich das endgültig beseitigen könnte?

    MfG L.
    Geändert von TheSuddenFlash (06.01.2016 um 18:23 Uhr)

  9. #8
    Interessierte/r
    Registriert seit
    05.01.2016
    Beiträge
    146
    Danke
    9
    Bekam 11 mal "Danke" in 11 Postings

    Standard AW: Dropdown Menu - CSS Problem

    Zitat Zitat von mrmurphy Beitrag anzeigen

    das ist der ganz normale aufbau von verschachtelten listen.

    Mrmurphy
    jo

  10. #9
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Dropdown Menu - CSS Problem

    Warum nimmst du nicht meine korregierte Version. Denn, dass deine navi funktioniert ist nur ein Zufall und dein Border zu verdanken. Nimm dein Border testweise raus und du wirst merken, dass du an die Subnavi nicht ran kommst. Aber mach was du willst.

Ähnliche Themen

  1. Hilfe! Problem mit horizontalem CSS dropdown menu
    Von wollini2001 im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 09.01.2015, 16:15
  2. Dropdown Menu
    Von magic.dave im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.08.2013, 17:51
  3. Problem: Dropdown-Menu gestalten
    Von CooKie_KO im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 15.04.2013, 21:26
  4. DropDown Auswahl Menu
    Von Rönix im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 11.04.2010, 18:17
  5. Dropdown-Menu mit Javascript
    Von visitor im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 16.01.2009, 20:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •