Ergebnis 1 bis 9 von 9
  1. #1
    sobomat ist offline Grünschnabel
    registriert
    17-02-2009
    Beiträge
    5

    Raum zwischen absoluten divs füllen

    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!
    Geändert von mikdoe (26-02-2014 um 17:39 Uhr) Grund: Präfix korrigiert

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.822

    AW: Raum zwischen absoluten divs füllen

    Wird das ein Schachspiel?

  3. #3
    sobomat ist offline Grünschnabel
    registriert
    17-02-2009
    Beiträge
    5

    AW: Raum zwischen absoluten divs füllen

    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.

  4. #4
    j-l-n Guest

    AW: Raum zwischen absoluten divs füllen

    Zitat Zitat von sobomat Beitrag anzeigen
    Also welche Punkte sind jetzt konkret absolut festgelegt?


    PS: [HOW-TO] wird oft missverstanden. Das ist eigentlich dazu da, wenn man selbst so etwas wie ein Tutorial erstellt. Wenn man nicht weiß, wie etwas geht (also "how to do it"), ist das Präfix [FRAGE] besser!

  5. #5
    sobomat ist offline Grünschnabel
    registriert
    17-02-2009
    Beiträge
    5

    AW: Raum zwischen absoluten divs füllen

    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?

  6. #6
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Raum zwischen absoluten divs füllen

    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.

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Raum zwischen absoluten divs füllen

    @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>

  8. #8
    sobomat ist offline Grünschnabel
    registriert
    17-02-2009
    Beiträge
    5

    AW: Raum zwischen absoluten divs füllen

    Vielen Dank für die Vorschläge. @kkapsner: ich glaube das kann ich verwenden. Danke!

  9. #9
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Raum zwischen absoluten divs füllen

    Bitte - gern geschehen.

Ähnliche Themen

  1. Abstand zwischen zwei DIVs
    Von TitanNano im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 06-01-2012, 17:41
  2. Antworten: 0
    Letzter Beitrag: 27-07-2011, 22:52
  3. mit onfocus Divs auf anderer seite füllen
    Von p0is0n im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 29-08-2007, 23:18
  4. Absoluten Pfad ermitteln
    Von Foliengriller im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 19-02-2006, 18:15
  5. ich bräuchte den absoluten Pfad bzw. den Server
    Von kutiku im Forum Serverseitige Programmierung
    Antworten: 3
    Letzter Beitrag: 05-05-2001, 13:23

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •