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
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
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
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ä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 & 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
echo '<div class= "content">';
?>
##################################################
Hier der Footer:
##################################################
<?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;">
© 2011 Carpfishing4ever.de
</div>
</div>
</center>
</body>
</html>';
?>
Alles anzeigen
##################################################
Und hier der Style.css
##################################################
<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.