Divs überlappen. Kein Erfolg mit z-index ?!

Status
Nicht offen für weitere Antworten.
A

angelikamorgan

Mitglied
Hallo zusammen,

die folgende Grafik bzw. Seite (s.h. Anhang) besteht aus drei Teilen.
Den obersten Teil (<div id="header">) habe ich grün markiert.
Den mittleren Teil (<div id="middle">) gelb und den unteren Teil (<div id="bottom">) blau.

Innerhalb des mittleren Bereichs soll die Navigation (roter Kasten) weiter nach oben an die 'position 2' versetzt werden.
Ich habe versucht das Problem mit 'z-index' und 'position-relative' zu lösen. Mir gelingt es nicht, den Kasten an die 'position 2' zu verschieben. :(

Wäre super, wenn mir jemand damit weiter helfen könnte.

Gruß
Angeliak

p.s.: Den Quelltext habe ich auch als Anhang eingefügt.
 

Anhänge

  • verschieben.jpg
    verschieben.jpg
    19,9 KB · Aufrufe: 33
  • navigation.zip
    navigation.zip
    5,4 KB · Aufrufe: 16
Zuletzt bearbeitet:
hallo .. du musst der Positionsangabe auch noch einen wert der position übergeben:

HTML: 
#navigation {
 position:relative; top:-200px; left:240px;
 background-color: red;
 width: 240px;
 height: auto;
}

Was du da mit z-index machen wolltest ist mir nicht klar ... dieser regelt ja welche box oben ist, und welche unten.

ich würde dir raten mit classen zu arbeiten und nicht mit ID ... dies ist vorteilhafter!


HTML: 
.navigation {
 position:relative; top:-200px; left:240px;
 width: 240px;
 height: auto;
}
 
.ci_color_01 {
background-color: red;
}

und dies im HTML dann so aufrufen:

HTML: 
<div class="navigation ci_color_01"> TEXT </div>

PS.
@Maik ...
ist das ein schönes Gefühl mal schneller als du eine (hoffendlich richtige) Antwort gegeben zu haben :)
 
Zuletzt bearbeitet:
Vielen Dank Mr. Grille :)

Mir ist noch unklar, weshalb ich auf z-index verzichten kann.

Bei <div id="middle"> und <div id="navigation"> handelt es sich um Boxenelemente.
Gestern habe ich gelernt, dass Boxenelemente die gesamte Zeile einnehmen und sich daher gegenseitig versrängen.
Um Boxenelemente nebeneinander anzuordnen, sollte man daher mit 'float' oder 'z-index' arbeiten. In meinem Beispiel ordne ich zwei divs nebeneinander an.

Weshalb kommst du ohne 'float' und 'z-index' aus?!

Gruß
Angelika

Nachtrag: ich habe nur eine Navigation. Ist es nicht besser, in diesem Fall mit 'id' statt mit 'class' zu arbeiten? bei der Hintergrundfarbe würde ich dir auf jedenfall recht geben.
 
Einen Z-Index hat ja jede Box schon. Wenn du jetzt eine andere Box erstellen willst die eine gleiche Position wie deine Navi-Box, dann würde deine Navi-Box überdeckt werden.

Das Boxen die ganze Zeile einnehmen und einander verdrängen stimmt soweit auch. Das mit dem float ist eine andere Geschichte. Hier geht es darum Div-Boxen nebeneinander zu plazieren.

Leider kann ich mir nicht so richtig vorstellen, was du mir deiner Navi-Box vor hast.

Willst du ein mehrspaltiges Layout erstellen?

das solltest du besser nicht mit "position" machen:

HTML: 
<!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' xml:lang='de' lang='de'>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>20080616_test_css_type_in_boxes</title>
 <style type="text/css">
  h1{ font-size:0.8em; line-height: 1.2em; font-family: verdana, Arial; color:#08729e;}
  p{ font-size:0.8em; line-height: 1.2em; font-family: verdana, Arial; margin-left: 1em;}
  .page {width:900px; background-color: #aaa;}
  .head {width:900px; height:100px; background-color:#666;}
  .content {width:700px; background-color: #eee;}
  .menu {width:200px; background-color: #ddd;}
  .foot {width:900px; height:50px; background-color: #999;}
  .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden;}
  .floatbox { overflow: hidden; }
  .neben {float: left; display: block;}
 </style>
</head>
<body>
 <div class='page'>
  <div class='head'>KOPP</div>
  <div class='floatbox'>
   <div class='menu neben'>KNÖPPE <br>KNÖPPE <br>KNÖPPE <br>KNÖPPE <br>KNÖPPE <br>KNÖPPE <br>KNÖPPE <br>KNÖPPE <br>KNÖPPE</div>
   <div class='content neben clearfix'>BUCHSTABEN <br>BUCHSTABEN <br>BUCHSTABEN <br>BUCHSTABEN <br>BUCHSTABEN <br>BUCHSTABEN 
<br>BUCHSTABEN</div>
  </div>
  <div class='foot'>STINKFUSS</div>
 </div>
</body>
</html>
 
Hi.
Grille hat gesagt.:
hallo .. du musst der Positionsangabe auch noch einen wert der position übergeben:

ich würde dir raten mit classen zu arbeiten und nicht mit ID ... dies ist vorteilhafter!

PS.
@Maik ...
ist das ein schönes Gefühl mal schneller als du eine Antwort gegeben zu haben :)
Zum Vergrößern anklicken....
Es würde aber grundsätzlich lediglich die Positionsart (relative oder absolute) ohne Positionsangaben reichen, damit die z-index-Deklaration greift.

Das kann man nicht so verallgemeinern, denn wenn es im Dokument nur eine Navigation gibt, kann diese auch ruhig mit einer ID ausgezeichnet werden.

@P.S. Keine Kunst, wenn ich offline bin :suspekt:

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück