Ergebnis 1 bis 6 von 6

Thema: Schwierigkeiten mit z-index

  1. #1
    Azubi(ne) Avatar von [C]arp[h]unter
    Registriert seit
    10.03.2011
    Ort
    Franken :)
    Beiträge
    97
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Schwierigkeiten mit z-index

    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-Code:
    <?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();


    ?>
    ##################################################

    Hier der Head:
    ##################################################
    PHP-Code:
    <?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>'
    ;
    ?>
    ##################################################


    Hier der header:

    ##################################################
    PHP-Code:
    <?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>
            '
    ;
        
    ?>
    ##################################################
    Hier der content:
    ##################################################
    PHP-Code:
    <?php

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

    Hier der Footer:

    ##################################################
    PHP-Code:
    <?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>'
    ;


    ?>
    ##################################################

    Und hier der Style.css

    ##################################################
    PHP-Code:
    <style type"text/css">

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

    a.navi        {
            
    text-aligncenter;
            
    margin-right:    9px;
            
    margin-left:    9px;
            
    text-decorationnone;
            
    color:    #FFFFFF;
                
    }
                
    a.navi:hover    {
            
    color:    #FFFFFF;
            
    text-decoration:    underline;
                    }
                    
    #nav, #nav ul {
        
    padding0;
        
    margin0;
        list-
    stylenone;
        
    font-family:    Comic Sans MSz-index2;

    }

    #nav a {
        
    displayblock;
        
    width8em;
        
    color:    #FFFFFF;
        
    text-decoration:    none;
        
    font-family:    Comic Sans MS;
        
    margin-bottom:    8pxz-index2;
    }

    #nav a:hover    {
        
    color:    #000000;
        
    text-decoration:    none;
        
    font-family:    Comic Sans MS;
        
    background-color:    #FFFFFF;
        
    text-align:    centerz-index2;
    }

    #navi a:hover    {
        
    color:    #000000;
        
    text-decoration:    underline;
        
    font-family:    Comic Sans MS;
        
    background-color:    #FFFFFF; z-index: 2;
    }            
    #nav li {
        
    floatleft;
        
    width8em;
        
    margin-left:    5px;
        
    margin-right:    5pxz-index2;
    }

    #nav li ul {
        
    positionabsolute;
        
    width8em;
        
    left: -999emz-index2;
    }

    #nav li:hover ul {
        
    leftauto;
        
    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.5emz-index2;
    }                

    #nav li:hover ul, #nav li.sfhover ul {
        
    leftautoz-index2;
    }

    #nav li ul ul {
        
    margin-top:    5pxz-index2;    
    }

    #nav, #nav ul {
        
    padding0px;
        
    margin0px;
        list-
    stylenone
        
    line-height1z-index2;
    }
        
    #nav li ul ul {
        
    margin: -1em 0 0 10emz-index2;
    }

    #nav, #nav ul {
        
    padding0;
        
    margin0;
        list-
    stylenone
        
    line-height1z-index2;
    }

    #nav li:hover ul ul, #nav li.sfhover ul ul {
        
    left: -999emz-index2;
    }

    li.sfhover ul leftautoz-index2; }):


    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
        
    leftautoz-index2;

    }

    #nav li:hover ul, #nav li.sfhover ul {
        
    leftauto;  z-index2;
    }


    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
        
    left: -999emmargin-top:    -30pxmargin-left136pxz-index2;
    }

    #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 {
        
    leftauto;  background-color#000000; color: #FFFFFF; z-index: 2;
    }

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


    .
    content    {
            
    border-style:    solid;
            
    border-color:    #a3a3a3;
            
    border-width:    5px;
            
    border-radius:    2em;
            -
    webkit-border-radius2em;
            
    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
    ##################################################

    Das Hintergrundbild kann ich euch leider nicht geben, weil ich nicht der Urheber bin und diese Page nur für einen Wettbewerb gedacht ist.
    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 !!!!!
    Wer ist dieser LAN und warum macht er so viele Parties?
    Internet, gibt's den Scheiß immer noch?
    Warum passieren mir nur Sachen, die sonst nur dummen Leuten passieren? :: NEIN!

  2. #2
    Unregistriert
    Gast

    Standard AW: Schwierigkeiten mit z-index

    Auweia:
    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:
    echo '<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />';
    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.

  3. #3
    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: Schwierigkeiten mit z-index

    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.

  4. #4
    Azubi(ne)
    Themenstarter
    Avatar von [C]arp[h]unter
    Registriert seit
    10.03.2011
    Ort
    Franken :)
    Beiträge
    97
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Schwierigkeiten mit z-index

    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
    Wer ist dieser LAN und warum macht er so viele Parties?
    Internet, gibt's den Scheiß immer noch?
    Warum passieren mir nur Sachen, die sonst nur dummen Leuten passieren? :: NEIN!

  5. #5
    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: Schwierigkeiten mit z-index

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

  6. #6
    Azubi(ne)
    Themenstarter
    Avatar von [C]arp[h]unter
    Registriert seit
    10.03.2011
    Ort
    Franken :)
    Beiträge
    97
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Schwierigkeiten mit z-index

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

    Mfg [C]arp[h]unter
    Wer ist dieser LAN und warum macht er so viele Parties?
    Internet, gibt's den Scheiß immer noch?
    Warum passieren mir nur Sachen, die sonst nur dummen Leuten passieren? :: NEIN!

Ähnliche Themen

  1. Antworten: 12
    Letzter Beitrag: 19.11.2010, 01:03
  2. index.php vor index.html interpretieren. Mit Plesk Zugriff auf /conf/ genehmigen?
    Von mikonos im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 02.03.2010, 12:54
  3. Schwierigkeiten bei der Browseroptimierung
    Von Machmoud im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 05.08.2009, 19:21
  4. Pop Up macht schwierigkeiten
    Von BloodyMary im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 22.12.2005, 10:19
  5. Browser - schwierigkeiten
    Von XFame im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 29.01.2004, 19:04

Stichworte

Berechtigungen

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