Noch nicht viel geschrieben
Hallo liebes PSD Forum.
Ich bastele mir grade meine Portfolio Webpage. Dort möchte ich meine Navigation als Backgrund Image angeben und dann per list Div's die Links zu den verschiedenen Seiten. So weit so gut. Bei mir funktioniert dort dann aber nicht die z-index Befehl um die Navi unter ein Div zu packen.
Kennt jemand die Lösung für dieses Peoblem!?
Css Datei:
und anschauen:
Ich bastele mir grade meine Portfolio Webpage. Dort möchte ich meine Navigation als Backgrund Image angeben und dann per list Div's die Links zu den verschiedenen Seiten. So weit so gut. Bei mir funktioniert dort dann aber nicht die z-index Befehl um die Navi unter ein Div zu packen.
Kennt jemand die Lösung für dieses Peoblem!?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="index" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="DC.title" content="Wigand Alpers" />
<meta name="DC.creator" content="..." />
<meta name="DC.subject" content="Radiosprecherseite" />
<meta name="DC.description" content="Webseite des Sprechers Wigand Alpers" />
<meta name="DC.publisher" content=".." />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="formate.css" />
<title>Milandesign</title>
</head>
<body>
<div id="hintergrund">
<div id="oben">
<div id="bild"><img src="logos/logo.png" title="Logo" width="400px" height="400px" alt="Logo" /></div><!-- logo //-->
<div id="schriftzug">
<div id="navi">
<ul id="navi">
<li id="home"><a href="index.php">Home</a></li>
<li id="button2"><a href="#">Button 2</a></li>
<li id="button3"><a href="#">Button 3</a></li>
<li id="button4"><a href="#">Button 4</a></li>
</ul>
</div><!-- navi //-->
</div><!-- schriftzug //-->
</div><!-- oben //-->
<div id="inhalt">
blindtext
</div><!-- inhalt //-->
</div><!-- hintergrund //-->
</body>
</html>
Code:
body { background-color: #7a7a7a;background-image: url(bilder/parkett.png); color: #000000; font-family: Arial, Helvetica, sans-serif; margin: 0px; padding: 0px;
font-size: 12px;}
IMG { border: 0 none; }
h1 { font-size: 20px; padding: 0; font-weight: bold; line-height: 20px; color: #000000;}
h2 { font-size: 18px; padding: 10px 0 0 0; text-align: left; font-weight: bold; line-height: 18px; color: #000000;}
h3 { font-size: 18px; padding: 10px 0 0 0; text-align: right; font-weight: bold; line-height: 18px; color: #000000;}
.kursiv { font-size: 13px; padding: 3px 0 0 0; text-align: left; font-weight: normal;
font-style: italic; line-height: 15pt; width: 380px; color: #000000;}
.fett { font-size: 13px; padding: 3px 0 0 0; text-align: center; font-weight: bold;
font-style: normal; line-height: 15pt; width: 380px; color: #000000;}
li { list-style-type: disc; }
table {
width: 100%;
empty-cells: hide;
border: 0px;
}
#hintergrund {
margin: 0 auto;
position: relative;
margin-top: 0px;
width: 1000px;
height: 750px;
color: #000000;
padding: 0;
}
#oben {
width: 1000px;
height: 250px;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
float: right;
}
#bild {
width: 194px;
height: 143px;
position: relative;
float: left;
margin: 0 auto;
margin-top: 10px;
color:#cc6633;
z-index: 4;
}
#schriftzug {
margin-top: 0px;
margin: 0 auto;
background-image:url(logos/mappe.png);
width: 586px;
position: relative;
height: 295px;
float: right;
z-index: 4;
}
#navi{
margin-top: 70px;
margin-left: 5px;
position: relative;
background-image: url(logos/menue.png);
list-style: none;
width: 360px;
height: 275px;
z-index: 2;
}
#navi li a{
position: relative;
text-indent: -9999px;
display: block;
text-decoration: none;
width: 53px;
height: 68px;
z-index: 2;
}
#home a{
top: 70px;
left: 20px;
border:4px solid red;
z-index: 2;
}
#button2 a{
top: 132px;
left: 145px;
border:4px solid red;
z-index: 2;
}
#button3 a{
top:35px;
left:220px;
border:4px solid blue;
z-index: 2;
}
#button4 a{
top:90px;
left:250px;
border:4px solid yellow;
z-index: 2;
}
#inhalt {
float: right;
background-image: url(logos/inhalt.png);
background-repeat: no-repeat;
overflow: auto;
position: relative;
width: 980px;
height: 760px;
margin: 0 auto;
margin-top: 0px;
left: 70px;
padding: 10px 10px 10px 10px;
font-size: 10pt;
text-align: left;
line-height: 15pt;
z-index: 2;
}
#inhalt ul { list-style-type: disc;}
#inhalt table { border-collapse: collapse; }
#inhalt a:link { color: #cc6633; text-decoration: none; }
#inhalt a:visited { color: #cc6633; text-decoration: none; }
#inhalt a:hover { color: #939393; text-decoration: underline; }
#inhalt a:active { color: #838383; text-decoration: none; }
.bildlinks { float: left; padding: 1px; margin: 10px 10px 10px 0; padding: 2px; border: groove #000000 1px;}
.bildrechts { float: right; padding: 1px; margin: 10px 0 10px 10px; padding: 2px; border: groove #000000 1px}
Zuletzt bearbeitet:
