Ergebnis 1 bis 5 von 5

Thema: Css hover - finde den Fehler nicht

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

    Blinzeln Css hover - finde den Fehler nicht

    Hallo ich bin dabei ein schönes meü zu zaubern, aber das "hover" und die Verlinkung funktionieren nicht.:/
    Habe folgenden HTMl Code:
    HTML-Code:
    <div id='cssmenu'>
    <ul>
       <li class='active'><a href='index.html'><span>Über uns</span></a></li>
       <li class='has-sub'><a href='#'><span>Wände</span></a>
          
       </li>
       <li><a href='www.google.de'><span>Decken</span></a></li>
       <li><a href='#'><span>Referenz</span></a></li>
       <li><a href='#'><span>Kontakt</span></a></li>
       <li class='last'><a href='#'><span>Impressum</span></a></li>
    </ul>
    </div>
    Und den dazugehörigen CSS Code:
    Code:
    #cssmenu ul,
    #cssmenu li,
    #cssmenu span,
    #cssmenu a {
      margin: 0;
      padding: 0;
      position: relative;
    }
    #cssmenu {
      height: 49px;
      border-radius: 5px 5px 0 0;
      -moz-border-radius: 5px 5px 0 0;
      -webkit-border-radius: 5px 5px 0 0;
      background: #141414;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
      background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
      background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
      background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
      background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
      background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
      border-bottom: 2px solid #0fa1e0;
      width: auto;
    }
    #cssmenu:after,
    #cssmenu ul:after {
      content: '';
      display: block;
      clear: both;
    }
    #cssmenu a {
      background: #141414;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
      background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
      background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
      background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
      background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
      background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
      color: #ffffff;
      display: inline-block;
      font-family: Helvetica, Arial, Verdana, sans-serif;
      font-size: 12px;
      line-height: 49px;
      padding: 0 20px;
      text-decoration: none;
    }
    #cssmenu ul {
      list-style: none;
    }
    #cssmenu > ul {
      float: left;
    }
    #cssmenu > ul > li {
      float: left;
    }
    #cssmenu > ul > li > a {
      color: #ffffff;
      font-size: 12px;
    }
    #cssmenu > ul > li:hover:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      left: 50%;
      bottom: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #0fa1e0;
      margin-left: -10px;
    }
    #cssmenu > ul > li:first-child > a {
      border-radius: 5px 0 0 0;
      -moz-border-radius: 5px 0 0 0;
      -webkit-border-radius: 5px 0 0 0;
    }
    #cssmenu > ul > li:last-child > a {
      border-radius: 0 5px 0 0;
      -moz-border-radius: 0 5px 0 0;
      -webkit-border-radius: 0 5px 0 0;
    }
    #cssmenu > ul > li.active > a {
      box-shadow: inset 0 0 3px #000000;
      -moz-box-shadow: inset 0 0 3px #000000;
      -webkit-box-shadow: inset 0 0 3px #000000;
      background: #070707;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
      background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
      background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
      background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
      background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
      background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
    }
    #cssmenu > ul > li:hover > a {
      background: #070707;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
      background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
      background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
      background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
      background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
      background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
      box-shadow: inset 0 0 3px #000000;
      -moz-box-shadow: inset 0 0 3px #000000;
      -webkit-box-shadow: inset 0 0 3px #000000;
    }
    #cssmenu .has-sub {
      z-index: 1;
    }
    #cssmenu .has-sub:hover > ul {
      display: block;
    }
    #cssmenu .has-sub ul {
      display: none;
      position: absolute;
      width: 200px;
      top: 100%;
      left: 0;
    }
    #cssmenu .has-sub ul li {
      *margin-bottom: -1px;
    }
    #cssmenu .has-sub ul li a {
      background: #0fa1e0;
      border-bottom: 1px dotted #31b7f1;
      filter: none;
      font-size: 11px;
      display: block;
      line-height: 120%;
      padding: 10px;
      color: #ffffff;
    }
    #cssmenu .has-sub ul li:hover a {
      background: #0c7fb0;
    }
    #cssmenu .has-sub .has-sub:hover > ul {
      display: block;
    }
    #cssmenu .has-sub .has-sub ul {
      display: none;
      position: absolute;
      left: 100%;
      top: 0;
    }
    #cssmenu .has-sub .has-sub ul li a {
      background: #0c7fb0;
      border-bottom: 1px dotted #31b7f1;
    }
    #cssmenu .has-sub .has-sub ul li a:hover {
      background: #0a6d98;
    }
    Warum funzt das nicht, kann mir bitte jemand helfen?
    Danke!
    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
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Css hover - finde den Fehler nicht

    Was soll das sein?

    HTML-Code:
    <li><a href='www.google.de'><span>Decken</span></a></li>
    Href braucht eine URL wenn eine Domain ausserhalb des eigenen Webspace angesprochen werden soll. Und die beginnt mit http://

    des weiteren ist das span-Element überflüssig, welchen Nutzen soll man daraus ziehen?

    Deine verschachtelte Liste ist falsch im HTML-Teil, bitte hier nachlesen wie man es richtig macht: http://wiki.selfhtml.org/wiki/HTML/T...ukturierung/ul


    Eddit: Zudem zauberst du dir kein Menü sondern hast es kopiert. Lesen und verstehen, wäre besser gewesen.
    Geändert von explanator (12.08.2013 um 12:55 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    02.08.2013
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Css hover - finde den Fehler nicht

    Hey Danke für den Tipp.
    Ist schon etwas Zauberei, wenn ich mit der Maus klicke und schwupps ist der Code da ~~~> Magic

  4. #4
    Interessierte/r Avatar von Friedel
    Registriert seit
    18.09.2008
    Ort
    Weingarten/Pfalz
    Beiträge
    102
    Danke
    1
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Css hover - finde den Fehler nicht

    @stuggi4ever: Ich bin neugierig! Für welchen Tipp bedankst du dich?

    @explanator: Dass der Google-Link falsch ist, ist klar, aber alle anderen sind imho völlig OK. Und was stört dich an der Liste? Warum schreibst du, sie sei verschachtelt? Ich sehe im Quellcode keine verschachtelte Liste, sondern eine ganz normale Liste mit 6 li-Elementen. Fehler sehe ich keine. Dass die span-Elemente unnötig sind, sehe ich auch so. Aber falsch sind sie nicht und zu einer falschen Darstellung sollten sie nicht führen.


    @stuggi4ever:
    Code:
    #cssmenu > ul > li.active > a
    Ich gehe davon aus, dass der Punkt vor active ein Doppelpunkt sein soll. Allerdings benutzt du eine ganze Menge merkwürdiger CSS-Identifier, deren Sinn mir nicht klar ist.

  5. #5
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Css hover - finde den Fehler nicht

    Genau Friedel, wenn du es ausprobiert hättest so wie ich es getan habe, dann wäre es klarer geworden, weil man dann sieht was passiert oder was eben nicht passiert.
    Stellt man dann aber die Liste um in eine verschachtelte um, dann geht es. Am CSS ändert man währendessen gar nichts.
    Und die anderen Links habe ich ja auch gar nicht bemängelt, oder habe ich das- ne, habe ich nicht.

Ähnliche Themen

  1. finde die fehler nicht... in c
    Von Unregistriert im Forum Forum für alle anderen Programmiersprachen
    Antworten: 16
    Letzter Beitrag: 21.07.2011, 18:51
  2. Finde den Fehler nicht
    Von ebuT im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 21.11.2010, 14:18
  3. finde den fehler nicht !
    Von webcoolcity im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 9
    Letzter Beitrag: 02.06.2009, 22:03
  4. finde Fehler nicht
    Von Halloween im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 12.11.2006, 14:08
  5. finde den fehler nicht
    Von rosielsama im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 16.09.2006, 14:01

Stichworte

Berechtigungen

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