div im div anordnen

[JesusFreak777]

Hi ihr,

ich habe auf einer Seite, ein Div,.. das ist in einem (variablen) Textfluß eingebunden und hat keine Feste Position!

jetzt möchte ich in diesen DIV (feste Höhe & Breite) mehrere Divs relativ anordnen (soll ein Säulemdiagramm werden [natürlich mir Dynamischen höhen und breiten,...])

beim ersten DIV ist das ja noch einfach,...

position: relative; top: ".$reltop."px; left: ".$relleft."px;

aber ab dem 2. Positioniert er dann immer relativ zum ersten,...
Klar,... ich weiß ja wo das erste ist und wie groß,... ich könnte dann "einfach" RECHNEN ^^ -> aber das ist find ich etwas sehr umständlich!

gibts da ne bessere lösung?

-> das ist jetzt einfach mal etwas wirrer Quählcode (wird natürlich noch als schleife aufgebaut und mit dynamischen werten,....) aber vll. wird ja jemand daraus schlau was ich will und kann mir helfen

		$dxheight = 220; 
				
		
		echo "<div id='diag' style='border: 1px solid #567; height: ".$dxheight."px; '>";
		
		
		$height = 50; 
		$height = $height / 100 * $dxheight;
		$reltop = $dxheight - $height - 1;
		
			echo "<div style='background: #31304A;  position: relative; top: ".$reltop."px; 
				left: 10px; width: 25px; border: 1px solid #567; height: ".$height."px;  '></div>";
		
		$height = 20; 
		$height = $height / 100 * $dxheight;
		$reltop = $dxheight - $height - 1 - $reltop - 3;
		
			echo "<div style='background: #4A304A;  position: relative; top: ".$reltop."px; 
				left: 45px; width: 25px; border: 1px solid #567; height: ".$height."px;  '></div>";
		
		$height = 70; 
		$height = $height / 100 * $dxheight;
		$reltop = $dxheight - $height - 1;
		
			echo "<div style='background: #304A4A;  position: relative; top: ".$reltop."px; 
				left: 80px; width: 25px; border: 1px solid #567; height: ".$height."px;  '></div>";
		
		$height = 50; 
		$height = $height / 100 * $dxheight;
		$reltop = $dxheight - $height - 1;
		
			echo "<div style='background: #617A94;  position: relative; top: ".$reltop."px; 
				left: 115px; width: 25px; border: 1px solid #567; height: ".$height."px;  '></div>";
		
		$height = 50; 
		$height = $height / 100 * $dxheight;
		$reltop = $dxheight - $height - 1;
		
			echo "<div style='background: #304A3E;  position: relative; top: ".$reltop."px; 
				left: 150px; width: 25px; border: 1px solid #567; height: ".$height."px;  '></div>";
		
		$height = 50; 
		$height = $height / 100 * $dxheight;
		$reltop = $dxheight - $height - 1;
		
			echo "<div style='background: #947B61;  position: relative; top: ".$reltop."px; 
				left: 185px; width: 25px; border: 1px solid #567; height: ".$height."px;  '></div>";
		
		$height = 50; 
		$height = $height / 100 * $dxheight;
		$reltop = $dxheight - $height - 1;
		
			echo "<div style='background: #6F5C49;  position: relative; top: ".$reltop."px; 
				left: 220px; width: 25px; border: 1px solid #567; height: ".$height."px;  '></div>";
		
		$height = 50; 
		$height = $height / 100 * $dxheight;
		$reltop = $dxheight - $height - 1;
		
			echo "<div style='background: #4A3130;  position: relative; top: ".$reltop."px; 
				left: 255px; width: 25px; border: 1px solid #567; height: ".$height."px;  '></div>";
		
		$height = 50; 
		$height = $height / 100 * $dxheight;
		$reltop = $dxheight - $height - 1;
		
			echo "<div style='background: #4A4A30;  position: relative; top: ".$reltop."px; 
				left: 290px; width: 25px; border: 1px solid #567; height: ".$height."px;  '></div>";
		
		echo "</div>";

Wie man sieht habe ich bei reltop einen Korrektuffaktor! Warum wird dieser benötigt? Ist das einfach mein border?

Vielen Dank

 

[Lime]

Huhu,

also primär würde ich eine fixe Säulenbreite und einen fixen Abstand zwischen den Säulen festlegen (oder später dynamisch berechnen).
Dann auf jedenfall die Höhen in einen Array rein!

$sbreite = 30;
$sabstand = 15;
$hoehen = array(10, 20, 15, 40, 50, 23, 21, 20, 80, 20, 45);

echo "<div id='diag' style='border: 1px solid #567; height: ".$dxheight."px; '>";

for($i = 0; $i < 10; $i++)
{
      //aktuelle Höhe berechnen
      $height = $hoehen[$i] / 100 * $dxheight; 
      //relative höhen-Position berechnen  
      $reltop = $dxheight - $height - 1;
      //relative breiten-Position berechnen
      $relleft = $sbreite * $i + $sabstand * $i;

      //Ausgabe
      echo "<div style='background: #31304A;  position: relative; top: ".$reltop."px;  
                left: ".$relleft."px; width: ".$sbreite."px; border: 1px solid #567; height: ".$height."px;  '></div>"; 
}

echo "</div>";

Ich hoff ich hab jetzt keinen Fehler drin, ist natürlich nicht getestet.

Aber vielleicht hilft es dir ja weiter, bei deinen Überlegungen...

€: letzte Frage wegen dem Korrekturfaktor: Ja, das ist der border...

Gruß

 

[JesusFreak777]

Hallo,

Vielen Dank,... genau das wollte ich auch so machen array und schleife und so ...

Aber das eigentliche Problem wurde leider nicht gelöst....

evtl. habe ich auch nur einen Denkfehler,... aber gerade ist es so, das er die erste Säule zum DIAG-DIV richtig Positioniert,... aber ab dann hält er sich nicht mehr an das DIAG-DIV sondern an die letzte säule,...

eine lösung wäre, das ich die erste säule positioniere und dann die top-pos anhand der 2. säule errechne,... -> dieser weg gefällt mir aber nicht ganz!

kann ich beim Positionieren keinen bezug auf ein bestimmtes objekt nehmen?

Grüße

 

[Lime]

Puh, da fragst du mich echt zu viel. Selbst wenn es unbequem/unschön ist, würde ich es einfach mal mit der relativen Position des vorherigen Objekts probieren...

Eine Erklärung, warum das nicht von der absoluten Position aus gesetzt wird, versteh ich nicht ganz. Müsste theoretisch automatisch so sein.
Die Alternative wäre, statt einen Leerraum zu lassen (Abstand zw. DIVs), einfach eine unsichtbare Säule mit der maximalen Höhe einzufügen. Dann ist der Ursprung wieder ganz oben, wenn ich da richtig nachgedacht habe!

Gruß

 

[djheke]

Nimm doch eine UL-Liste und floate die LI's
Hier mal ein beispiel. Vielleicht kannst du es ja gebrauchen.
Diagramm

p.s. Die id und title Attribute sind nur beispielhaft