Moin,
wer kann einem Anfänger bei einer Problemstellung etwas unter die Arme greifen ?
Fragestellung:
Wenn ich mehrere Ebenen nebeneinander platziere, hab ich oftmals das Problem, dass manch Ebenen sich verschieben.
Beispiel:
Ich habe eine Ebene (rechts oben) für ein Logo erstellt - geht!
Im Anschluss habe ich direkt fünf kleinere Ebenen nebeneinander platziert und darin einzelne Grafiken platziert um ein Navigationsmenü zu bauen. - geht auch! Witzigerweise ist mir hier schon aufgefallen, dass der Wert " Top:" immer unterschiedlich ist obwohl die einzelnen Ebenen für das Navigationsmenü doch auf gleicher Höhe liegen. Folglich müsste der Wert „Top“ hier für die einzelnen Grafiken (Navigationsmenü) doch gleich sein da diese optisch auf gleicher Höhe liegen, sind sie jedoch nicht!
Zum eigentlichen Problem:
Erstelle ich jetzt eine weitere Ebene (zB mit Text oder einer Grafik) , hab ich oftmals das Problem, dass diese neue Ebene z.B. andere Ebenen (Navigationsmenü) verdrängt. Hier muss ich dann mühselig die verdrängten Ebenen wieder ausrichten, bis die Platzierung stimmt. Nehm ich jedoch die neuerstelle Ebene dann wieder weg, werden die restlichen Ebenen (nicht alle Ebenen) wieder verdrängt, bzw. letztere müssen wieder neu angepasst werden in der Platzierung. Verstehen tu ich es überhaupt nicht da die Ebenen sich eigentlich überlappen müssten, was diese ja auch eigentlich machen.
Die Ebenen haben alle einen Wert relative und der z-index ist durchnummeriert.
Kann mir jemand die Logik dahinter erläutern ?
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>r</title>
<?php
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
</head>
<link rel="stylesheet" href="file:///D|/test/1/wissen.css" type="text/css" />
<body>
<div id="container">
<div id="content"></div>
<div id="box1"></div>
<div id="logo"></div>
<div id="navi"></div>
<div id="navi2"></div>
<div id="navi3"></div>
<div id="navi4"></div>
<div id="navi5"></div>
<div id="navi6"></div>
<div id="textstartseite"></div>
<div id="textstartseite2"></div>
<div id="footer"> <p>Für telefonische Kontaktaufnahme wählen Sie: +000000</p> </div>
css:
body {
background-color: #E1DDD9;
color:#000000;
font-size: 12px;
font-family: Verdana, Arial, Sans-Serif;
}
p {
/* ------ Farb/Schrifgrösset für Footerleiste -----*/
padding: 1px;
text-align:center;
color:#ffffff;
margin:0;
font-size: 1.2em;
}
p2 {
/* ------Textformatierungen Startseite 1 -----*/
color:#000000;
font-size: 12px;
}
p3 {
/* ------Textformatierungen Startseite 2 Name: Andre Fohrst -----*/
color:#ff6000;
}
p4 {
/* ------Textformatierungen Startseite 2 Name: Andre Fohrst -----*/
color:#666666;
}
#container {
width: 956px;
height: 520px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
background-color: #ffffff;
}
#content {
height: 520px;
width: 950px;
border: 3px solid #ff6000;
background-color: #ffffff;
margin-right: 0px;
margin-left: 0px;
}
#textstartseite {
position:relative;
left:350px;
top:-597px;
width:600px;
height:200px;
z-index:12;
background-color:#ff6000;
}
#textstartseite2 {
position:relative;
left:350px;
top:-7px;
width:60px;
height:200px;
z-index:12;
background-color:#ff6000;
}
#box1 {
/* ------ Box 1 -----*/
position:relative;
left:0px;
top:-525px;
width:50px;
height:50px;
z-index:2;
background-color: #ff6000;
}
#logo {
position:relative;
left: 584px;
top: -573px;
width: 367px;
height: 112px;
background-color:#F1700A;
z-index:3;
}
#navi {
position:relative;
left:774px;
top:-550px;
width:179px;
height:25px;
z-index:4;
background-color: #F1700A;
background-image: url(bilder/impressum.jpg);
}
#navi2 {
position:relative;
left:629px;
top:-575px;
width:145px;
height:25px;
z-index:5;
background-color: #F1700A;
background-image: url(bilder/kontakt.jpg);
}
#navi3 {
position:relative;
left:436px;
top:-600px;
width:193px;
height:25px;
z-index:6;
background-color: #F1700A;
background-image: url(bilder/biete.jpg);
}
#navi4 {
position:relative;
left:282px;
top:-625px;
width:154px;
height:25px;
z-index:7;
background-color: #F1700A;
background-image: url(bilder/mich.jpg);
}
#navi5 {
position:relative;
left:105px;
top:-650px;
width:177px;
height:25px;
z-index:8;
background-color: #F1700A;
background-image: url(bilder/wissen.jpg);
}
#navi6 {
position:relative;
left:3px;
top:-675px;
width:102px;
height:25px;
z-index:9;
background-color: #F1700A;
background-image: url(bilder/home.jpg);
}
#Auswahl {
/* ------ face -----*/
position:relative;
left:3px;
top:-515px;
width:312px;
height:130px;
z-index:10;
background-color:none;
}
#footer {
/* ------ footer -----*/
position:relative;
left:350px;
top:-333px;
width:604px;
height:20px;
z-index:11;
background-color: #Ff6000;
}