Frage zum Einsatz von Ebenen Teil 2 [Archiv]

Archiv verlassen und diese Seite im Standarddesign anzeigen : Frage zum Einsatz von Ebenen Teil 2

Masterp

2011-04-30, 13:32:42

Moin,

nachdem ich durch freundliche Hilfe mein Problem mit Ebenen lösen konnte, beschäftigt mich eine weitere Frage, auf die ich bisher in der Lektüre keine Antwort finden konnte.

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 Gtafiken (Navigationsmenü) gleich sein, 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;

}

AintCoolName

2011-04-30, 19:10:35

Da weiß man garnicht wo man anfangen soll.

1) vergiss erstmal das mit dem Z-Index, den braucht man nur in speziellen Fällen. Und zwar nur dann wenn man wirklich was übereinander legen möchte. Solange die divs neben- und untereinander liegen braucht man den nicht wirklich.

2) Position relative mit top und left werten sollte man auch möglichst selten einsetzen. Weil damit verschiebt man nur die optische Darstellung nach dem Seitenaufbau an einen anderen Ort aber das element bleibt anstonsten dort wo es ist. Darum braucht jedes deiner Nav divs sein eigenen TOP wert, weil sie in wirklichkeit untereinander liegen daran ändert auch der Z-index nichts.

3) Schau dir an wie man mit Float:left und display:inline arbeitet um Divs und Ul LI neben einander zu legen. Zum Beispiel deine Nav Leiste macht man mit einer Liste (UL LI) die man mit float left oder display inline in die Wagerechte bring. (http://www.westciv.com/style_master/house/tutorials/quick/list_navbar/index.html)

4) Hier (http://www.stichpunkt.de/css/bereiche.html) nochmal das ganze wie man sich eine Seite grundsätzlich aufbaut.

5) Schau dir mit Firebug (ich hoffe du benutzt den) andere Seiten an. Es gibt auch eine Menge fertige Templates im Netz. Einfach mal nach "free css Templates" suchen.

Masterp

2011-04-30, 19:26:28

Grüss Dich,

2) Position relative mit top und left werten sollte man auch möglichst selten einsetzen. Weil damit verschiebt man nur die optische Darstellung nach dem Seitenaufbau an einen anderen Ort aber das element bleibt anstonsten dort wo es ist.

Wie darf ich das genau verstehen ? Optisch ist es verschoben aber dann doch nicht ? Kann man das wo nachlesen ?

Darum braucht jedes deiner Nav divs sein eigenen TOP wert, weil sie in wirklichkeit untereinander liegen daran ändert auch der Z-index nichts.

Die Ebenen von mir haben doch alle einen eigenen Top-Wert. Letztere brauch ich ja zum Anordnen am Bildschirm.

Nase

2011-04-30, 20:07:21

Ich kann dir nur dazu raten, generell auf "position:" zu verzichten. Das macht wirklich nur in ganz wenigen Fällen Sinn.
Was viel wichtiger ist: Die Struktur und der weitere Aufbau deiner Webseite funktioniert so nicht. Dadurch, dass du deine Elemente nicht richtig gruppierst, machst du dir das Leben ungemein schwer. Da solltest du als erstes ansetzen.

AintCoolName

2011-04-30, 20:19:14

Masterp

2011-04-30, 21:22:54

Ich denke das du glaubst das durch den z-index jedes div in seinem eigenen unabhängigen Koordinaten System liegt und sich die div nicht mehr gegenseitig beeinflussen können. Das ist aber nicht so, dazu müsste man dem div ein position:fixed zuweisen. Aber das macht man auch nur in speziellen Fällen (http://de.selfhtml.org/css/layouts/fixbereiche.htm)

Die divs werden grundsätzlich erst mal in der Reihenfolge gerendert wie sie im html code liegen. Du merkst doch das wenn du mit top und left ein div in ein anderes verschiebst das andere div nicht wegrückt. Ich denke du hast gedacht das liegt am Z-Index, aber dafür ist der Z-index nicht verantwortlich.

Das was mich verwundert ist, dass die DIVs ja so festgelegt sind, das diese sich überlappen, sich aber irgendwo stören. Beim Z-Index habe ich in der Tat das Gefühl, dass sich da nichts tut.

Der Grund ist das du die divs nicht wirklich bewegst sondern nur die optische Darstellung verschiebst.

DAS ist der Punkt den ich nicht verstehe.

Wenn ich ein "div" Element anlege, dann kann ich das auch entsprechend platzieren, jedenfalls optisch. Was für ein Sinn steckt dahinter, dass diese dennoch "unsichtbar" an der selben Stelle wären ?

Bei selfhtml was ich oben verlinkt habe gibts mehr infos (http://de.selfhtml.org/css/layouts/index.htm). Da wird auch der Einsatz von "float" erklärt, was sehr wichtig ist zu verstehen.

Ich hab mir das anhand deines Links ( http://www.stichpunkt.de/css/3-box2.html ) genauer angesehen jedoch frage ich mich ob das die Lösung für das beschriebene Problem in der Tat ist.

Ich kann dir nur dazu raten, generell auf "position:" zu verzichten.
Wie sollte ich deiner Meinung nach ca. sieben Boxen/Ebene (sechs davon liegen genau auf einer Ebene) nebeneinander am Screen genau platzieren ?

Was viel wichtiger ist: Die Struktur und der weitere Aufbau deiner Webseite funktioniert so nicht. Dadurch, dass du deine Elemente nicht richtig gruppierst, machst du dir das Leben ungemein schwer. Da solltest du als erstes ansetzen.

Kannst Du mir ein Beispiel zeigen ?

Ich hab mal meine Vorstellung grob aufgemalt.

Ebene Hintergrund und die restlichen Ebenen liegen darauf.
Die Ebenen "Logo + Menü 1 - 4" beinhalten Bilder.

Nase

2011-04-30, 22:02:31

Verabschiede dich von dem Begriff der Ebenen. Im Browser gibt es genau eine davon: den "Viewport". Der z-index ist nicht so zu verstehen, dass du dir damit mehrere Ebenen anlegst und darauf frei voneinander Elemente verschieben oder positionieren kannst. Mit dem z-index legst du lediglich fest, wie sich überlappende Elemente gehandhabt werden, sprich: Welches Element liegt über dem anderen.
Das ist dann auch wieder der Punkt, den ich im anderen Thread schon angerissen habe. Elemente liegen nicht auf- sondern ineinander und somit besteht eine gewisse Abhängigkeit unter allen Elementen.

Menüs baut man gemeinhin als Liste (ul/ol) auf, definiert die Menüpunkte als Block und gibt ihnen je nach gewünschter Ausrichtung noch ein "float" mit.

AintCoolName

2011-04-30, 22:50:19

Ich habe mal ein wenig was verändert. Die Sachen ein wenig gruppiert und das Menü als Liste mit float:left aufgebaut.

<!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
?>
</head>
<link rel="stylesheet" href="style.css" type="text/css" />
<body>
<div id="container">
<div id="Header">
<div id="box1"></div>
<div id="logo"></div>
</div>
<ul id ="navbar">
<li id="navi">Menü1</li>
<li id="navi2">Menü2</li>
<li id="navi3">Menü3</li>
<li id="navi4">Menü4</li>
<li id="navi5">Menü5</li>
<li id="navi6">Menü6</li>
</ul>
<div id="content">content</div>
<div id="footer"> <p>Für telefonische Kontaktaufnahme wählen Sie: +000000</p> </div>
</div>
</body>
</html>

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;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
background-color: #ffffff;
border: 3px solid #ff6000;
}

#content {
height: 520px;
background-color: #ffaaff;
margin-right: 0px;
margin-left: 0px;
clear:left;
}

#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;
}

#Header{
height:112px;
}

#box1 {
/* ------ Box 1 -----*/

width:50px;
height:50px;

background-color: #ff6000;
float:left;
}

#logo {
width: 367px;
height: 112px;
background-color:#F1700A;
margin-left:589px;
}

#Auswahl {
/* ------ face -----*/
position:relative;
left:3px;
top:-515px;
width:312px;
height:130px;
z-index:10;
background-color:none;
}

#navbar{
list-style-type:none;
height:30px;
background-color:#ff6000;
margin:0px;
padding:0px;
margin-top: 20px;
margin-bottom: 20px;
}

#navbar li{
float:left;
height:30px;
width:100px;
line-height:30px;
text-align:center;
border-right: 1px solid yellow;
}

#footer {
/* ------ footer -----*/
position:relative;
width:100%;
height:20px;
background-color: #Ff6000;
margin-top:10px;
}

Masterp

2011-04-30, 23:45:39

@AintCoolName: Also ich habe mir dein Beispiel mal genau angesehen und im Grunde ist es das, was ich eigentlich auch machen möchte.

Du hast gewisse Gruppen erzeugt (Header, Navigation, Container) und darin dann die Zuweisung gemacht. Bei den einzelnen Navigationspunkten hast Du dann ein "float" gesetzt. Ich gehe jetzt mal davon aus, wenn ich jetzt ne weitere Box erstellen würde, dann müsste ich das in die davorgesehene Gruppe machen, weil eine gewisse "Abhängigkeit" herrscht. Seh ich das soweit richtig ? Dein Beispiel hilft mir jedenfalls schon ne ganze Ecke, das mit dem Float und der Verschachtelungen zu verstehen.

Nase

2011-04-30, 23:52:37

Kurze Zwischenfrage: Was willst du dir gerade beibringen? HTML oder CSS oder beides gleichzeitig?

Masterp

2011-04-30, 23:56:09

Im Grunde CSS wobei ich erwähnen muss, dass ich meine Layouts damals noch mit Tabellen gezimmert habe und da will ich nun weg von.