Probleme bei der Anordnung von Elementen.

html.de-Forum HTML, XHTML & CSS
1

hallo,
ich möchte ein paar div-elemente innerhalb eines rahmens so anordnen, dass sie sich von oben nach unten ordnen und dann, wenn die untere linie des rahmens erreicht ist wieder von oben anfangen. leider laufen die elemente nach erreichen des rahmens immer weiter.
wenn ich anstatt float:top float:left verwende funktioniert es, aber dann habe ich große probleme mit der ordnung der elemente, denn es soll ein kleines koordinatensystem werden, wenn es fertig ist.
hier ist der quelltext:

<html>
<head>
<style type="text/css">
.rahmen { 
	padding : 0px;
	width : 1020px;
	height : 1020px;
	border : 1px solid black;
	background-color : #FFFFFF;
	color : #000000;
	}
.insel {
	float: top;
	padding: 0px;
	width : 100px;
	height : 100px;
	border : 1px solid black;
	background-color : #c0c0c0;
	color : #000000;
	}
</style>
</head>
<body>

<div class= "rahmen">

<div class= "insel">1</div>
<div class= "insel">2</div>
<div class= "insel">3</div>
<div class= "insel">4</div>
<div class= "insel">5</div>
<div class= "insel">6</div>
<div class= "insel">7</div>
<div class= "insel">8</div>
<div class= "insel">9</div>
<div class= "insel">10</div>
<div class= "insel">11</div>
<div class= "insel">12</div>
<div class= "insel">...</div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>

</div>
</body>
</html>

ich hoffe, dass ihr mir helfen könnt.
danke schonmal im vorraus, euer seppes.

2

Ich wüsste gern, woher du float:top kennst. Das gibt es nämlich gar nicht :smiley:
Du könntest es noch mit mehrspaltiger Aufteilung versuchen.

EDIT: Mehrspaltige Aufteilung bekommst du nur mit JavaScript hin. Was auch möglich wäre: absolute Positionierung, vielleicht in Verbindung mit PHP, damit es nicht so viel Schreib- und Rechenarbeit gibt.

3

wenn es float:top gar nicht gibt ist es ja garkein wunder, dass es nicht funktioniert:(

das größte problem ist, dass ich eigentlich ein system mit 100x100 feldern haben wollte und die 10x10 nur ein modell sein sollten, dass ich dann, wenn ich erstmal rausgefunden habe, wie es geht in den größeren maßstab setzen würde. mit copy and paste ist das eigentlich kein problem.

von PHP habe ich nicht die geringste ahnung und in javascript sind meine kenntnisse auch recht dürftig. aber es könnte vielleicht noch reichen, um das hinzubiegen.
was soll ich denn jetzt genau tun?

edit:
am einfachsten wäre es wohl, wenn ich einfach alles mit float:right einordnen könnte und dann nur noch das ganze system um 90 grad drehen müsste, aber das ist wohl leider nicht möglich, oder?

4

@kruschimappel
Mich würd mal interessieren, wie man eine „Mehrspaltige Aufteilung mit JavaScript“ hinbekommt. Ich denke mal das funktioniert so nicht.

So wie ich das verstehe, möchtest du einfach 100*100 DIVs (also 10 000 ???) als Koordinatensystem darstellen?
Eine Möglichkeit wäre, je eine Spalte (also 100 DIVs untereinander) mit einem DIV zu umschließen und left zu floaten, und daneben weitere solcher Spalten einzufügen.

edit: Mit PHP ließe sich das ganze ohne viel Tata automatisch generieren.
edit2: Frage wäre noch, ob so viele DIVs besonders semantisch sind.

Viel Spaß mit Copy&Paste… 10 000 Mal.
gruß

5

Wenn’s nicht dynamisch sein muss, dann mach es so, wie von vitus37 vorgeschlagen:

Lösche zunächst das float: top bei der Klasse insel.

Dann packe je 10 Divs in einen links gefloateten Div. Das sieht dann für die ersten beiden Spalten so aus:

<div class= "rahmen">
<div style="float: left;">
<div class= "insel">1</div>
<div class= "insel">2</div>
<div class= "insel">3</div>
<div class= "insel">4</div>
<div class= "insel">5</div>
<div class= "insel">6</div>
<div class= "insel">7</div>
<div class= "insel">8</div>
<div class= "insel">9</div>
<div class= "insel">10</div>
</div>
<div style="float: left;">
<div class= "insel">11</div>
<div class= "insel">12</div>
<div class= "insel">...</div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
<div class= "insel"></div>
</div>
</div>

Da es sich hier offensichtlich um eine strukturierte Darstellung handelt: Was spricht gegen eine Tabelle?

6

@vitus37
Such dir eine aus:
Multicolumn JavaScript

Aber deine Lösung mit dem Div ist besser, weil kein JavaScript. Aber (je nach Sinn des ganzen) vielleicht wirklich besser als Tabelle?