Ergebnis 1 bis 5 von 5

Thema: Dropdownmenue verliert den Focus

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

    Standard Dropdownmenue verliert den Focus

    Hallo Zusammen

    Mein DropdownMenu sitzt bei mir in einem Header div und darunter liegt der Content div, das Menu schiebt sich aber andauernd unter das Content div. Wie kann ich das abstellen?

    Gruß Jörg
    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
    Bandit
    Gast

    Standard AW: Dropdownmenue verliert den Focus

    Keine Ahnung, wie du das abstellen kannst, denn mit den Infos kann dir keiner helfen. Ein Link zur Seite wäre sehr hilfreich.

  3. #3
    HTML Newbie
    Themenstarter

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

    Standard AW: Dropdownmenue verliert den Focus

    Danke für das Feedback

    Leider steht die Seite auf meinem Nas-Server der von außen nicht zu erreichen ist. aber ich kann die Scripte mal posten.

    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 content="de" http-equiv="Content-Language" />
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
            <title>Startseite</title>        
            <link rel="stylesheet" href="css/datepicker.css" type="text/css" />
            <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
            <link rel="stylesheet" href="css/style.css" type="text/css" />
            <link rel="stylesheet" href="css/tabelle.css" type="text/css" />
        </head>
        <body>
        <div class="content">
        <div id="menu">
            <ul>
                <li><a href="#"><img src="images_neu/32/home_32.png">Home</a></li>
                <li><a href="#"><img src="images_neu/32/statistic_32.png">Statistic</a>
                    <ul>
                        <h3>Statistickategorien</h3>
                        <a href="#"><li>Produktion</li></a>
                        <a href="#"><li>Projekte</li></a>
                        <a href="#"><li>Mitarbeiter</li></a>
                        <a href="#"><li>Lieferungen</li></a>
                        <a href="#"><li class="all">Alle Tags anzeigen &rarr;</li></a>
                    </ul>
                </li>
                <li><a href="#"><img src="images_neu/32/zeitplanung_32.png">Planung</a>
                    <ul>
                        <h3>Planungskategorien</h3>
                        <a href="#"><li>Projekte</li></a>
                        <a href="#"><li>Technik</li></a>
                        <a href="#"><li>Web</li></a>
                        <a href="#"><li>Webdesign</li></a>
                        <a href="#"><li class="all">Alle Kategorien anzeigen &rarr;</li></a>
                    </ul>
                </li>
                <li><a href="#"><img src="images_neu/32/projekt_32.png">Projekte</a>
                    <ul>
                        <h3>Projektkategorien</h3>
                        <a href="#"><li>Kunden</li></a>
                        <a href="#"><li>Produkte</li></a>
                        <a href="#"><li class="all">Alle Tags anzeigen &rarr;</li></a>
                    </ul>
                </li>
                <li><a href="#"><img src="images_neu/32/produktion_32.png">Produktion</a>
                    <ul>
                        <h3>Produktionskategorien</h3>
                        <a href="#"><li>Lieferanten</li></a>
                        <a href="#"><li>Material</li></a>
                        <a href="#"><li>Aufwände</li></a>
                        <a href="#"><li>Lieferungen</li></a>
                        <a href="#"><li class="all">Alle Tags anzeigen &rarr;</li></a>
                    </ul>
                </li>
                <li><a href="#"><img src="images_neu/32/mitarbeiter_32.png">Mitarbeiter</a>
                    <ul>
                        <h3>Mitarbeiterkategorien</h3>
                        <a href="#"><li>Mitarbeiter</li></a>
                        <a href="#"><li>Gruppen</li></a>
                        <a href="#"><li>Internet</li></a>
                        <a href="#"><li>WordPress</li></a>
                        <a href="#"><li class="all">Alle Tags anzeigen &rarr;</li></a>
                    </ul>
                </li>
                <li><a href="#"><img src="images_neu/32/question_32.png">Hilfe</a></li>
            </ul>
        </div>
        </div>
        <div class="content">
        <div class="oben"><h2>Home</h2></div>
        <div class="zu_oben">
        <div class="links_oben">Links Oben<br />Hier steht ein Text, eine Statistik, ein Formular oder eine Tabellle</div>
        <div class="rechts_oben">Rechts Oben<br />Hier steht ein Text, eine Statistik, ein Formular oder eine Tabellle</div>
        </div>
        <div class="zu_unten">
        <div class="links_unten">Links Unten<br />Hier steht ein Text, eine Statistik, ein Formular oder eine Tabellle</div>
        <div class="rechts_unten">Rechts Unten<br />Hier steht ein Text, eine Statistik, ein Formular oder eine Tabellle</div>
        </div>
        <div class="unten">Unten<br />Hier steht ein Text, eine Statistik, ein Formular oder eine Tabellle</div>
        </div>
        </body>
    <html>
    Das wäre die Index.php nun folgt die style.css.


    HTML-Code:
    body {
        font                    : 12px Arial, Helvetica, sans-serif;
    }
    #menu {
        width: 1100px;
        margin: 10px 10px;
    }
    #menu h3 {
        font-size: 16px;
        color: #FFFFFF;
        padding: 10px;
        margin: 0;
        background: #000;
        line-height: 20px;
    }
    #menu ul {
        position: relative;
        margin: 0 auto;
        list-style: none;
    }
    #menu ul li {
        float: left;
        margin: 0 0 0 20px;
        font-size: 20px;
        font-family: 'Bree Serif', serif;
        line-height: 50px;
    }
    #menu ul li a {
        color: #000000;
        text-decoration: none;    
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }
    #menu ul li a:hover {
        color: #999999;
    }
    #menu ul li img {
        float: left;
        width: 32px;
        height: 32px;
        margin: 7px 2px;
        padding: 3px;
        background: #99999999;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }
    #menu ul li:hover img {
        background: #000000;
    }
    #menu ul ul {
        position: absolute;
        top: -9999px;
        background: #FFFFFF;
        padding: 0;
        margin: 0 0 0 -5px;
        -webkit-box-shadow: 0 10px 20px #888;
        -moz-box-shadow: 0 10px 20px #888;
        box-shadow: 0 10px 20px #888;
    }
    #menu ul ul:before {
        position: absolute;
        content:"";
        width: 10px;
        height: 10px;
        top: -5px;
        left: 20px;
        background: #000000;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    #menu ul li:hover ul {
        top: 55px;
    }
    #menu ul ul li {
        float: none;
        font-size: 16px;
        padding: 5px 10px;
        text-align: left;
        text-transform: uppercase;
        margin: 0;
        border-bottom: 1px solid #DDDDDD;
        line-height: 20px;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }
    #menu ul ul a {
        color: #333333;
        text-decoration: none;
    }
    #menu ul ul li.all {
        font-size: 12px;
        border-bottom: none;
        text-transform: none;
    }
    #menu ul ul li:hover {
        background: #333;
        color: #FFFFFF;
    }
    div.content {
        background-color        : #DEEBF7;
        border                  : 1px solid #06421C;
        margin                  : 10px;
        padding                 : 10px;
    }
    div.oben {
        width                   : 98%;
        margin                  : 1%;
    }
    div.zu_oben {
        clear                   : both;
        margin                  : 0;
    }
    div.links_oben {
        width                   : 47%;
        margin                  : 1%;
        position                : relative;
        float                   : left;
    }
    div.rechts_oben {
        width                   : 47%;
        margin                  : 1%;
        position                : relative;
        float                   : right;
    }
    div.zu_unten {
        clear                   : both;
    }
    div.links_unten {
        width                   : 47%;
        margin                  : 1%; 
        position                : relative;
        float                   : left;
    }
    div.rechts_unten {
        width                   : 47%;
        margin                  : 1%;
        position                : relative;
        float                   : right;
    }
    div.unten { 
        width                   : 98%;
        margin                  : 1%;
        clear                   : both;
    }
    div.fuss { 
        width                   : 98%;
        margin                  : 1%;
    }
    ul.liste_cat1 {
        color                   : #FFFFFF;
        margin-left             : 25px;
        font-size               : 14px;
    }
    ul.liste_cat2 {
        color                   : #FFFFFF;
        margin-left             : 55px;
        font-size               : 12px;
    }
     /* Formular Style */
    form{
        margin                  : 0;
        padding                 : 5px;
        background              : #95B6D8;
    }
    fieldset.tabelle{
        margin                  : 0;
        padding                 : 5px;
        background              : #95B6D8;
    }
    fieldset.formular{
        margin                  : 10px;
        padding                 : 10px; 
        border                  : 1px solid #FFFFFF; 
        -moz-border-radius      : 15px; 
        border-radius           : 15px;
    }
    legend{
        color                   : #3C527D;
        margin-left             : 60px;
        padding                 : 10px 0 15px 0; 
        font-size               : 14px;
    }
    p.form {
        margin                  : 5px;
        padding                 : 0;
        
    }
    label.klein{
        margin-top              : 0px;
        padding-bottom          : 0;
        margin-left             : 15px;
        text-align              : right;
        color                   : #FFFFFF;
    }
    label.gross{
        margin-top              : 3px;
        padding-bottom          : 0px;
        display                 : block;
        width                   : 180px;
        text-align              : right;
        color                   : #FFFFFF;    
        float                   : left;
    }
    input{
        clear                   : both;
        color                   : #333333;
        border                  : 1px solid #FFFFFF; 
        -moz-border-radius      : 5px;
        border-radius           : 5px;
        margin-left             : 10px;
    }
    select{
        clear                   : both;
        color                   : #333333;
        border                  : 1px solid #FFFFFF; 
        -moz-border-radius      : 5px;
        border-radius           : 5px;
        margin-left             : 10px;
    }
    
    input:hover {
        clear                   : both;
        color                   : #333333;
        border                  : 1px solid #FF0000;
        background              : #FFFF66;
        -moz-border-radius      : 5px;
        border-radius           : 5px;
        margin-left             : 10px;
    }
    select:hover {
        clear                   : both;
        color                   : #333333;
        border                  : 1px solid #FF0000;
        background              : #FFFF66;
        -moz-border-radius      : 5px;
        border-radius           : 5px;
        margin-left             : 10px;
    }
    input:focus {
        clear                   : both;
        color                   : #333333;
        border                  : 1px solid #FF0000;
        background              : #FFFF66;
        -moz-border-radius      : 5px;
        border-radius           : 5px;
        margin-left             : 10px;
    }
    select:focus {
        clear                   : both;
        color                   : #333333;
        border                  : 1px solid #FF0000;
        background              : #FFFF66;
        -moz-border-radius      : 5px;
        border-radius           : 5px;
        margin-left             : 10px;
    }
    textarea {
        clear                   : both;
        color                   : #333333;
        border                  : 1px solid #FFFFFF;
        -moz-border-radius      : 5px;
        border-radius           : 5px;
        margin                  : 5px;
    }
    textarea:hover {
        clear                   : both;
        color                   : #333333;
        border                  : 1px solid #FF0000; 
        background              : #FFFF66;
        -moz-border-radius      : 5px;
        border-radius           : 5px;
        margin                  : 5px;
    }
    input.text{
        margin                  : 0 0 10px 3px;
        padding                 : 0;
        border                  : 0;
        border-bottom           : 1px solid #333333;
        background              : #C5D6F8;
    }
    input.submit{
        font-size               : 12px;
        margin                  : 10px;
        padding                 : 5px;
        border                  : 0;
        background              : #C5D6F8;
        font-weight             : bold;
        border                  : 1px solid #FFFFFF;
    }
    input.submit:hover{
        font-size               : 12px;
        margin                  : 10px;
        padding                 : 5px;
        border                  : 0;
        background              : #FFFF66;
        font-weight             : bold;
        border                  : 1px solid #FF0000;
    }
    table#ueber {
        background-color        : #FFEDA0;
        border-collapse         : collapse;
        border                  : none;
    }
    h1 {
        font-size               : 20px;
        color                   : #08519C;
    }
    h2 {
        font-size               : 17px;
        color                   : #08519C;
    }
    h3 {
        font-size               : 14px;
        color                   : #08519C;
    }
    tabel.liste {
        border                  : 1px solid #FFFFFF;
    }
    thead.liste {
        background-color        : #2171B5;
        color                   : #FFFFFF;
    }
    tfoot.liste {
        background-color        : #9ECAE1;
        font-size               : 10px;
        border-top              : 1px solid #999999;
    }
    tbody.liste{
        background-color        : #DEEBF7;
    }
    thead.liste th {
        text-align              : left;
        font-size               : 14px;
        padding                 : 2px 5px 2px 5px;
    }
    tbody.liste td {
        color                   : #000000;
        padding                 : 0 5px 0 5px;
    }
    tbody.liste tr:hover {
        background-color        : #FFFF66;
        color                   : #FFFFFF;
    }
    .abut a:hover { 
        width                   : 137px; 
        height                  : 35px; 
        background              : url(images/button_sp_h.png) no-repeat; 
    }

  4. #4
    Bandit
    Gast

    Standard AW: Dropdownmenue verliert den Focus

    Sorry, aber damit kann man sich das nicht ansehen, denn es fehlen die Bilder und damit sieht das alles schon wieder anders aus. Nutze zur Not einen Freehoster, damit wir uns das ansehen können

    Einen Tipp kann ich dir aber geben: nutze einen HTML-Validator, z.B. http://validator.w3.org/ Du hast reichlich Fehler im Quellcode
    Geändert von Bandit (17.01.2015 um 22:28 Uhr)

  5. #5
    HTML Newbie
    Themenstarter

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

    Standard AW: Dropdownmenue verliert den Focus

    'Gelöst'

    Danke für die tatkräftige Unterstützung

    des Rätzels lösung ist in den DIVs des Content zu finden

    lass ich die ' position: relative; ' weg ( löschen ) hat das menü die gewünschte Funktion.

    Gruß Jörg

Ähnliche Themen

  1. JS Dropdownmenue mit Bild(Button)
    Von randyorton im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 01.06.2010, 17:12
  2. Waschmaschine verliert Wasser!
    Von hayflower im Forum Off Topic und Quasselbox
    Antworten: 2
    Letzter Beitrag: 06.11.2009, 22:59
  3. Session verliert seine Werte
    Von martinfre im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 08.08.2008, 14:30
  4. Erkennen wenn ein Fenster den Focus verliert
    Von darktweaker im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 19.04.2006, 14:29
  5. CSS - Seite verliert immer mehr Klassen!
    Von Incognito im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 15.08.2005, 16:06

Stichworte

Berechtigungen

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