transparentes DIV-Element über Fieldset legen

[Marcel Jänicke]

Hallo,

ich habe verschiedene fieldsets, die alle div-Elemente enthalten, welche mit Daten gefüllt werden. Da die Datenabfrage unter umständen etwas dauern kann, möchte ich dem User zeigen, dass Daten geladen werden.

Nun dachte ich an ein div-Element, welches über das fieldset gelegt wird. Sobald die Daten da sind, soll das Div-Element wieder verschwinden.

Ich habe schon einige Ansätze versucht. Das Problem ist aber dass ich nicht mit absoluter Positionierung arbeiten kann, da sich die Größen der Fieldsets ändern können.

Ich habe versucht ein weiters div in das Fieldset zu legen, was aber auch nicht funktioniert.

  
<fieldset class="field">  
 <legend>  
  Legende  
 </legend>  
 <div id="transparent">  
 </div>  
 <div id="anderesdiv">  
 </div>  
 <div id="nocheins">  
 </div>  
</fieldset>  

Wie bekomme ich das transparente div-Element nun über die anderen div-Elemente bzw. komplett in das fieldset?

Danke
Gruß
Marcel Jänicke

[Peter van Panski]

Ein DIV-Element ist an sich schon transparent, solange du ihm keinen Hindergrund gibst.
Umgekehrt: gib allen anderen elementen hintergrundfarbe, du deinem "überdeckungs-div" keine (z-index).
Wenn deine Divs dynamisch mit inhalt gefüllt werden, dann musst du die grüße irgendwie ermitteln, und dann dem "überdeckungs-div" zuteilen, oder gleich auf 100% setzten.

[Marcel Jänicke]

Ein DIV-Element ist an sich schon transparent, solange du ihm keinen Hindergrund gibst.
Umgekehrt: gib allen anderen elementen hintergrundfarbe, du deinem "überdeckungs-div" keine (z-index).
Wenn deine Divs dynamisch mit inhalt gefüllt werden, dann musst du die grüße irgendwie ermitteln, und dann dem "überdeckungs-div" zuteilen, oder gleich auf 100% setzten.

Ok, ich habe mich ein wenig missverständlich ausgedrückt bzw. nicht genug Informationen gegeben.

Mein Überlappungs-div hat eine Farbe und ist auch nicht volltransparent, arbeite mit opacity: 0.5;

Wie man oben im Quellcode sehen kann sind insgesammt 3 div-Elemente im fieldset enthalten. Das erste soll jedoch im Normalfall nicht angezeigt werden. Ich blende es mit display: none; komplett aus.

Betätigt der User nun einen Schalten um Daten zu empfangen, so soll das komplette fieldset mit dem Überlappungs-div überlappt werden, um dem User zu zeigen, dass Daten geladen werden.

Dazu muss ich das erste div mit display: block; anzeigen, was aber dazu führt das es auch entsprechend Platz einnimmt.

Wie muss dies gelöst werden?

[suit]

Mein Überlappungs-div hat eine Farbe und ist auch nicht volltransparent, arbeite mit opacity: 0.5;

opacity hat nur indirekt etwas mit transparenz zu tun, wie der name schon sagt bestimmt die eigenschaft den opazitäts-grad des elements

Wie muss dies gelöst werden?

dies ist wohl einer der fälle wo position: absolute oder relative interessante möglichkeiten bieten

[Marcel Jänicke]

Wie muss dies gelöst werden?
dies ist wohl einer der fälle wo position: absolute oder relative interessante möglichkeiten bieten

Daran hab ich auch schon gedacht und eifrig getestet, doch es funktioniert nicht.

Arbeite ich mit position: absolute muss ich dauerhaft die Größen und Position der jweiligen fieldsets überprüfen und entsprechend das div-Element neu setzen.

Arbeite ich mit position: relative, so kann ich es zwar gut platzieren und würde so sein wie ich will, da hab ich aber nun die freie Stelle im fieldset, da das div mit display: block angezeigt wird.

[suit]

Arbeite ich mit position: absolute muss ich dauerhaft die Größen und Position der jweiligen fieldsets überprüfen und entsprechend das div-Element neu setzen.

wenn du das ein und ausblenden ohnehin mit javascript machst, ist das doch nicht das problem?

[Marcel Jänicke]

Arbeite ich mit position: absolute muss ich dauerhaft die Größen und Position der jweiligen fieldsets überprüfen und entsprechend das div-Element neu setzen.
wenn du das ein und ausblenden ohnehin mit javascript machst, ist das doch nicht das problem?

Das wär nicht das Problem, nur hätte ich mir gewünscht, dass es einfacher über css geht. Leider scheint es da aber keine Möglichkeit zu geben.

[suit]

Das wär nicht das Problem, nur hätte ich mir gewünscht, dass es einfacher über css geht. Leider scheint es da aber keine Möglichkeit zu geben.

soweit ich weiss leider nicht - elternsektoren sind sowieso nicht möglich und werden lt. der meinung verschiedener browserentwickler vorest aus ressourcengründen nicht implementiert, zum anderen vererben sich spezifische eigenschaften zwar vom kompletten baum nach unten, es gilt aber jeweils die des nächst vorhergehenden elemements, welche die eigenschaft gesetzt hat (wenns um die breite zb geht) - andere dinge, wie zb der ursprungspunkt für position absolute/fixed/relative kann natürlich auch von großelternelement kommen (vorausgesetzt, er wurde nicht im elternelement schon gesetzt)

[suit]

hossa, bin wohl im thread verrutscht ;)

[ChrisB]

Hi,

Arbeite ich mit position: absolute muss ich dauerhaft die Größen und Position der jweiligen fieldsets überprüfen und entsprechend das div-Element neu setzen.

Wieso? Positioniere es absolute im relative positionierten Fieldset-Vorfahrenelement, und gebe fuer alle fuer "Koordinaten" den Wert 0 an. Daraus die Groesse herzuleiten, sollten alle modernen Browser beherrschen (IE erst ab V7).

MfG ChrisB

[Marcel Jänicke]

Hi,

Arbeite ich mit position: absolute muss ich dauerhaft die Größen und Position der jweiligen fieldsets überprüfen und entsprechend das div-Element neu setzen.

Wieso? Positioniere es absolute im relative positionierten Fieldset-Vorfahrenelement, und gebe fuer alle fuer "Koordinaten" den Wert 0 an. Daraus die Groesse herzuleiten, sollten alle modernen Browser beherrschen (IE erst ab V7).

MfG ChrisB

Dies habe ich getan, jedoch erscheint kein div-Element:

  
position: absolute;  
top: 0;  
left: 0;  
width: 0;  
height: 0;  
background-color: green;  

[suit]

Dies habe ich getan, jedoch erscheint kein div-Element:

position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
background-color: green;

  
sicher, es ist nur links oben und 0 hoch/breit - works as designed

[Marcel Jänicke]

Dies habe ich getan, jedoch erscheint kein div-Element:

position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
background-color: green;

>   
> sicher, es ist nur links oben und 0 hoch/breit - works as designed  
  
OK, da ist es ;), aber nicht wie gewünscht und wie ChrisB meint. Es ist wieder aus dem fieldset heraus gegangen und wird ganz oben am Websiterand angezeigt.  
  
Ich habe es aber jetzt gelöst über Javascript: ich erzeuge ein neues Element im Parent, welches automatisch als letztes Child angehangen wird und somit kann ich das auch gut bearbeiten.

[suit]

OK, da ist es ;), aber nicht wie gewünscht und wie ChrisB meint. Es ist wieder aus dem fieldset heraus gegangen und wird ganz oben am Websiterand angezeigt.

hat das fieldset einen position-wert abweichend von static?

Ich habe es aber jetzt gelöst über Javascript: ich erzeuge ein neues Element im Parent, welches automatisch als letztes Child angehangen wird und somit kann ich das auch gut bearbeiten.

uncoole lösung, wenn die andere auch funktioniert ;)

[ChrisB]

Hi,

OK, da ist es ;), aber nicht wie gewünscht und wie ChrisB meint. Es ist wieder aus dem fieldset heraus gegangen und wird ganz oben am Websiterand angezeigt.

Dann hast du das "relative" in meinem Posting uebersehen.
(Wer absolute Positionierung verstanden haette, muesste es sich sogar von selbst dort denken koennen.)

MfG ChrisB

[Marcel Jänicke]

Hi,

Arbeite ich mit position: absolute muss ich dauerhaft die Größen und Position der jweiligen fieldsets überprüfen und entsprechend das div-Element neu setzen.

Wieso? Positioniere es absolute im relative positionierten Fieldset-Vorfahrenelement, und gebe fuer alle fuer "Koordinaten" den Wert 0 an. Daraus die Groesse herzuleiten, sollten alle modernen Browser beherrschen (IE erst ab V7).

MfG ChrisB

Hallo,

wie es scheint funktioniert es doch ;).
Der Fehler lag in meiner Denkweise wei es scheint. Ich bin sturr davon ausgegangen, dass, wenn ich keine position angebe, diese automatisch auf relative initialisiert wird, dies scheint aber nicht so zu sein. Nach dem einfügen dieser Angabe im Parent-Element geht es nun.

Danke an alle.

Gruß
Marcel