Platz ausfüllen trotz absoluter Positionierung

[Div Hasser]

Hey Leute!

Ich hab ein mittelkleines Problem!

Erstmal ein Code Ausschnitt (stark vereinfacht):
-----------------------------

<div id="div1">
   <div id="div2">

<input id="input1" type="text">

<br> Bla Bla Bla...
      <br> Bla Bla Bla...
           Bla Bla Bla...

</div>
</div>
-----------------------------

Und das CSS:
-----------------------------

#div1
{
   float: left;
}

#div2
{
  /* position: absolute; ? */
}

#input1:hover
{
   width: 500px;
}
-----------------------------

Ich hab da also ein Div1 mit "float: left;" und ohne feste Größe. Innerhalb dieses Divs habe ich ein weiteres Div2. In diesem weiteren Div2, habe ich dann ein Input Element. Per CSS habe ich erreicht, dass das Input[text] Element größer wird, wenn ich es mit der Maus berühre.
Wenn aber das Div2, in dem das Input Element liegt, "position: static;" oder "position: relativ;" hat, dann wird das wächst das Div1 natürlich mit.
Wenn ich nun dem Div2 ein "position: absolute;" gebe, wächst das Div1 nicht mehr mit, aber der Text "Bla Bla Bla..." rutscht dann nach oben (weil das Div2 ja sozusagen aus der Struktur herausfällt, wie bei "display: none;") und wird dadurch vom Div2 verdeckt.

Kann ich erreichen, dass das Div2 zwar absolut positioniert ist, aber dennoch seinen Platz belegt und sich somit auf andere Elemente auswirkt, als hätte es "position: relative;"?

Vielen Danke schonmal, wär echt cool, wenn mir jemand helfen könnte!

[ChrisB]

Hi,

Kann ich erreichen, dass das Div2 zwar absolut positioniert ist, aber dennoch seinen Platz belegt und sich somit auf andere Elemente auswirkt, als hätte es "position: relative;"?

Nein.

Wenn es aber nur das Inputfeld enthaelt (und somit eigentlich ueberfluessig waere, denn dann koenntest du ja das Inputfeld direkt formatieren), dann duerfte es auch eine mehr oder weniger feste Hoehe haben - so dass du die nachfolgenden Inhalte mit einem margin oder padding auf Abstand halten kannst.

MfG ChrisB

[Div Hasser]

Hallo! :-)

Kann ich erreichen, dass das Div2 zwar absolut positioniert ist, aber dennoch seinen Platz belegt und sich somit auf andere Elemente auswirkt, als hätte es "position: relative;"?

Nein.

Wenn es aber nur das Inputfeld enthaelt

Nein, es enthält (leider) auch noch einen submit-Button.

(und somit eigentlich ueberfluessig waere, denn dann koenntest du ja das Inputfeld direkt formatieren), dann duerfte es auch eine mehr oder weniger feste Hoehe haben - so dass du die nachfolgenden Inhalte mit einem margin oder padding auf Abstand halten kannst.

Das könnte ich theoretisch machen. Aber wie? Wenn ich dem Div1 ein "padding-top: 5em;" gebe, dann schiebt sich ja auch das Div2 runter, was ich nicht möchte.

Ganz viele liebe Grüße!

[ChrisB]

Hi,

Wenn ich dem Div1 ein "padding-top: 5em;" gebe, dann schiebt sich ja auch das Div2 runter, was ich nicht möchte.

use(brain);

Wenn du Div2 eh schon absolute positionierst, dann wirst du von dessen top-Koordinate doch auch noch einen entsprechenden Wert abziehen koennen ...

MfG ChrisB

[Div Hasser]

Hi,

Wenn ich dem Div1 ein "padding-top: 5em;" gebe, dann schiebt sich ja auch das Div2 runter, was ich nicht möchte.

use(brain);

Wenn du Div2 eh schon absolute positionierst, dann wirst du von dessen top-Koordinate doch auch noch einen entsprechenden Wert abziehen koennen ...

??? Es ist zwar absolut positioniert, aber nur, damit es bei einer Vergrößerung nicht das erste Div beeinflussts. es hat wirklich nur die Eigenschaft "position:absolute;" und nicht noch sowas wie "top:50px;" oder so, bei dem ich etwas abziehen könnte.

[ChrisB]

Hi,

Es ist zwar absolut positioniert, aber nur, damit es bei einer Vergrößerung nicht das erste Div beeinflussts. es hat wirklich nur die Eigenschaft "position:absolute;" und nicht noch sowas wie "top:50px;" oder so, bei dem ich etwas abziehen könnte.

Also hast du es gegenueber seiner normalen top-"Position" derzeit nicht verschoben - also quasi um die "Laenge" 0.

Hoppla, schau mal, dieses o-foermige Ding - kennen wir das nicht aus der Grundschule, ist das nicht die Zahl vor der eins?
Na also, von der koennen wir doch auch was abziehen, wenn wir wollen.

MfG ChrisB

[Div Hasser]

Es ist zwar absolut positioniert, aber nur, damit es bei einer Vergrößerung nicht das erste Div beeinflussts. es hat wirklich nur die Eigenschaft "position:absolute;" und nicht noch sowas wie "top:50px;" oder so, bei dem ich etwas abziehen könnte.

Also hast du es gegenueber seiner normalen top-"Position" derzeit nicht verschoben - also quasi um die "Laenge" 0.

Hoppla, schau mal, dieses o-foermige Ding - kennen wir das nicht aus der Grundschule, ist das nicht die Zahl vor der eins?
Na also, von der koennen wir doch auch was abziehen, wenn wir wollen.

Ups, ich hab fälschlicherweise gedacht, dass sich das top auf den Viewport bezieht, aber es bezieht sich ja auf das Elternelement. Na dann ist alles klar!! Vielen Dank für deine Hilfe, so geht es! :)

[suit]

Ups, ich hab fälschlicherweise gedacht, dass sich das top auf den Viewport bezieht, aber es bezieht sich ja auf das Elternelement. Na dann ist alles klar!! Vielen Dank für deine Hilfe, so geht es! :)

du solltest dringend mal Positionierung nachlesen
zusammengefasst:
static = Voreinstellung
absolute = wird aus dem textfluss entfernt und bezieht sich auf das nächste überliegende elemente mit NICHT static
relative = wird nicht aus dem textfluss entfernt, beziehung wie absolute
fixed = wird aus dem textfluss entfernt, bezieht sich auf den viewport - alte ie versionen verstehen die eigenschaft aber nicht

[Harlequin]

Yerf!

relative = wird nicht aus dem textfluss entfernt, beziehung wie absolute

Ähm, das ist doch so nicht richtig... Die Positionsangaben beziehen sich bei relative auf die "Normalposition" von Static.

Gruß,

Harlequin

[suit]

Ähm, das ist doch so nicht richtig... Die Positionsangaben beziehen sich bei relative auf die "Normalposition" von Static.

in der tat, mein Fehler - danke für die Korrektur;)

[Felix Riesterer]

Liebe(r) Div,

<div id="div1">
   <div id="div2">

<input id="input1" type="text">

<br> Bla Bla Bla...
      <br> Bla Bla Bla...
           Bla Bla Bla...

</div>
</div>

warum muss es immer ein <div> in einem <div> sein? Was hälst Du von folgendem Code:

<div id="div1">  
    <p id="div2">  
       <input type="text" name="input1" id="input1" /><br />  
       Blabla....<br />  
       bla.  
    </p>  
</div>

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Christoph Schnauß]

hallo,

Ich hab ein mittelkleines Problem!

Es sieht so aus, als hättest du mehrere Probleme - das fängt schon mit deinem Nicknamen an. Wenn du die DIVs so sehr haßt, warum benutzt du sie dann auf eine Weise, die deinen "Haß" nur noch nähren dürfte?

Erstmal ein Code Ausschnitt (stark vereinfacht):

Das ist das nächste Problem: was bedeutet hier "stark vereinfacht"? Wieviel verschweigst du?

<div id="div1">
   <div id="div2">
      <input id="input1" type="text">

Das dritte Problem: warum um CSS willen muß man denn immer und hartnäckig "ID"s einsetzen? Welche Bedeutung haben deine DIVs in der Hierarchie deiner Seite(n) - ist das eine Struktur, die du vielfach auf mehreren Seiten gleichermaßen einsetzt, oder ist das etwas, was nur ein einzigesmal vorkommt?

Mit "Struktur" meine ich: es mag sinnvoll sein, einem (oder mehreren) "großen" definierten Bereichen jeweils eine "sprechende" Identifikation (ID) mitzugeben. Den Namen "DivX" halte ich für unglücklich. Nenne das Ding so, daß du am Namen erkennst, welche Funktion das Teil später im optischen Erscheinungsbild haben soll. Und gib dann den Teilen, die _in_ ihm liegen, nicht nochmals IDs, sondern Klassennamen. Die haben den Vorteil, daß sie später im HTML mehrfach vorkommen dürfen, IDs dürfen das nicht.

<br> Bla Bla Bla...
      <br> Bla Bla Bla...
           Bla Bla Bla...

Das vierte Problem: um dieses wundervolle BlaBla zu formatieren, brauchst du kein <br>.

#div1 {float: left;}

Na gut.

#div2 {/* position: absolute; ? */}

Was'n das?

#input1:hover

Dir ist klar, daß du damit bereits den IE6 von der gewünschten Darstellung völlig ausschließt - was man meiner Ansicht nach derzeit noch nicht tun sollte?

{width: 500px;}

<seufz>Warum nur immer diese Pixellayouts ...</seufz>

Ich hab da also ein Div1 mit "float: left;" und ohne feste Größe. Innerhalb dieses Divs habe ich ein weiteres Div2. In diesem weiteren Div2, habe ich dann ein Input Element.

Ja, das kann man lesen.

Per CSS habe ich erreicht, dass das Input[text] Element größer wird, wenn ich es mit der Maus berühre.

Das kann man nicht lesen. Ist das irgendwie wichtig?

Wenn aber das Div2, in dem das Input Element liegt, "position: static;" oder "position: relativ;" hat

Es wäre "position: relative" - man muß hier schon sehr genau sein.

dann wird das wächst das Div1 natürlich mit.

Öhm ... was tut dann was? In welchem Browser?

Wenn ich nun dem Div2 ein "position: absolute;" gebe, wächst das Div1 nicht mehr mit, aber der Text "Bla Bla Bla..." rutscht dann nach oben

In welchem Browser geschehen dir derlei wundersame Dinge?

Kann ich erreichen, dass das Div2 zwar absolut positioniert ist, aber dennoch seinen Platz belegt

Es belegt "seinen" Platz vollkommen unabhängig davon, ob du es absolut oder relativ oder gar nicht positionierst. Du meinst vermutlich, daß es den Platz belegen soll, den du dir wünschst. Also bringe ihm doch bitte bei, was du dir wünschst.

Es gibt immer mal wieder ein Problem bei "position: absolute". Weil diese Angabe eben nicht unbedingt "absolut" wirkt, wie man in SELFHTML nachlesen kann - wenn man auch den Abschnitt "Erläuterung" zur Kenntnis nimmt.

Grüße aus Berlin

Christoph S.

[Div Hasser]

Erstmal ein Code Ausschnitt (stark vereinfacht):

Das ist das nächste Problem: was bedeutet hier "stark vereinfacht"? Wieviel verschweigst du?

Sollte ich lieber den ganzen Code posten? In der Hilfe stand, dass man es auf das wichtigste reduzieren soll.

<div id="div1">
   <div id="div2">
      <input id="input1" type="text">

Das dritte Problem: warum um CSS willen muß man denn immer und hartnäckig "ID"s einsetzen? Welche Bedeutung haben deine DIVs in der Hierarchie deiner Seite(n) - ist das eine Struktur, die du vielfach auf mehreren Seiten gleichermaßen einsetzt, oder ist das etwas, was nur ein einzigesmal vorkommt?

Kommt nur einmal vor, als Formular.

<br> Bla Bla Bla...
      <br> Bla Bla Bla...
           Bla Bla Bla...

Das vierte Problem: um dieses wundervolle BlaBla zu formatieren, brauchst du kein <br>.

Ich wollte nur zeigen, dass dann das Div über diesem Text liegt. Dazu sollte der Text mehrere Zeilen haben.

#input1:hover

Dir ist klar, daß du damit bereits den IE6 von der gewünschten Darstellung völlig ausschließt - was man meiner Ansicht nach derzeit noch nicht tun sollte?

Für den IE6 habe ich mit Javascript diese Funktion nachgebastelt. Und für IE6 und ohne Javascript... naja Pech gehabt. Dann gibt's nen Warnhinweis eingeblendet und gesagt, dass sie einen anderen Browser nehmen müssen.

{width: 500px;}

<seufz>Warum nur immer diese Pixellayouts ...</seufz>

Was denn für Pixellayouts? Ich hätte auch 20em oder 50% nehmen können, das ist nur zur Demonstration.

Ich hab da also ein Div1 mit "float: left;" und ohne feste Größe. Innerhalb dieses Divs habe ich ein weiteres Div2. In diesem weiteren Div2, habe ich dann ein Input Element.

Ja, das kann man lesen.

Per CSS habe ich erreicht, dass das Input[text] Element größer wird, wenn ich es mit der Maus berühre.

Das kann man nicht lesen. Ist das irgendwie wichtig?

Ja, ganz wichtig! Darum geht es doch. Denk dir vielleicht das [text] weg, das hätte ich vielleicht nicht schreiben sollen.

Wenn aber das Div2, in dem das Input Element liegt, "position: static;" oder "position: relativ;" hat

Es wäre "position: relative" - man muß hier schon sehr genau sein.

Nee das ist egal. Der Effekt bleibt gleich, es wird ja nicht irgendwie verschoben.

dann wird das wächst das Div1 natürlich mit.

Öhm ... was tut dann was? In welchem Browser?

Naja, wenn du ein Div1 in einem Div2 hast und das Div1 vergrößerst, passt sich ja das Div2 dynamisch an. Genauso ist das bei mir. Das äußere Div soll sich aber nicht anpassen sondern seine Größe behalten. Wenn ich nun "position: absolute;" angebe, beinflusst das innere Div das äußere natürlich nicht mehr.

Wenn ich nun dem Div2 ein "position: absolute;" gebe, wächst das Div1 nicht mehr mit, aber der Text "Bla Bla Bla..." rutscht dann nach oben

In welchem Browser geschehen dir derlei wundersame Dinge?

Firefox 2.0.0.12 unter Windows.

[suit]

Welche Bedeutung haben deine DIVs in der Hierarchie deiner Seite(n) - ist das eine Struktur, die du vielfach auf mehreren Seiten gleichermaßen einsetzt, oder ist das etwas, was nur ein einzigesmal vorkommt?

warum sollte man keine id verwenden dürfen, für etwas das auf jeder unterseite vorkommt?

eine id für Strukturbildende Elemente die auf jeder Unterseite genau 1x vorkommen ist doch ok warum sollte man dafür eine Klasse verwenden?

gut, #div1 und #div2 ist etwas irre, aber ungeachtet der Frage:
warum .menu, .header und .footer anstatt #menu, #header und #footer?

klassen sind für sich wiederholende Dinge gut

z.B.: .kommentarelement, .sichimmerwiederholenderzwischenueberschriftsuntertitelkasten ;)

wenns überhaupt nur ein einziges mal vorkommt, ist eine id aus meiner sicht  natürlich auch ok