Beiträge von Comm

Comm

'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

Comm

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

<!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>

Alles anzeigen

Das wäre die Index.php nun folgt die style.css.

HTML

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; 
}

Alles anzeigen

Comm

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

Beiträge von Comm

Dropdownmenue verliert den Focus

Dropdownmenue verliert den Focus

Dropdownmenue verliert den Focus