Schwierigkeiten mit z-index

[C]arp[h]unter

Hallo

Ich wollte auf meiner Homepage einen Z- Index einbauen.

Dafür habe ich alle Elemente auch schön mit Positon:Absolute versehen und z-index hingeschrieben

Nur leider geht des net

Ich weiß leider nicht woran es liegt

MfG [C]arp[h]unter

Hier ist der Index.php:

##################################################

PHP

<?php
error_reporting(E_ALL);
define('SCRIPT', 'hallo');




//Alle von PHP gesetzten Backslashes entfernen
if((function_exists('get_magic_quotes_gpc') AND get_magic_quotes_gpc()) OR
   (ini_get('magic_quotes_sybase') AND (strtolower(ini_get('magic_quotes_sybase'))!="off"))){

   array_stripslashes($_GET);
   array_stripslashes($_POST);
}


//stripslashes auch in Arrays ausfuehren...
function array_stripslashes(&$var){
   if(is_string($var)) {
      $var=stripslashes($var);
   } elseif(is_array($var)) {
      foreach($var AS $key => $wert) {
         array_stripslashes($var[$key]);
      }
   }
}








##require 'include/mysql_login.php'; //Definiert die Zugangsdaten zur MySQL-Datenbank
##mysql_connect(MYSQL_ADDR, MYSQL_USER, MYSQL_PASS);
##mysql_select_db(MYSQL_DATABASE);




require 'include/head.php';
require 'include/header.php';
echo '<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />';
require 'include/content.php';
require 'include/inhalt.php';
echo '</div>';
require 'include/footer.php';










echo '</body></html>';


##mysql_close();




?>

Alles anzeigen

##################################################

Hier der Head:
##################################################

PHP

<?php
if(!defined('SCRIPT')) {
   die('Hacking-Versuch!');
}


echo '<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" ><meta name="description" content="" Fiedler"><meta name="Keywords" content=""><meta http-equiv="imagetoolbar" content="false">
<link rel="stylesheet" href="style.css" type="text/css">
<style type= "text/css">
.header    {
        border-style:    solid;
        border-color:    #a3a3a3;
        border-width:    5px;
        -webkit-border-top-right-radius: 4em;
        -webkit-border-top-left-radius: 4em;
        -webkit-border-bottom-right-radius:    0em;
        -webkit-border-bottom-left-radius:    0em;

        border-top-right-radius: 10em;
        border-top-left-radius: 10em;
        border-bottom-left-radius:    1em;
        border-bottom-right-radius: 1em;
        box-shadow:    5px 5px 5px #000;
        width:    60%;
        height:    200px;
        background-color:    #000000;
        margin-top:    10px;
        margin-bottom:    30px;
        color:    #00bbaa;
        font-family:    Comic Sans MS;
        padding:    20px;
        text-align:    center;
        opacity:    0.8;
        position:    absolute;
        margin-left:    18%;
        z-index:    1;
}
</style>
<script language= "JavaScript/text">
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>


<script language="JavaScript" type="text/javascript">
<!--
function einblenden(div) {
with(document.getElementById(div).style){
if(display=="none"){
display="inline";
}
else{
display="none";
}
}
}
//-->
</script>




<script type="text/javascript" src="include/highslide/highslide/highslide-with-gallery2.js"></script>
<script type="text/javascript" src="include/highslide/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="include/highslide/highslide/highslide.css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />




<title>
**************
</title>';
?>

Alles anzeigen

##################################################

Hier der header:

##################################################

PHP

<?php
    echo     '</head>


<body>
        <center>
        <div class= "header">
                <h1>*************************</h1>

                <br /><br /><br /><br />    


            <ul id= "nav" style= "margin-left: 3%;">
                <li><a href="?section=home">Home</a></li>
                <li><a href="?section=montagen">******</a>
                    <ul style= "background-image:    url(include/verlauf_small.jpg); opacity: 0.8;">
                        <li><a href= "?section=nurmontagen">********</a>
                            <ul style= "background-image:    url(include/verlauf_small.jpg); opacity: 0.8;">
                            <li><a href= "?section=montagen&action=inline">*****</a></li>
                            <li><a href= "?section=montagen&action=festblei">*********</a></li>
                            <li><a href= "?section=montagen&action=heli">********</a></li>
                            </ul>
                        </li>

                        <li><a href= "?section=nurrigz">*******</a>
                            <ul style= "background-image:    url(include/verlauf.jpg); opacity: 0.8;">
                                <li><a href= "?section=montagen&action=maggot_clip_rig">******</a></li>
                                <li><a href= "?section=montagen&action=combi_rig">*************</a></li>
                                <li><a href= "?section=montagen&action=blowback_rig">********</a></li>
                                <li><a href= "?section=montagen&action=d_rig">D- Rig</a></li>
                                <li><a href= "?section=montagen&action=pop_up_rig">Pop Up Rig</a></li>
                                <li><a href= "?section=montagen&action=stiff_bottom_bait">Stiff Bottom Bait</a></li>
                                <li><a href= "?section=montagen&action=multi_rig">****** **</a></li>
                                <li><a href= "?section=montagen&action=kd">KD- Rig</a></li>
                                <li><a href= "?section=montagen&action=bottom_bait_rig">Bottom Bait Rig</a></li>
                                <li><a href= "?section=montagen&action=chod_rig">Chod- Rig</a></li>
                            </ul>
                        </li>
                        <li><a href= "?section=nurtipps">Tipps</a></li>
                    </ul>
                </li>

                <li><a href="?section=bilder">Bildergalerie</a></li>
                <li><a href="?section=gaestebuch">G&auml;stebuch</a></li>
                <li><a href="?section=partner">Partner</a>
                    <ul style= "background-image:    url(include/verlauf_small.jpg); opacity: 0.8;">
                        <li><a href= "http://www.power-fishing.de" target= "_blank">Power-fishing</a></li>
                        <li><a href= "http://www.dts-design.eu" target= "_blank">DTS-design</a></li>
                    </ul>
                </li>

                <li><a href="?section=verwaltung">Verwaltung &amp; Fun</a>
                    <ul style= "background-image:    url(include/verlauf.jpg); opacity: 0.8;">
                        <li><a href="?section=verwaltung&action=umfragen">Umfragen</a>
                            <ul style= "background-image:    url(include/verlauf_small.jpg); opacity: 0.8;">
                                <li><a href= "?section=verwaltung&action=umfragen&li=favrigz">Lieblingsrigz</a></li>
                                <li><a href= "?section=verwaltung&action=umfragen&li=hp">Bewerte die HP</a></li>

                            </ul>
                        </li>

                        <li><a href="#">Registrieren</a></li>


                        <li><a href="#">Benutzerprofil</a></li>

                        <li><a target= "_blank" href="http://www.carpfishing.bplaced.net/filemanager/homepage_php/forum/">Forum</a></li>

                        <li><a href="#">Team</a>
                            <ul style= "background-image:    url(include/verlauf_small.jpg); opacity: 0.8;">
                                    <li style= ""><a href="#">Ich</a></li>
                                    <li style= ""><a href="#">Du</a></li>
                                    <li style= ""><a href="#">Er</a></li>
                            </ul>
                        </li>        
                        <li><a href="#">Login</a></li>        
                    </ul>
                </li>
            </ul>    
        </div>
        ';

?>

Alles anzeigen

##################################################
Hier der content:
##################################################

PHP

<?php


echo '<div class= "content">';
?>

##################################################

Hier der Footer:

##################################################

PHP

<?php
echo '</div>';
echo '<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />';
echo '<div class= "footer">
            <a href= "include/impressum.php" target= "blank" class= "navi" style= "font-size: 15px;" onClick="einblenden("impressum"); return false;">Impressum</a>|
            <a href= "?section=home&action=termsofuse" target= "_blank" class= "navi" style= "font-size: 15px;">Nutzungsbedingungen</a>|
            <a href= "?section=home&action=disclaimer" class= "navi" style= "font-size: 15px;" target= "_blank">Disclaimer</a>|
            <a href= "include/kontakt_text.php" target= "_blank" class= "navi" style= "font-size: 15px;">Kontakt</a>|
            <a href= "#top" class= "navi" style= "font-size: 15px;">Nach oben</a>
            <br />
            <br />
            <br />
            <div style= "font-size:    13px;">
                &copy; 2011 Carpfishing4ever.de
            </div>


        </div>
    </center>
</body>


</html>';




?>

Alles anzeigen

##################################################

Und hier der Style.css

##################################################

PHP

<style type= "text/css">


.navi        {
        text-align:    center;
        font-size:    18px;
        color:    #00bbaa;
        margin-bottom:    10px;
            }


a.navi        {
        text-align: center;
        margin-right:    9px;
        margin-left:    9px;
        text-decoration: none;
        color:    #FFFFFF;
            }

a.navi:hover    {
        color:    #FFFFFF;
        text-decoration:    underline;
                }

#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-family:    Comic Sans MS; z-index: 2;


}


#nav a {
    display: block;
    width: 8em;
    color:    #FFFFFF;
    text-decoration:    none;
    font-family:    Comic Sans MS;
    margin-bottom:    8px; z-index: 2;
}


#nav a:hover    {
    color:    #000000;
    text-decoration:    none;
    font-family:    Comic Sans MS;
    background-color:    #FFFFFF;
    text-align:    center; z-index: 2;
}


#navi a:hover    {
    color:    #000000;
    text-decoration:    underline;
    font-family:    Comic Sans MS;
    background-color:    #FFFFFF; z-index: 2;
}            
#nav li {
    float: left;
    width: 8em;
    margin-left:    5px;
    margin-right:    5px; z-index: 2;
}


#nav li ul {
    position: absolute;
    width: 8em;
    left: -999em; z-index: 2;
}


#nav li:hover ul {
    left: auto;
    color:    #000000;
    margin-top:    1px;
    border-style:    solid;
    border-color:    #333333;
    border-radius:    1em;
    background-color:    #FFFFFF;
    border-width:    0.1em;
    padding:    7px;
    width:    8.5em; z-index: 2;
}                


#nav li:hover ul, #nav li.sfhover ul {
    left: auto; z-index: 2;
}


#nav li ul ul {
    margin-top:    5px; z-index: 2;    
}


#nav, #nav ul {
    padding: 0px;
    margin: 0px;
    list-style: none; 
    line-height: 1; z-index: 2;
}

#nav li ul ul {
    margin: -1em 0 0 10em; z-index: 2;
}


#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none; 
    line-height: 1; z-index: 2;
}


#nav li:hover ul ul, #nav li.sfhover ul ul {
    left: -999em; z-index: 2;
}


li.sfhover ul { left: auto; z-index: 2; }):




#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
    left: auto; z-index: 2;


}


#nav li:hover ul, #nav li.sfhover ul {
    left: auto;  z-index: 2;
}




#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em; margin-top:    -30px; margin-left: 136px; z-index: 2;
}


#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;  background-color: #000000; color: #FFFFFF; z-index: 2;
}


body    {
        background-image:    url('korda-background.jpg');
                            background-repeat: no-repeat;
        background-color:    #555556;
}




.content    {
        border-style:    solid;
        border-color:    #a3a3a3;
        border-width:    5px;
        border-radius:    2em;
        -webkit-border-radius: 2em;
        background-color:    #000000;
        width:    60%;
        color:    #00bbaa;
        font-family:    Comic Sans MS;
        padding:    20px;
        text-align:    left;
        margin-bottom:    30px;
        box-shadow:    5px 5px 5px #000;
        opacity:    0.8;
        position:    absolute;
        margin-left:    18%;
        top:    280px;
        z-index:    1;
}


.footer        {
        border-style:    solid;
        border-color:    #a3a3a3;
        border-width:    5px;
        border-bottom-right-radius:    10em;
        border-bottom-left-radius:    10em;        
        border-top-right-radius:    1em;
        border-top-left-radius:    1em;
        background-color:    #000000;
        width:    60%;
        padding-left:    20px;
        padding-right:    20px;
        padding-top:    10px;
        padding-bottom:    5px;
        color:    #00bbaa;
        font-family:    Comic Sans MS;
        box-shadow:    5px 5px 5px #000;
        opacity:    0.8;
        position:    absolute;
        margin-left:    18%;
        z-index:    1;
}

</style>

Alles anzeigen

##################################################

Das Hintergrundbild kann ich euch leider nicht geben, weil ich nicht der Urheber bin und diese Page nur für einen Wettbewerb gedacht ist.

Unregistriert

Auweia:

Zitat

echo '<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Wenn mich nicht alles täuscht, ist dir doch schon mehrfach gesagt worden, dass du die Grundlagen lernen sollst. Dazu gehört auch das Grundgerüst einer HTML-Datei! Siehe http://de.selfhtml.org/html/allgemein/grundgeruest.htm
Nochmal auweia:

Zitat

echo ' ';

Was soll denn sowas? Wozu nutzt du CSS? Damit du wieder so einen Käse einbaust?

Und poste immer einen Link zu Seite, damit man sich das Problem auch ansehen kann.

threadi

Abgesehen davon macht es keinen Sinn "z-index nutzen zu wollen". z-index ebenso wie absolute Positionierung sollte man nicht für die gesamte Webseite anwenden. Wenn dann höchstens für Einzelfälle, wenn es mal nicht anders geht.

[C]arp[h]unter

Okay, danke.

Allerdings glaube ich, dass ich mich falsch ausgedrückt habe.

Ich möchte gerne Das Menü im Vordergrund ÜBER dem Content haben.

MfG [C]arp[h]unter

threadi

Dann entferne wie gesagt die absolute Positionierung bei allen Elementen außer dem Menü.

[C]arp[h]unter

Sorry, das funktioniert ja auch nicht. Habe ich ja auch schon probiert und dann erst mit position gearbeitet.

Mfg [C]arp[h]unter

Schwierigkeiten mit z-index

Tags

Benutzer online in diesem Thema