mehrere div-Elemente anordnen
kölir
- javascript
0 suit- css
Hallo,
ich habe eine Seite, die sich grob wie folgt einteilen lässt:
- - - - - - -
| |
| Textabsatz |
| |
| - - - - - - |
| |
| div#frage |
| |
| - - - - - - |
| |
| Textabsatz |
| |
- - - - - - -
Die Seite ist 100% breit.
Im div#frage sind 5 div-Elemente enthalten. Diese möchte ich innerhalb der 100% breite des div#frage und der div#frage-höhe, die sich für den Bereich ergeben würde, würden die 5 div-Elemente untereinander stehen, mit JavaScript anordnen (jquery oder dojo als Framework).
Und zwar sollen die 5 div Elemente in einem Kreis angeordnet sein. Dabei soll der Mittelpunkt in der Mitte von div#frage liegen. Die Elemente sollen sich gegenseitig nicht berühren also den entsprechend notwendigen Abstand vom Kreismittelpunkt haben bzw. den entsprechend notwendigen Umfang bilden. Dabei kann es natürlich passieren, dass der sich ergebende Durchmesser größer ist, als div#frage breit ist; dann sollen die Elemente eben entsprechend abgeschnitten sein und außerhalb des Anzeigebereichs liegen.
Nun Frage ich mich, wie ich so etwas erreichen kann?
Zunächst starte ich mit
<div if="frage">
<div id="frage1"></div>
<div id="frage2"></div>
<div id="frage3"></div>
<div id="frage4"></div>
<div id="frage5"></div>
</div>
und ermittle mit JavaScript die Breite und Höhe von div#frage, die sich dynamisch ergeben hat, und speichere diese in zwei Variablen zwischen.
Dann ermittle ich ebenso die Ausmaße der 5 divs (um später quasi mittelpunktbezogen zu positionieren).
Wie kann ich jetzt am sinnvollsten die Koordinaten für die Positionierung der 5 div-Elemente ermitteln?
Angenommen ich habe die Koordinaten ermittelt, wie ordne ich die Elemente an? Relativ zum div#frage? div#frage hat dabei noch overflow=hidden?
Danke für Anregungen und Tipps
kölir
Wie kann ich jetzt am sinnvollsten die Koordinaten für die Positionierung der 5 div-Elemente ermitteln?
[http://www.mathepedia.de/Fuenfeck.aspx]
Relativ zum div#frage? div#frage hat dabei noch overflow=hidden?
Ich denke dir fehlen essentielle Grundlagen zum Thema CSS.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm
position: relative; ist ungeeignet und overflow: hidden hat genau garnichts mit der Aufgabe zu tun.