• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Elemente in Bereich

J

-Jack001

New member
Guten Abend,

und zwar ich habe ein kleines Problem:
Folgendes:
Ich möchte ich einen, von mir definierten Bereich, weitere divs hinzufügen.
Hierbei stehe ich vor folgenden Problemen:
-Zentrierung der hinzufügenden Div-Elemente
-Hinzufügen der Div-Elemente im übergeordneten Div Bereich.

HTML:
HTML: 
 <body>
        <button onclick = "startG()">Scripttest</button>
        <!--<p id = "output"></p>-->
        <div id = "viewArea" style = "margin: auto;"></div>
        </body>
Javascript:
Code: 
var gArea = window.document.createElement("div");
window.onload = function(){
gArea.setAttribute("style", "margin: auto; background: red; height: 600px; width: 500px;");
window.document.getElementById("viewArea").appendChild(gArea);
}
function startG(){
  var gElement = window.document.createElement("div");
  /* getRandomNumber() aus anderem Dokument eingebunden!*/
  var rndHeight = getRandomNumber(parseInt(gArea.style.height)-20, false);
  var rndWidth = getRandomNumber(parseInt(gArea.style.width)-20, false);
  console.log(rndHeight + "|" + rndWidth);
  gElement.setAttribute("style", "background: black; height: 20px; width: 20px; position: absolute; top:" + rndHeight + "px;left:" + rndWidth + "px;");
  gArea.appendChild(gElement);
}
CSS:
Code: 
body{
  text-align: center;
    font-family: arial;
}
Ich hoffe mir kann jemand hierbei behilflich sein.

Mit freundlichen Grüßen

-Jack001
 
Hallo
Ist schon bisschen spät und ich blick hier bei den random numbers nicht mehr durch.
Um ein Element in einem Container absolute zu positionieren sollte dieser entweder relative oder selber absolute positioniert sein .
und es kann nicht schaden floats wenn gesetzt am ende des containers wieder zu clearen.
entweder mit ein <br style="clear:both" />am ende des Containers oder mit overflow:hidden oder auto dahin bringen das er stabil bleibt .
soweit mal fürn Anfang falls du dass noch nicht bedacht hast.
MFG
 
-Jack001 schrieb:
Hierbei stehe ich vor folgenden Problemen:
-Zentrierung der hinzufügenden Div-Elemente
-Hinzufügen der Div-Elemente im übergeordneten Div Bereich.
Zum Vergrößern anklicken....
Äh... das passt nicht zu deiner absoluen Positionierung, die in deinem Test auch noch zufällig ist... beschreib' doch genau, was du wirklich erreichen willst.

PS: setAttribute mit style würde ich ja nicht verwenden. Warum arbeitest du nicht mit CSS-Klassen?
PPS: block-Elemente kann man mit margin: 0 auto; zentrieren, wenn sie eine feste Breite haben. Wenn du keine feste Breite hast, musst du mit inline-block arbeiten.
 
eigentlich ist das ja nicht so schwer man muss nur das oben gesagte berücksichtigen entweder den Container relative oder absolute oder das eingefügte Element inline-block .
hier müsste ein Fiddle dazu sein
MFG

- - - Aktualisiert - - -

Beim Einsatz von Flexboxen ist das Verhalten der Elemente nicht das Gleiche.
Um 1n Element in der Mitte zu platzieren genügt es den Container auf display:flex; einstellen und das Element margin:auto;
MFG
 
Zuletzt bearbeitet von einem Moderator:
andreax schrieb:
Beim Einsatz von Flexboxen ist das Verhalten der Elemente nicht das Gleiche.
Um 1n Element in der Mitte zu platzieren genügt es den Container auf display:flex; einstellen und das Element margin:auto;
Zum Vergrößern anklicken....
Dafür braucht man keine Flexbox... das funktioniert bei allen Block-Elementen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben