Ergebnis 1 bis 4 von 4

Thema: jQuery Multi Level CSS Menu #2 nicht zentriert und falsche darstellung

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

    Standard jQuery Multi Level CSS Menu #2 nicht zentriert und falsche darstellung

    ich bin absoluter neuling. hier im forum und auch was html und css angeht. aber step by step habe ich eine kleine seite erstellt.

    nun gibts aber ein problem beim einbinden des jQuery Multi Level CSS Menu #2´s.

    das menü ist weder zentriert, noch werden die drop-downlisten richtig angezeigt. mit einem abstand, der nicht sein sollte und unterhalb des grafik-sliders.

    ich weiss nicht mehr weiter. vielleicht kann sich einer der profis erbarmen und mir weiterhelfen: www.abenteuerthailand.de
    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: jQuery Multi Level CSS Menu #2 nicht zentriert und falsche darstellung

    Baue alles was mit Javascript zu tun hat wieder aus. Das brauchst du nicht. Wenn jemand ohne Javascript unterwegs ist, dann kann er das Menü nicht benutzen.
    Google kann Javascript Links nicht folgen und du verschenkst dir die Chance auf Besucher.

    Menü in reinem CSS erstellen.
    Slider ausbauen, erstens lenkt er ab und zweitens zeigt er nur den Himmel von deinen Bildern. So gross ist dein Bild tatsächlich, von dem man nur den Himmel sieht -> http://www.abenteuerthailand.de/images/flexslider04.jpg
    Des weiteren verschenkst du Platz, bis man endlich an die wichtigen Informationen kommt muss man runterscrollen, dass nervt.

    Ich weiss das Slider extrem Hipp sind, aber leider werden sie auch von vielen Leuten als Werbung wahrgenommen, wie Tests gezeigt haben, mache lieber eine Schöne Fotogalerie wo man sich die Bilder im Vollbildmodus ansehen kann, das bringt wesentlich mehr.

    Ansonsten finde ich den Ansatz schon mal gelungen. Klar und deutlich, keine verspielten Farben, aufs Wesentliche reduziert, passt(bis auf den Slider)

  3. Folgende User finden die Antwort von explanator gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    04.11.2013
    Beiträge
    2
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jQuery Multi Level CSS Menu #2 nicht zentriert und falsche darstellung

    danke erstmal hierfür. die bilder in dem slider müssen noch angepasst werden. der slider ist sowieso nur für die startseite gedacht - auf den folgeseiten wird noch schlichter gearbeitet

    aber zurück zum menü. ich habe das javascript gelöscht. jetzt besteht aber ein weiteres problem: er zeigt die arrows, sprich die pfeile (nach unten und nach rechts) die ein drop-down anzeigen sollen, nicht mehr an. rein prinzipiell zeigt er jetzt gar kein drop-down-menü mehr an ...

    muss ich da zusätzlich in dem .css-sheet etwas ändern? oder ist das mit den pfeilen einfach so ein "effekt", der nur mit javascript erzielt werden kann?
    dieses javascript-menü gibt es übrigens hier: http://www.dynamicdrive.com/style/cs...el_css_menu_2/

    html:
    HTML-Code:
    <div align="center" style="width:900px; height:60px; margin:auto; margin-bottom:10px">
                      <div id="myslidemenu" class="jqueryslidemenu">
                      <ul>
                            <li><a href="index.html">Home</a>
                            </li>
                            <li><a href="suedthailand.html" title="Von Koh Samui bis Phuket">Südthailand</a>
                              <ul>
                                    <li><a href="thailand-wetter.htm">Koh Samui</a>
                    <ul>
                        <li><a href="#">Sehenswürdigkeiten</a></li>
                        <li><a href="#">Strände</a></li>
                        <li><a href="#">Hotels & Resorts</a></li>
                    </ul>
    css-code:
    Code:
    .jqueryslidemenu{
    font: bold 12px Verdana;
    background: #414141;
    width: 100%;
    }
    
    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    
    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    background: #414141; /*background of tabs (default state)*/
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #2d2b2b;
    text-decoration: none;
    }
    
    * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    }
    
    .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: white;
    }
    
    .jqueryslidemenu ul li a:hover{
    background: black; /*tab link background during hover state*/
    color: white;
    }
    
    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none;
    }
    
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul{
    top: 0;
    }
    
    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 180px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    }
    
    .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
    background: #eff9ff;
    color: black;
    }
    
    /* ######### CSS classes applied to down and right arrow images  ######### */
    
    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    }
    
    .rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
    }

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

    Standard AW: jQuery Multi Level CSS Menu #2 nicht zentriert und falsche darstellung

    Habe eine Vorlage von mir genommen und die mal für dich angepasst.

    Musst du nur noch bei dir einbauen.

    HTML-Code:
    <!DOCTYPE HTML>
    <html lang="de">
      <head>
      <meta charset="UTF-8">
      <title></title>
      <style>
    /* ungeordnete Liste */
    .menu {
        margin-left:50%;
    }
    .menu ul{
        list-style-type: none;             /* Listenpunkte entfernen */
        padding: 0;                        /* Innenabstände entfernen */
        margin: 0;                         /* Aussenabstände entfernen */
        font-family: verdana, sans-serif;  /* Schrift setzen, wenn gewünscht */
        margin-left: -50%;
    }
    /* Listenelemente */
    .menu li{
        float: left;                /* Alle nach Links schieben */
        position: relative;         /* relativ positionieren für das Untermenü */
        z-index: 100;               /* Über andere Elemente erscheinen lassen */
    }
    
    /* Links in Listenelementen */
    .menu a, .menu:visited {
        display: block;             /* Als Blockelement formatieren */
        font-size: .9em;            /* Schriftgrösse bestimmen */
        min-width: 8em;                 /* Breite vorgeben */
        padding: 5px 10px 5px 10px;       /* Innenabstand Rand zur Schrift oben, rechts, unten, links */
        color: white;               /* Schriftfarbe */
        background: black;          /* Hintergrundfarbe */
        text-decoration: none;      /* Unterstrich bei Links entfernen */
        margin-right: 1px;          /* Abstand zum nächten Menüpunkt festlegen */
        text-align: center;         /* Schrift zentrieren */
        line-height: 1.5em;         /* Zeilenhöhe setzen, falls abweichend */
    }
    /* Mauszeiger über Links*/
    .menu a:hover{
        color: yellow;               /* Schriftfarbe ändern */
    }
    
    /* Untermenüpunkte */
    .menu ul ul {
        position: absolute;          /* absolut positionieren */
        min-width: 8em;                  /* Breite festlegen */
        left: -9999px;   
                    /* aus sichtbaren Bereich schieben */ 
    }
    /* Mauszeiger über Links im Untermenü */
    .menu ul li:hover ul,
    .menu ul a:hover ul{
        left: 61px;                    /* Untermenü einblenden */
        top: 1.9em;
    }
    .menu ul li a.sub:after {     /* Der Pfeil nach unten zeigend */
        display: inline-block;
        content:" ";
        width: 0px; 
        height: 0px; 
        border-left: 5px solid transparent; 
        border-right: 5px solid transparent; 
        border-top: 6px solid white; 
        margin-left: 10px;
    }
    </style>
    
      </head>
      <body>
      <div style="width:900px; height:60px; margin:0 auto; margin-bottom:10px">
          <div class="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a class="sub" href="suedthailand.html" title="Von Koh Samui bis Phuket">Südthailand</a>
                    <ul>
                        <li><a href="thailand-wetter.htm">Koh Samui</a></li>
                    </ul>
                <li><a href="#">Sehenswürdigkeiten</a></li>
                <li><a href="#">Strände</a></li>
                <li><a href="#">Hotels & Resorts</a></li>
            </ul>
        </div>
      </body>
    </html>
    

Ähnliche Themen

  1. Falsche Darstellung
    Von Billbos im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 24.08.2008, 03:30
  2. Falsche Darstellung der DIVs bei IE
    Von LingLing im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 23.05.2007, 22:46
  3. falsche Darstellung im IE 7
    Von Flasher im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 01.12.2006, 13:17
  4. Falsche Darstellung in IE
    Von fantik im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 30.06.2006, 09:46
  5. Jscript zur Darstellung von linearem Menu in ein Baum Menu
    Von stud3 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 28.11.2004, 09:55

Stichworte

Berechtigungen

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