Ergebnis 1 bis 2 von 2

Thema: Darstellungsproblem bei einem DropDown Menü

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

    Ausrufezeichen Darstellungsproblem bei einem DropDown Menü

    Hallo zusammen,

    ich habe ein Problem was ich einfach nicht wegbekomme! Ich bin Betreiber einer Internetseite für virtuellen Motorsport! Um meine Idee zu realisieren benutze ich ein CMS (Webspell). Nun habe ich folgendes Problem. Auf meiner Seite http://neu.simsport.de liegt die werdende Seite. Wenn ich mit der Maus über Überblick fahre bekomme ich Darstellungsfehler. Dieses DropDown Menü ist habe ich von folgender Seite und soll eigentlich ohne Fehler so aussehen: http://designmodo.com/demo/css3dropdownmenu/ .

    Ich finde einfach nicht den Fehler der mein Problem behebt deshalb hoffe ich das ihr mir helfen könnt.

    Hier die Quellcodes:

    Einmal von die komplette Seite: (_Style.css). Diese ist für die komplette Seite zuständig.
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
            background-image:url(style/background.jpg);
            background-repeat:no-repeat;
            background-attachment: fixed;
            background-color:#6af52c;
            margin:0px;
            padding:0px;
    }
    
    #page {
            width:1000px;
            height:auto;
            background-image:url(style/bg_content.png);
            background-repeat:repeat-y;
            margin:auto;
            padding:0px;
    }
    
    .clear {
            clear:both;
    }
    
    .html-title {
            font-family:Tahoma, Geneva, sans-serif;
            font-size:11px;
            text-decoration:none;
            font-weight:bold;
            color:#919191;
            height:29px;
            line-height:29px;
    }
    
    #overline {
            width:1016px;
            height:178px;
    }
    
    
    
    #header {
            width:1000px;
            height:178px;
            background-image:url(style/header.jpg);
            background-repeat:no-repeat;
    }
    
    #login {
            width:485px;
            height:178px;
            padding-left:515px;
            margin-top:-30px;
    }
    
    .login-include {
            width:485px;
            height:25px;
            background-image:url(style/bg_login.jpg);
            background-repeat:no-repeat;
    }
    
    .login-font, .login-font:visited {
            font-family:Tahoma, Geneva, sans-serif;
            font-size:10px;
            color:#b3b3b3;
    }
    
    .login-font:hover {
            font-family:Tahoma, Geneva, sans-serif;
            font-size:10px;
            color:#FFFFFF;
            text-decoration:none;
    }
    
    #lo-1 {
            width:71px;
            height:25px;
            background-image:url(style/login_1.jpg);
            float:left;
    }
    
    #lo-2 {
            width:69px;
            height:25px;
            background-image:url(style/login_2.jpg);
            float:left;
    }
    
    #lo-3 {
            width:77px;
            height:25px;
            background-image:url(style/login_3.jpg);
            float:left;
    }
    
    #lo-4 {
            width:71px;
            height:25px;
            background-image:url(style/login_4.jpg);
            float:left;
    }
    
    #lo-5 {
            width:21px;
            height:25px;
            background-image:url(style/login_5.jpg);
            float:left;
    }
    
    #lo-6 {
            width:35px;
            height:25px;
            float:left;
    }
    
    #lo-7 {
            width:141px;
            height:25px;
            float:left;
    }
    
    #navi {
            position:absolute;
            width:1016px;
            height:48px;
            z-index:10000;
    }
    
    #navi ul {
            list-style:none;
            margin:0px;
            padding:0px;
            border:none;
            height:48px;
    }
    
    #navi ul li {
            list-style:none;
            margin:0px;
            padding:0px;
            border:none;
            float:center;
            height:48px;
    
    }
    
    #spe-top {
            width:1016px;
            height:155px;
    }
    
    #special {
            width:593px;
            height:155px;
            float:left;
            background-image:url(style/bg_special.jpg);
            background-repeat:no-repeat;
            z-index:10;
    }
    
    /* 339ee1 */
    .sliderwrapper2{
            overflow: hidden;
            border: none;
            width: 593px;
            height:auto;
    }
    .sliderwrapper2 .contentdiv{
            visibility: hidden;
            padding: 0px;
            margin:0px;
            overflow:hidden;
            width: 289px;
            height:auto;
    }
    .pagination2{
            width:100%;
            height:auto;
            overflow:hidden;
            padding:0px;
    }
    .pagination2 a, .pagination2 a:visited, .pagination2 a:hover{
            display:block;
            height:80px;
            width:278px;
            text-decoration:none;
            outline:none;
    }
    
    .sliderwrapper{
            position: relative;
            overflow: hidden;
            border: none;
            width: 548px;
            height: 151px;
    }
    .sliderwrapper .contentdiv{
            visibility: hidden;
            position: absolute;
            padding: 0px;
            margin:0px;
            overflow:hidden;
            background-color:transparent;
            width: 545px;
            height: 160px;
    }
    .pagination{
            width:41px;
            background-color: transparent;
            height:auto;
            padding-top:7px;
            overflow:hidden;
            float:left;
            text-align:center;
    }
    .pagination a, .pagination a:visited{
            width:19px;
            height:18px;
            margin:0px 0px 6px 0px;
            padding-left:12px;
            line-height:16px;
            font-weight:bold;
            text-align:center;
            text-decoration:none;
            display:block;
            outline:none;
            color:#FFFFFF;
    }
    .pagination a:hover, .pagination a.selected{
            width:19px;
            height:18px;
            margin:0px 0px 6px 0px;
            padding-left:12px;
            line-height:16px;
            font-weight:bold;
            text-align:center;
            text-decoration:none;
            display:block;
            outline:none;
            color:#FFFFFF;
    }
    
    #topmatch {
            width:409px;
            height:155px;
            float:left;
            background:url(style/topmatch_bg.jpg) no-repeat;
    
    }
    
    #content {
            width:1016px;
            height:auto;
    
    }
    
    
    .bg-headlines {
            background-image:url(style/bg_headlines.jpg);
            width:230px;
            height:198px;
            background-repeat:no-repeat;
            margin:0px;
            padding:0px;
    }
    
    .bg-server {
            background-image:url(style/bg_server.jpg);
            width:230px;
            height:414px;
            background-repeat:no-repeat;
            margin:0px;
            padding:0px;
    }
    
    .topiclink {
            font-family:Verdana, Geneva, sans-serif;
            font-size:10px;
            color:#b3b3b3;
            text-decoration:none;
    }
    
    .topiclink, .topiclink:visited {
            font-family:Verdana, Geneva, sans-serif;
            font-size:10px;
            color:#b3b3b3;
            text-decoration:none;
            overflow:hidden;
    }
    
    .topiclink:hover {
            font-family:Verdana, Geneva, sans-serif;
            font-size:10px;
            color:#FFFFFF;
            text-decoration:none;
            overflow:hidden;
    }
    
    .boardlink, .boardlink:visited {
            font-family:Verdana, Geneva, sans-serif;
            font-size:10px;
            color:#b3b3b3;
            text-decoration:none;
            font-weight:bold;
            overflow:hidden;
    }
    
    .boardlink:hover {
            font-family:Verdana, Geneva, sans-serif;
            font-size:10px;
            color:#FFFFFF;
            text-decoration:none;
            font-weight:bold;
            overflow:hidden;
    }
    
    .headlines, .headlines:visited {
            font-family:Verdana, Geneva, sans-serif;
            font-size:10px;
            color:#b3b3b3;
            text-decoration:none;
            font-weight:bold;
            overflow:hidden;
    }
    
    .headlines:hover {
            font-family:Verdana, Geneva, sans-serif;
            font-size:10px;
            color:#FFFFFF;
            text-decoration:none;
            font-weight:bold;
            overflow:hidden;
    }
    
    .results, .results:visited {
            font-family:Verdana, Geneva, sans-serif;
            font-size:10px;
            color:#b3b3b3;
            text-decoration:none;
            font-weight:bold;
            overflow:hidden;
    }
    
    .results:hover {
            font-family:Verdana, Geneva, sans-serif;
            font-size:10px;
            color:#FFFFFF;
            text-decoration:none;
            font-weight:bold;
            overflow:hidden;
    }
    
    #co-middle {
            width:960px;
            height:auto;
            float:left;
    }
    
    #static {
            width:1016px;
            height:23px;
            background-image:url(style/bg_stats.jpg);
            background-repeat:no-repeat;
    }
    
    #news {
            padding-left:60px;
            padding-right:6px;
    }
    
    #gallery {
            width:542px;
            height:41px;
    }
    
    #gallery-title {
            width:542px;
            height:41px;
            background-image:url(style/gallery_title.jpg);
            background-repeat:no-repeat;
    }

    Das hier ist das Stylesheet was für das Menü zuständig ist. (_menue.css)
    Code:
    .menu,
    .menu ul,
    .menu li,
    .menu a {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
    }
    
    /* Menu */
    .menu {
            height: 40px;
            width: 1000px;
    
            background: #404140;
            background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
            background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
            background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
            background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
            background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
    }
    
    .menu li {
            position: relative;
            list-style: none;
            float: left;
            display: block;
            height: 40px;
    }
    
    /* Links */
    
    .menu li a {
            display: block;
            padding: 0 33px;  /* Wert für Abstand zwischen den Elementen */
            margin: 8px 0;
            line-height: 28px;
            text-decoration: none;
    
            border-left: 1px solid #393942;
            border-right: 1px solid #4f5058;
    
            font-family: Helvetica, Arial, sans-serif;
            font-weight: bold;
            font-size: 13px;
    
            color: #f3f3f3;
            text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    
            -webkit-transition: color .2s ease-in-out;
            -moz-transition: color .2s ease-in-out;
            -o-transition: color .2s ease-in-out;
            -ms-transition: color .2s ease-in-out;
            transition: color .2s ease-in-out;
    }
    
    .menu li:first-child a { border-left: none; }
    .menu li:last-child a{ border-right: none; }
    
    .menu li:hover > a { color: #8fde62; }
    
    /* Sub Menu */
    
    .menu ul {
            position: absolute;
            top: 40px;
            left: 0;
    
            opacity: 0;
    
            background: #1f2024;
    
            -webkit-border-radius: 0 0 5px 5px;
            -moz-border-radius: 0 0 5px 5px;
            border-radius: 0 0 5px 5px;
    
            -webkit-transition: opacity .25s ease .1s;
            -moz-transition: opacity .25s ease .1s;
            -o-transition: opacity .25s ease .1s;
            -ms-transition: opacity .25s ease .1s;
            transition: opacity .25s ease .1s;
            z-index:10000;
    }
    
    .menu li:hover > ul { opacity: 1; }
    
    .menu ul li {
            height:10px;
            overflow: hidden;
            padding: 0;
    
            -webkit-transition: height .25s ease .1s;
            -moz-transition: height .25s ease .1s;
            -o-transition: height .25s ease .1s;
            -ms-transition: height .25s ease .1s;
            transition: height .25s ease .1s;
    }
    
    .menu li:hover > ul li {
            height: 36px;
            overflow: visible;
            padding: 0;
    }
    
    .menu ul li a {
            width: 100px;
            padding: 4px 0 4px 40px;
            margin: 0;
    
            border: none;
            border-bottom: 1px solid #353539;
    }
    
    .menu ul li:last-child a { border: none; }
    
    /* Icons */
    
    .menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
    .menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
    .menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

    Und die index.php wäre evtll auch noch zu gebrauchen:

    Code:
    <?php
    /*
    ##########################################################################
    #                                                                        #
    #           Version 4       /                        /   /               #
    #          -----------__---/__---__------__----__---/---/-               #
    #           | /| /  /___) /   ) (_ `   /   ) /___) /   /                 #
    #          _|/_|/__(___ _(___/_(__)___/___/_(___ _/___/___               #
    #                       Free Content / Management System                 #
    #                                   /                                    #
    #                                                                        #
    #                                                                        #
    #   Copyright 2005-2011 by webspell.org                                  #
    #                                                                        #
    #   visit webSPELL.org, webspell.info to get webSPELL for free           #
    #   - Script runs under the GNU GENERAL PUBLIC LICENSE                   #
    #   - It's NOT allowed to remove this copyright-tag                      #
    #   -- http://www.fsf.org/licensing/licenses/gpl.html                    #
    #                                                                        #
    #   Code based on WebSPELL Clanpackage (Michael Gruber - webspell.at),   #
    #   Far Development by Development Team - webspell.org                   #
    #                                                                        #
    #   visit webspell.org                                                   #
    #                                                                        #
    ##########################################################################
    */
    
    // important data include
    include("_mysql.php");
    include("_settings.php");
    include("_functions.php");
    include("_navigation.php");
    
    $_language->read_module('index');
    $index_language = $_language->module;
    // end important data include
    ?>
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="free webSPELL Clan Template by www.gamer-designs.de" />
    <meta name="author" content="gamer-designs.de" />
    <meta name="keywords" content="webspell, template, clan" />
    
    <!-- Head & Title include -->
    <title><?php echo PAGETITLE; ?> - Template by gamer-designs.de edit by Simsport.de</title>
    <link href="_stylesheet.css" rel="stylesheet" type="text/css" />
    <link href="_style.css" rel="stylesheet" type="text/css" />
    <link href="_menue.css" rel="stylesheet" type="text/css" />
    <link href="tmp/rss.xml" rel="alternate" type="application/rss+xml" title="<?php echo getinput($myclanname); ?> - RSS Feed" />
    <script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
    <script src="js/contentslider.js" language="jscript" type="text/javascript"></script>
    <!-- end Head & Title include -->
    
    </head>
    <body>
    <div id="page">
            <div id="overline">
               <div id="header"></div>
                    <div id="login">
                          <div class="login-include"><?php include("login.php"); ?></div>
                    </div><!--DIV HEADER/LOGIN END-->
    
            </div><!--DIV OVERLINE END-->
            <div id="navi">
            <ul class="menu" z-index:99>
            <li><a href="index.php?site=start">Home</a></li>
            <li><a href="index.php?site=forum">Forum</a></li>
            <li><a href="index.php?site=calendar">Eventkalender</a></li>
            <li><a href="index.php?site=forum">Server</a></li>
            <li><a href="index.php?site=forum">Teamspeak</a></li>
            <li><a href="index.php?site=#">&Uuml;berblick</a>
                   <ul>
                            <li><a href="#">LiveView</a></li>
                            <li><a href="#">HotLaps</a></li>
                            <li><a href="#">Stream</a></li>
                    </ul>
            </li>
            <li><a href="index.php?site=#">Dateien</a></li>
            <li><a href="index.php?site=about">&Uuml;ber Uns</a></li>
            </ul>
    
    
    </div><!--DIV NAVI END-->
            <div id="spe-top">
                    <div id="special">
                    <div id="features_big">
                            <div>
                                            <div id="paginate-slider1" class="pagination" style="padding-left:3px;">
                                <a class="toc" href="#">1</a>
                            <a class="toc" href="#">2</a>
                            <a class="toc" href="#">3</a>
                            <a class="toc" href="#">4</a>
                            <a class="toc" href="#">5</a>
                            <a class="toc" href="#">6</a>
                        </div>
                            <div id="slider1" class="sliderwrapper" style="padding-top:2px;">
                                <?php include("features.php"); ?>
                        </div>
                            <script type="text/javascript">
                                              featuredcontentslider.init({
                                              id: "slider1",  //id of main slider DIV
                                              contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
                                              toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
                                              nextprev: ["", ""],  //labels for "prev" and "next" links. Set to "" to hide.
                                              revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
                                              enablefade: [true, 0.3],  //[true/false, fadedegree]
                                              autorotate: [true, 3000],  //[true/false, pausetime]
                                              onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
                                              //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
                                              //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
                                             }
                                               })
                                      </script>
                                 </div>
    
                      </div>
            </div>
                    <div id="topmatch"><?php include("sc_topmatch.php"); ?></div>
            </div><!--DIV SPE-TOP END-->
    
            <div id="content">
               <div id="co-middle">
                    <div id="static"><?php include("counter.php"); ?></div><!--DIV STATIC END-->
                <div id="news">
                <?php
                                    if(!isset($site)) $site="news";
                                    $invalide = array('\\','/','/\/',':','.');
                                    $site = str_replace($invalide,' ',$site);
                                    if(!file_exists($site.".php")) $site = "news";
                                    include($site.".php");
                            ?>
                </div><!--DIV NEWS END-->
    
            </div><!--DIV CO MIDDLE END-->
             <div><img src="style/footer.jpg" alt="" width="1000" height="123" border="0" usemap="#Map" />
            <map name="Map" id="Map">
                    <area shape="rect" coords="887,11,937,22" href="index.php?site=contact" alt="" />
                    <area shape="rect" coords="951,11,999,22" href="index.php?site=imprint" alt="" />
                    <area shape="rect" coords="406,32,543,44" href="http://www.Gamer-Designs.de" target="_blank" alt="free webSPELL Clantemplates" title="free webspell clantemplates" />
            </map>
            </div><!--DIV FOOTER END-->
    </div><!--DIV PAGE END-->
    </body>
    </html>


    Ich hoffe ihr könnt mir helfen.

    Regards
    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 !!!!!
    Geändert von OutOfControl (03.05.2013 um 16:39 Uhr)

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Darstellungsproblem bei einem DropDown Menü

    Hilfreich alleine ist schon der Link den Du gepostest hast. Dein ganzer Quellcode hier bringt niemandem wirklich etwas, insbesondere letzterer da dieser die für eine Fehldarstellung unerheblicher PHP-Quellcode ist.

    In der HTML-Ausgabe unter deinem Link kann man schonmal ein Problem erkennen. Dort steht:

    HTML-Code:
    <ul class="menu" z-index:99>
    Korrekt wäre

    HTML-Code:
    <ul class="menu" style="z-index:99;">
    Noch besser wäre

    HTML-Code:
    <ul class="menu">
    und die Angabe vom z-index in der CSS-Datei:

    Code:
    .menu { z-index: 99; }
    Die Angabe eines z-index wirkt jedoch nur bei nicht-static positionierten Elementen. Also müsstest Du bei .menu auch noch

    Code:
    position: relative;
    ergänzen.

    Um das Aufklappmenü sauber hinzubekommen, muss das umgebende Element (das <li> des Menüpunktes) relativ positioniert sein, mit einem niedrigen z-index. Das Aufklappmenü (also das <ul> innerhalb des <li>) müsste wiederum absolut positioniert sein und einen höheren z-index haben.

    Beispiele dafür findest Du z.B. hier:
    http://www.ohne-css.gehts-gar.net/0066.php
    http://www.ohne-css.gehts-gar.net/0067.php
    http://www.drweb.de/magazin/das-perf...n-dimensionen/

Ähnliche Themen

  1. Probleme mit Dropdown-Menü
    Von maybebabe im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 27.01.2012, 18:17
  2. dropdown menü
    Von tinocio im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.05.2010, 19:59
  3. css js dropdown menü
    Von st0ny im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 16.10.2007, 18:26
  4. dropdown Menü
    Von wurmax im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 16.11.2006, 21:33
  5. Ausgeben von Ordnern in einem Dropdown menü!
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 11
    Letzter Beitrag: 20.07.2006, 20:30

Stichworte

Berechtigungen

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