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

[FRAGE] Raum zwischen absoluten divs füllen

S

sobomat

New member
Hallo,

ich habe einen 10px breiten container-div, in dem ich viele quadratische divs (10x10px) absolut untereinander positioniere. Die jew. Position kann sich später dynamisch ändern. D.h. der vertikale Zwischenraum zwischen den einzelnen divs ändert sich auch. In den Zwischenräumen habe ich wiederum je einen div, der den vertikalen Abstand füllen soll. Also die quadratischen und die füllenden divs wechseln sich ab.
Zum besseren Verständnis: die 10x10px-divs sind runde Flächen und die dazwischenliegenden divs haben eine vertikale Linien als Hintergrund, die jew. zwei dieser Flächen verbinden soll (mit leichtem Abstand zu den Punkten, deshalb kann ich nicht einfach eine Linie hinter die Punkte legen).

Kann mir da jemand weiterhelfen?

Vielen Dank!
 
Zuletzt bearbeitet von einem Moderator:
punkte.jpg

Nein, hier eine Grafik, die es besser zeigt. Die grünen Punkte sind absolut positioniert. Die Linien sollen sich in der Höhe dynamisch anpassen, wenn sich die Positionen der Punkte ändern.
 
Ah okay, sorry. Nächstes mal dann :)
Die grünen Punkte sind absolut in der Position und werden später im code vertikal verschoben. Danach sollen sich dann die Linien dazwischen dynamisch in der Höhe ausrichten. Die Position der Linien stimmt schon, weil die divs einfach unter den Punkt-divs liegen (relativ) aber wie kann ich die Höhe dieser divs automatisch anpassen lassen?
 
Leg die Linie doch einfach in den "10px breiten container-div" als Hintergrundgrafik über die gesamte Höhe rein.
Dann brauchst Du auch nicht mehr die Zwischen-Div's.
 
@dkdenz: dann muss man aber den Kreisen noch einen wießen Rand, geben, damit der Abstand zwischen der Linie und den Kreisen noch da ist.

@sobomat: müssen die Kreise wirklich absolut positioniert sein? Ohne wäre das nämlich viel einfacher:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<style type="text/css">
.circle {
	height: 50px;
	width: 50px;
	border-radius: 25px;
	background-color: darkgreen;
}
.line {
	margin: 5px 15px;
	width: 20px;
	height: 10px;
	background-color: brown;
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="line"></div>
<div class="circle"></div>
<div class="line"></div>
<div class="circle"></div>
<div class="line"></div>
<div class="circle"></div>
<div class="line"></div>
<div class="circle"></div>
<script type="text/javascript">
(function(){
	var activeNode = null;
	var startPos = null;
	var startHeight = 0;
	kkjs.event.add(kkjs.css.$(".line + .circle"), "mousedown", function(ev){
		activeNode = this.previousSibling;
		while (activeNode && activeNode.nodeType === 3){
			activeNode = activeNode.previousSibling;
		}
		startPos = ev.clientY;
		startHeight = activeNode.offsetHeight;
	});
	kkjs.event.add(document, "mouseup", function(){
		activeNode = null;
		startPos = null;
	});
	kkjs.event.add(document, "mousemove", function(ev){
		if (activeNode){
			var newHeight = startHeight + ev.clientY - startPos;
			if (newHeight <= 0){
				newHeight = 0;
			}
			activeNode.style.height = newHeight + "px";
		}
	});
}());
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben