• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Z-Index & Co

M

memento

Neues Mitglied
Kaum ändere ich mal das eine, funktioniert wieder was anderes nicht.
Klappe die 100. bei dieser Seite.


1)
Im Contentbereich soll es im Hintergrund eine weiße transparente Fläche anzeigen. Es hat schon wunderbar funktioniert, leider etwas geändert irgendwo und finde den Fehler nicht, dass es die Fläche wieder anzeigt.
Könnte es da bei den beiden Klassen "container" und "container1" (für Galerie unter Rubrik "Rückschau") Interferenzen geben?
​

2)
Unter der Rubrik "Rückschau" zeigt es mir im Safari seit kurzem den Z-Index beim Hover nicht korrekt an. Im FF funktioniert es problemlos.
Wenn man mit der Maus auf dem Bild ist, soll es in den Vordergrund rücken und einen Schatten werfen.


DANKE EUCH!



:idea: PHP und CSS Code siehe unter diesem Beitrag.
​
 
PHP Code

PHP: 
<?php
    if(isset($_POST['send'])) {
    if($_POST['leer'] == '') {
    mail('[email protected]', 'Neue Website-Anfrage', 'Vorname Nachname: '.$_POST['name']."\r\n".'E-Mail: '.$_POST['email']."\r\n".'Telefon: '.$_POST['telefon']."\r\n".'Nachricht: '.$_POST['message']);
    header("Location: index.php?go=contact&action=thanks");
    }
    }
?>

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  <link rel="shortcut icon" href="images/favicon.ico" />
  <script type="text/javascript">swfobject.registerObject("FlashID");</script>
  <script src="scripts/swfobject_modified.js" type="text/javascript"></script>
  <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>

  <title>Raw Matters - Ein ungeschliffener Performanceabend</title>
  <meta name="description" content="Raw Matters ist ein Projekt von Künstlern für Künstler im Bereich Tanz, Performance und Choreographie."/>
  <meta name="keywords" content="tanz wien, improvisation, choreographie, performance, kunstverein wien,"/>
  <meta name="robots" content="index,follow"/>
  <meta name="revisit-after" content="7 days"/>
  <meta name="language" content="de"/>
  <meta name="zipcode" content="1160"/>
  <meta name="city" content="Wien"/>
  <meta name="state" content="Wien"/>
  <meta name="country" content="AT"/>
  <meta name="author" content="www.rawmatters.at"/>
</head>
    
<?php
    if(!isset($_GET['go'])) {
        $_GET['go'] = 'home';
    }
?>
    
<body>
    <div class="wrapper">
        <div class="navigation">    
            <ul class="menue">
                <li><a href="index.php?go=idee"><img src="images/idee.png" alt="IDEE" /></a></li>
                <li><a href="index.php?go=wir"><img src="images/ueber_uns.png" alt="ÃœBER UNS" /></a></li>
                <li><a href="index.php?go=teilnehmen"><img src="images/teilnehmen.png" alt="TEILNEHMEN" /></a></li>
                <li><a href="index.php?go=rueckschau"><img src="images/rueckschau.png" alt="RÃœCKSCHAU" /></a></li>
                <li><a href="index.php?go=netzwerk"><img src="images/netzwerk.png" alt="NETZWERK" /></a></li>
                <li><a href="index.php?go=contact"><img src="images/kontakt.png" alt="KONTAKT" /></a></li>
            </ul>
        </div>
    <div> 
        <div id="logo_header">
                <a href="index.php"><img src="images/logo_big.png" alt="raw matters logo"/></a>
        </div>
        <iframe id="fb"
            src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FKunst-und-Kulturverein-Raw-Matters%2F216313485072611&amp;send=false&amp;layout=button_count&amp;width=150&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" >
        </iframe>
    </div>
        <div class="container"> 
            <div class="content">
                    <?php include($_GET['go'].'.php'); ?>
            </div>
            <div class="content_bg"></div>
        </div>
        <div id="footer">
                <a href="index.php?go=impressum">IMPRESSUM</a>  |  <a href="index.php?go=contact">KONTAKT</a>
        </div>
    </div>
        <div id="wrapper_hero">
            <div class="wrapper_flash">    
                <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1100" height="1097" >
                        <param name="wmode" value="transparent" />
                        <param name="movie" value="fla/wurzel.swf" />
                        <param name="quality" value="high" />
                        <param name="swfversion" value="6.0.65.0" />
                        <!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie dieses Tag. -->
                        <param name="expressinstall" value="scripts/expressInstall.swf" />
                        <!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
                        <!--[if !IE]>-->
                        <object data="fla/wurzel.swf" type="application/x-shockwave-flash" width="1100" height="1097">
                        <!--<![endif]-->
                        <param name="quality" value="high" />
                        <param name="wmode" value="transparent" />
                        <param name="swfversion" value="6.0.65.0" />
                        <param name="expressinstall" value="scripts/expressInstall.swf" />
                        <!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
                        <div>
                            <h4>Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
                            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
                        </div>
                        <!--[if !IE]>-->
                        </object>
                        <!--<![endif]-->
                </object>
            </div>
        </div>
    </body>
</html>
 
Css

Code: 
@charset "utf-8";

body { font-family: Verdana, Geneva ; color: #404040; font-size: 0.75em; line-height: 1.5em; margin: 0px; }

p { padding: 0 0 15px 0; }
a { color: #e00079; text-decoration: none;  }
a:visited { text-decoration: none; }
a img { border: none;}
li { list-style-type: none;}

table { border: none; }
td { font-family: Verdana, Geneva, sans-serif; width: 160px; }
th { font-family: Verdana, Geneva, sans-serif; }

h1 { font-family: Verdana, Geneva, sans-serif; /* font-size: 1.6em; */ font-size: 1.1em; text-align: left; line-height: 1.05em; }
h2 { font-family: Verdana, Geneva, sans-serif; /* font-size: 1.3em; */ font-size: 1.1em; padding: 0 0 15px 0; }
h3 { font-family: Verdana, Geneva, sans-serif; /* font-size: 1.2em; */ font-size: 1.1em; }
h4 { font-family: Verdana, Geneva, sans-serif; /* font-size: 1.3em; */ font-size: 1.1em; padding: 15px 0 0 0; color: #e00079; }

.small { font-family: Verdana, Geneva, sans-serif; /* font-size: 0.75em; */ font-size: 0.73em; line-height: 1.25em; }
.pink { font-family: Verdana, Geneva, sans-serif; color: #e00079;  font-weight: bold; }
.pink_std { font-family: Verdana, Geneva, sans-serif; /* font-size: 0.95em;ont-size: 0.8em; */ color: #e00079;  }
 
/* Schrift ENDE */


#wrapper_hero {
    overflow: hidden;
}

.wrapper {
    width: 750px;
    margin: 0px auto;
    top: 0;
    min-height: 100%; 
    z-index: 99;
}

.wrapper_flash {
    position: fixed;
    width: 100%;
    min-width: 1100px;
    top: 0px;
    z-index: -2;
    padding: 0 0 0 440px;
}

#logo_header {
    padding: 120px 0 25px 0;
}

#fb {
    float: left;
    padding: 20px 0 0 0;
}

.container {
    position: relative;
}

.content {
    position: relative;
    width: 585px;
    margin: 8px 0 25px 0;
    float: right;
    z-index: 2;
    text-align: justify;
}

.content_bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: red;
    z-index: 1;
    /* These three lines are for transparency in all browsers. */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha (opacity=75);
    opacity: 0.75;
}

.artikelbild {
    margin: 0 0 20px 25px;
    border: solid 0.1em #999;     
}

.linie {
    border-bottom: 0.95em solid #e00079;
}

#FlashID {
    position: absolute;
    z-index: -2;
    top: 0;
    right: 0;
}

#footer {
    clear: both;
    text-align: right;
    padding: 20px 0 20px 0;
    color: #e00079;
    font-size: 0.73em;
}


/* NAVIGATION */

ul.menue { display: inline; } /* Breite muss noch angepasst werden */
ul.menue  li { background: #e00079 ; color: #FFF ; float: left ; list-style-type: none ; text-align: center ;  font-size: 0.9em; }
ul.menue  li a { color: #FFF ; text-decoration: none ; display: block ; width: 125px ; height: 25px ; line-height: 25px ; font-weight: bold ; }  /* Breite und Höhe eines Menüpunktes */
ul.menue  li:hover a { border-bottom: 7px solid #e00079 ; } /* Ausbuchtung unten */


/* GALERIE */

.container1 {
    position: relative;
    width: 585px;
    float: left;
    padding: 0 0 50px 0;
}

ul.gallery li a {
    float: left;
    padding: 15px 15px 40px 15px;
    background: #FFF;
    border: 1px solid #828181;    
}

ul.gallery li a.pic-1 {
    z-index: 5;
    -ms-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
}

ul.gallery li a.pic-2 {
    z-index: 3;
    transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
}

ul.gallery li a.pic-3 {
    z-index: 4;
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
}

ul.gallery li a.pic-4 {
    z-index: 7;
    transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
}

ul.gallery li a.pic-5 {
    z-index: 6;
    transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -o-transform: rotate(6deg);
}

ul.gallery li a.pic-6 {
    z-index: 8;
    width: 200px;
    height: 150px;
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

ul.gallery li a:hover {
    z-index: 100;
    -moz-box-shadow: 3px 5px 15px #333;
    box-shadow: 3px 5px 15px #333;
}


/* KONTAKTFORMULAR */

input { 
    width: 250px;
    height: 20px;
    margin: 0 0 5px 0;
}

textarea {
    min-width: 250px;
    height: 50px;
    max-width: 600px;
}

.leer {
    visibility: hidden;
    max-height: 10px;
}

.absenden input {
    height: 30px;
    width: 256px;
}
 
Zuletzt bearbeitet:
Der Link zur Seite reicht völlig, da man dort CSS und HTML sehen kann. Den PHP-Code braucht man für Untersuchungen an Styles überhaupt nicht.

Bei deiner Seite sehe ich im Content-Bereich einen weißen Hintergrund. Hast Du das schon korrigiert? Ansonsten wundern mich solche Angaben wie bei ".content_bg", wo Du scheinbar mit left und top etwas ausrichten möchtest, aber kein "position" verwendest. Wenn Du das machen würdest, wäre dieses Element jedoch falsch eingesetzt. Ich würde es entfernen, da es momentan ja auch keinen Sinn hat.
 
@ threadi

Der komplette Background ist weiß, das stimmt.
Aber wenn jemand eine andere Browsergröße hat, kann es passieren, dass die Flash teilweise in den Lesebereich rutscht.

Like this: contentbereich_semitransparent.jpg
Der grüne Rahmen markiert hier den gemeinten Contentbereich.

Die weiße semitransparente Fläche hinter dem Text ist zur Sicherheit der Leserlichkeit.
Derzeit habe ich sie im CSS in red geändert bis es wieder funktioniert und die Fläche anzeigt.

Ich hab jetzt position dazugegeben. Bei absolute breitet es sich über die komplette Seite aus, bei relative nicht sichtbar. :sad:
 
Du probierst wahllose CSS-Eigenschaften aus ohne zu wissen wofür sie da sind und wie sie wirken.

Du brauchst dieses Hilfselement eigentlich gar nicht. Gib die Hintergrundfarbe für den Content in .content oder .container an. Dadurch wird bereits alle farblich hinterlegt was in diesem Bereich liegt.
 

Lieber Threadi,

mittlerweile probier' ich tatsächlich alles halb verzweifelt durch, weil es bereits 1A funktioniert hat und ich das Element nicht finde mit dem es jetzt interferiert.
Ich wäre nicht hier angemeldet und würde fragen, wenn ich schon der CSS Checker wäre und alle Zusammenhänge verstehen würde (...)

Ohne dem Hifselement? Wenn ich die Hintergrundfarbe (inklusive Transparenz!) nicht in einem separaten <div> angebe, wirkt die Transparenz auch auf den Content.


UPDATE / PROBLEME NACH HALBER EWIGKEIT GELÖST

ad 1)
memento schrieb:
Könnte es da bei den beiden Klassen "container" und "container1" (für Galerie unter Rubrik "Rückschau") Interferenzen geben?
​
Zum Vergrößern anklicken....

Das Problem lag - wie vermutet - hier.
Jedoch wusste ich erst jetzt wie ich es ändern muss.

ad 2)
Safari brauchte die Zusatzdefinition position: relative; um den z-index richtig anzuzeigen.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben