div soll das ganze Formular bedecken aber auch Abstand zu Buttons halten

[Andy Nail]

Hallo zusammen,

in einem Formular, in einem iframe, soll man Links erstellen können. Da diese aber auch über viele Funktionen verfügen können soll es auch die Möglichkeit geben diese testen zu können. Und dafür verwende ich ein div, das dann das Formular abdecken soll. Aber da jetzt das Formular je nach Browser unterschiedlich groß sein kann, muß sich ja das div anpassen. Und so würde ich gerne height:100% in einer Klasse verwenden. doch scheint dann margin-bottom:40px nicht greifen zu wollen.

Aber wie bekomme ich es denn bitte hin, daß die Buttons unten weiter zu sehen sind, oder besser wie ich eeinen Abstand zu denen halte?

Bedanke mich für alle Vorschläge und würde mich freuenn dies meistern zu können.

Also schonmal Danke Gruß Andreas

[Gunnar Bittersmann]

@@Andy Nail

doch scheint dann margin-bottom:40px nicht greifen zu wollen.

Aber wie bekomme ich es denn bitte hin, daß die Buttons unten weiter zu sehen sind, oder besser wie ich eeinen Abstand zu denen halte?

Glaskugel: calc(100% - 40px) (Anstatt px gern was in em oder rem.)

Bedanke mich für alle Vorschläge

Für Vorschläge ohne Glaskugel bist du am Zug.

LLAP 🖖

[Andy Nail]

Naja dann auf jeden Fall mal dafür vielen Dank.

Doch funktioniert damit nix. Denn wenn ich das anwende ist es egal ob ich 40 oder 20 px oder em angebe, denn auch ein Teil des Formulars ist so wieder zu sehen. Und es soll ja nur ein Abstand von 40px eingehalten werden! Und so sieht mein css dann jetzt so aus:

#TestArea {
  z-Index: 1;
  position: absolute;
//  left: 0; top: 0; height:335px;
  height:calc(100%-20px); left:0; width:100%; top:0;
  background-color: #fff;
}

Also gibt es da noch weitere Vorschläge? Bedanke mich auf jeden Fall für alles!

Also schonmal Danke Gruß Andreas

[Gunnar Bittersmann]

@@Andy Nail

Also gibt es da noch weitere Vorschläge?

Ja. Mach dir Gedanken, was ich mit „bist du am Zug“ gemeint haben könnte.

Tip: Ein Codefetzen CSS – noch dazu ohne zugrundeliegendes Markup – war’s nicht.

LLAP 🖖

[Rolf b]

Frisch von der eigenen blutenden Nase gepflückt und über die Glaskugel geschmiert:

• height:100% funktioniert für ein Element nur wie gedacht, wenn der Container des Elements hoch genug ist. Was ist das Parent-Element deiner Area 51a?
• Operatoren in calc brauchen Leerstellen. calc(100%-20px) geht nicht, calc(100% - 20px) schon.

Rolf

[Gunnar Bittersmann]

@@Rolf b

• Operatoren in calc brauchen Leerstellen.

So pauschal stimmt das nicht.

Manche Operatoren in calc brauchen Leerstellen (+, -), andere nicht (*, /).

calc(100%-20px) geht nicht, calc(100% - 20px) schon.

calc(100%/2) geht, calc(100% / 2) auch.

LLAP 🖖

[Andy Nail]

Jo Hallo

Ich müsste ja das gesamte Formular hier rein stellen. Und reicht dann die Angabe, dass egal wo ich folgenden Bereich hinsetze, es den gesamten Bereich des iframes einnimmt, oder halt diesen Fehlabstand zeigt?

<div id="TestArea" align="center">
<div style="position:absolute; right:20px; top:20px"><a href="#" onclick="javascript:document.getElementById('TestArea').style.visibility ='hidden'; top.document.getElementById('LinkDaten').style.display = 'none'; document.getElementById('DatenZeile').innerHTML = null; document.LinkDaten.Beenden.onclick = null; document.LinkDaten.Speichern.onclick = null">Schließen</a></div>
<a id="TestLink" target="blank"></a>
</div>

Soll ich dann die Buttons in ein Div setzen und über dieses hier setzen?

Bedanke mich weiter für jede Hilfe und freue mich auf alle Vorschläge.

Also schonmal Vielen Dank dafür und Gruß Andreas

[Matthias Apsel]

Hallo Andy Nail,

Ich müsste ja das gesamte Formular hier rein stellen.

Nö. Ein online-Beispiel bitte. Codepen, Dabblet, …

Bis demnächst
Matthias

[Andy Nail]

Hallo Matthias

aber auch sorry, die Seite gibt es nur lokal auf meinem Rechner, so dass ich keine Online-Ergebnisse zeigen kann. Ich dachte ich hätte bereits genügend beschrieben. Doch wenn nicht, was fehlt dann bitte noch an Angaben/Auskünften?

Danke Gruß Andreas

[Gunnar Bittersmann]

@@Andy Nail

<div id="TestArea" align="center">

Sämtliches Styling bitte mit CSS, nicht mit missbilligten HTML-Attributen.

<div style="position:absolute; right:20px; top:20px">

Sämtliches Styling bitte im Stylesheet, nicht inline in HTML-Attributen.

<a href="#" onclick="javascript:document.getElementById('TestArea').style.visibility ='hidden'; top.document.getElementById('LinkDaten').style.display = 'none'; document.getElementById('DatenZeile').innerHTML = null; document.LinkDaten.Beenden.onclick = null; document.LinkDaten.Speichern.onclick = null">Schließen</a>

„Gehe zurück in die Badstraße“?

Nein. a ist falsch; button wäre richtig.

javascript: ist nicht direkt falsch, aber unsinnig. (Es ist ein Label. Verwendest GOTO-Sprünge dorthin? Nein.)

Es ist auch nicht besonders sinnvoll, bei (jedem!) Buttonclick die Elemente (erneut) aus dem DOM rauszusuchen. Die ganzen document.getElementById() fürhst du besser vorher aus uns speicherst die Referenzen auf die Elemente in Variablen:

var testAreaElement = document.getElementById('TestArea');

Im Eventhandler dann:

testAreaElement.style.visibility ='hidden';

Oder besser doch nicht. Denn es ist nicht besonders gut, mit JavaScript CSS-Eigenschaften (direkt) zu ändern. „Was hingegen schwer ist, ist in die Köpfe der Menschen zu bringen.“

<a id="TestLink" target="blank"></a>

Möchtest du ein neues Fenster/Tab öffnen oder das in einem bestehenden namens „blank“ öffnen? Wenn ersteres: "_blank".

Außerdem: Warum? Staubsaugervertreter?

LLAP 🖖

[Andy Nail]

Jo Du OK Hallo und auch Ihr zusammen

Und es ist halt so, dass per Javascript der Link mit der ID TestLink aus den Daten des Formulars zusammengebaut wird. Und OK, ich habe mich bei Target vertippt, denn das sollte ja _blank lauten.

Und das Schließen soll ein Link auf der Testarea sein, da Buttons ja bereits auf im Fenster zu sehen sind. Aber das mit dem ständigen DOM geschreibsel, anstatt es mal in eine Variable zu Packen, solte ich wohl mal verwirklichen.

Aber dann wusste ich nicht ob ich gleich wieder ein neues Thema reinstellen soll, oder ob ich das oben anknüpfen soll. Denn die Grundlage des ganzen hier ist, dass beim Firefox die Textarea größer ist. Und da wäre es schön raus zu bekommen wie groß sie im moment ist! Denn dann wäre das Ganze hier geschafft, da ich ja dann in der css Klasse die genaue größe der Textarea angeben könnte.

Also schonmal Vielen Dank und ich freue mich auf jede Hilfe.

Gruß Andreas