Wieder einmal ein Problem mit dem Überlagern von divs

[Promaetheus]

Schön langsam glaube ich wirklich ich bin zu dämlich für die Layer. Es hört sich immer alles so einfach an, aber wenn ich es dann versuche klappt es nicht.

Ich dachte mir ich könnte für meine Bildergalerie ein ganz einfaches Feature machen. Ich wollte, wenn der Admin eingeloggt ist im Bild den Button zum löschen einblenden. Der Lösungsansatz sah wiefolgt aus:

<div style="position: relative; border: 2px solid red">
  <div style="position: relative; top: 0px; z-index:2">hinten</div>
  <div style="position: relative; top: 0px; z-index:1; background-color: #ff0000">vorne</div>
</div>

Meine Überlegungen zu obigem Code: Der erste div ist ein Container, welcher das Bild beinhaltet (hinten) und den Button (vorne). Leider werden "hinten" und "vorne" untereinander angezeigt. beide divs (hinten+vorne) sollten sich doch mit top: 0px am oberen Rand des Elternelementes, sprich des Containers orientieren und ausrichten oder?

Den Container habe ich verwendet um den Textfluss beizubehalten, denn auf den Container folgt normaler und unformatierter Text.

 

[Maik]

Hi,

die relative Positionierung bezieht sich auf das vorangegangene Element - positionier die beiden Elemente stattdessen absolut und tausch mal die Werte für die z-index-Eigenschaft, denn je höher der Wert, desto weiter vorne liegt das Element.

 

[Promaetheus]

Danke für die Antwort Maik.

Mit dem z-index habe ich mich nur beim hier reintippseln vertan. Sollte doch copy&paste machen. Ich habe den Vorschlag von dir probiert, jedoch mit einem sonderbarem Resultat:

wenn ich die beiden "Kinder-Divs" auf absolute setze, so passt das für das 1. angezeigte Element und dieses wird korrekt am oberen Rand des Elternelementes angezeigt. Das 2. jedoch wird am oberen Browserrand angezeigt.

Ich glaube wirklich dass divs einfach nichts für mich sind. Bis jetzt hat noch nichts von meinen Vorhaben geklappt.

Ich habe jetzt eine Zwischenlösung für das Problem:

<div style="position: relative; width: '.$imageSize[0].'px; height: '.$imageSize[1].'px; background-image: url('.DIR_IMAGES_GALLERY.$imgName.');>
  <div style="position: absolute; top: 0px; z-index:1">BUTTON</div>
</div>

$imgsize kommt aus meiner Bildberechnung via php.

 

[Maik]

wenn ich die beiden "Kinder-Divs" auf absolute setze, so passt das für das 1. angezeigte Element und dieses wird korrekt am oberen Rand des Elternelementes angezeigt. Das 2. jedoch wird am oberen Browserrand angezeigt.

Das kann ich nicht bestätigen, wie der Schnappschuss zeigt:

 

[Promaetheus]

Sehr sonderbar. Woran das wohl liegen mag? Ich verwende den FF, jedoch war das Problem auch bei mir im IE6 zu sehen. Ich werde nochmal alles kontrollieren.

 

[Maik]

Der Scrennshot stammt aus FF, gilt aber auch für alle weiteren Browser, die mir hier zur Verfügung stehen.

 

[Promaetheus]

Hallo Maik! Ich danke dir nochmal für die Hilfestellung. Ich habe es heute in Ruhe nochmal probiert und meines Erachtens denselben Code produziert, aber heute klappt es tatsächlich. Ich hatte wohl doch irgendwo einen Tippfehler drin.

Ich möchte mich nochmal für deine Geduld und Hilfestellung bedanken.

EDIT: ich denke den Fehler jetzt gefunden zu haben. Ich habe dem div Container im CSS Stylesheet die werte position: relative zugewiesen. Im Quellcode selber habe ich, da es ja anders nicht möglich ist, dem div auch noch die Höhe und Breite durch meinen php Code zugewiesen. sobald ich das tue funktioniert das ganze nicht mehr.
Ich dachte ich könnte einen Teil der Werte (position) mittels Stylesheet zuweisen und den Rest dann mittels style="width: Xpx; height: Ypx". funktioniert das nicht? Anscheinend scheint er duch die Breiten- und Höhenangabe im style="" die Stylesheet Zuweisung zu überschreiben. Eine andere Möglichkeit hätte ich leider nicht.

 

[Maik]

Hi,

Ich habe dem div Container im CSS Stylesheet die werte position: relative zugewiesen. Im Quellcode selber habe ich, da es ja anders nicht möglich ist, dem div auch noch die Höhe und Breite durch meinen php Code zugewiesen. sobald ich das tue funktioniert das ganze nicht mehr.
Ich dachte ich könnte einen Teil der Werte (position) mittels Stylesheet zuweisen und den Rest dann mittels style="width: Xpx; height: Ypx". funktioniert das nicht? Anscheinend scheint er duch die Breiten- und Höhenangabe im style="" die Stylesheet Zuweisung zu überschreiben. Eine andere Möglichkeit hätte ich leider nicht.

das Problem kann ich bei mir nicht reproduzieren

div#box {
position:relative;
left:50px;
top:50px;
background:yellow;
}

<div id="box" style="width:500px;height:200px;">box</div>

 

[Promaetheus]

Ich habe jetzt mal allen Cache gelöscht jetzt funktioniert es. Nun wollte ich das Ganze auch für meine Bildkommentare anwenden. Es sollte rechts oben im Kommentarfeld der Löschen-Button (Höhe 25px, Weite 25px) eingeblendet werden. Leider habe ich jetzt das Problem dass bei einem Kommentar von nur einer Zeile der Lösch-Button über die Box unten raussteht:

<div style="position: relative; border: 2px dashed blue">
  <div style="position: absolute; top: 0px; z-index:1">Der Text des Bildkommentars</div>
  <div style="position: absolute; top: 0px; z-index:2; width: 25px; height: 25px"><img srce="button.gif"></div>
</div>

Wobei ich diese Version gleich wieder verworfen habe, weil dann natürlich der Button über dem Text angezeigt würde.

Ich habe dann versucht das ganze zu floaten, jedoch auch ohne Erfolg:

<div style="border: 2px dashed blue">
  <div style="float: right; width: 25px; height: 25px"><img src="button.gif"></div>
  <div style="position: relative">Der Text des Bildkommentars</div>
</div>

Hier hat sich dann alles verschoben. Ich habe das Problem wiefolgt gelöst, wobei jetzt wieder das Problem des aus dem Haupt-Div unten hervorstehenden Buttons auftritt und im IE6 sogar der rechte Teil des Rahmens verschwindet:

<div style="border: 2px dashed blue">
  <div style="float: right; clear: both; width: 25px; height: 25px"><img src="button.gif"></div>
  <div style="position: relative">Der Text des Bildkommentars</div>
</div>

 

[Maik]

Guten Morgen

Wenn du mit der float-Eigenschaft arbeitest, muss die Floatumgebung auch zum Abschluss "gecleart" werden, damit die Spalten den unteren Rand des umschliessenden Elements nicht überlappen - siehe hierzu auch http://positioniseverything.net/easyclearing.html.

Dass der Text unter den Button wandert, liegt daran, dass du für das "Bildkommentar"-DIV keinen entsprechenden rechten Außenabstand eingerichtet hast.

Hier die erweiterte Fassung deines zuletzt gezeigten Quellcodes:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<div class="clearfix" style="border: 2px dashed blue">
  <div style="float: right; clear: both; width: 25px; height: 25px"><img src="button.gif"></div>
  <div style="position: relative; margin-right:30px;">Der Text des Bildkommentars, der von mir jetzt mal völlig sinnfrei in die Länge gezogen wird, um zu schauen, was mit ihm neben dem "Button" geschieht, und wie sich das umschliessnede DIV verhält, wenn der Text länger als eine Zeile ist.</div>
</div>