div.hover & positioning probleme.

K

klanawagna

Erfahrenes Mitglied
Hallo Leute!

Ich arbeite zur Zeit an einem kleine Projekt, das automatisch einen Baum generiert. Hier ein Ausschnitt, es gibt im gesamten mehr divs:
HTML: 
<html><head><link rel="stylesheet" type="text/css" href="style.css"><title>Baum</title></head><body style="overflow: scroll;">
<div class="branch" style=" background-color: rgb(0,0, 0); left: 390.0px; bottom: 10.0px; height: 20px; width: 20.0px; -moz-border-radius: 10px;-moz-transform: rotate(-90deg);"> </div>
<div class="branch" style=" background-color: rgb(3,3, 3); left: 387.5px; bottom: 38.0px; height: 20px; width: 39.0px; -moz-border-radius: 10px;-moz-transform: rotate(-69deg);"> </div>
<div class="branch" style=" background-color: rgb(4,4, 4); left: 404.0px; bottom: 81.0px; height: 20px; width: 72.0px; -moz-border-radius: 10px;-moz-transform: rotate(-44deg);"> </div>
<div class="branch" style=" background-color: rgb(5,5, 5); left: 460.5px; bottom: 117.0px; height: 20px; width: 27.0px; -moz-border-radius: 10px;-moz-transform: rotate(-54deg);"> </div>
<div class="branch" style=" background-color: rgb(7,7, 7); left: 461.5px; bottom: 167.0px; height: 20px; width: 95.0px; -moz-border-radius: 10px;-moz-transform: rotate(-55deg);"> </div>
</body></html>

Aussehen tut das am Ende wie im Anhang angezeigt.

Dabei sind 2 Probleme aufgetaucht:
1.: Ich kann auf die einzelnen Elemente kein :hover machen! warum?
CSS: 
 .branch:hover { width: 20px; }
hat keinen Effekt.
2.: Die ganzen Leafs sind absolut positioniert, ansonsten würden sie sich nicht so aufbauen wie gezeigt, sondern die Leafs wären irgendwo. Ich will es auch absolut positioniert haben aus anderen Gründen, will aber dass dann in alle Dimensionen scrollbar ist! Bei body overflow: scroll geht es nur nach links und unten. grml...

ganz liebe grüße und Danke schonmal für die Hilfe!
klanawagna
 

Anhänge

  • Bildschirmfoto-2.png
    Bildschirmfoto-2.png
    87,1 KB · Aufrufe: 15
hallo

Zum zeichnen ist eingentlich das Canvas element gedacht ;-)

Der hover effekt funktioniert schon. Nur wird die breite nicht angepasst.
Den code kannst du zusammenfassen.
Beim scrollen hab ich noch nicht ganz verstanden was du meinst. Poste mal einen größeren Baum.

HTML: 
<!DOCTYP Ehtml>
<html><head>
	<style type="text/css">
		.tree div{
			-moz-border-radius: 10px;
			background-color: black;
			position: absolute;
		}
		.tree div:hover{
			background-color: red;
			width: 200px;
		}
	</style>
	<title>Baum</title>
</head>
<body>
	<div class="tree">
		<div style="left: 390.0px; bottom: 10.0px; height: 20px; width: 20.0px; -moz-transform: rotate(-90deg);"> </div>
		<div style="left: 387.5px; bottom: 38.0px; height: 20px; width: 39.0px; -moz-transform: rotate(-69deg);"> </div>
		<div style="left: 404.0px; bottom: 81.0px; height: 20px; width: 72.0px; -moz-transform: rotate(-44deg);"> </div>
		<div style="left: 460.5px; bottom: 117.0px; height: 20px; width: 27.0px; -moz-transform: rotate(-54deg);"> </div>
		<div style="left: 461.5px; bottom: 167.0px; height: 20px; width: 95.0px; -moz-transform: rotate(-55deg);"> </div>
	</div>
</body></html>
 
das Hover werd ich ausprobieren, wenn ich wieder Zeit habe.

Wenn du das Bild anschaust, wirst du unten den Scrollbalken sehen. Der Baum geht über den Bildschirmrand hinaus, und ich will die Teile ausserhalb auch darstellen können. Im Bild geht er nach oben und Rechts über den Bildschirm, die Scrollbalken aktivieren sich jedoch nur, wenn er nach links und unten raus geht.
 
Bei folgendem Code funktioniert es immer noch nicht.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">

	<title>Baum</title>
</head>

<body>
	<div class="tree">
		<div style="background-color: rgb(0,0, 0); left: 390.0px; bottom: 10.0px; height: 20px; width: 20.0px; -moz-transform: rotate(-90deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(3,3, 3); left: 373.0px; bottom: 60.0px; height: 20px; width: 86.0px; -moz-transform: rotate(-68deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(4,4, 4); left: 420.5px; bottom: 124.0px; height: 20px; width: 63.0px; -moz-transform: rotate(-50deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(5,5, 5); left: 460.5px; bottom: 179.0px; height: 20px; width: 95.0px; -moz-transform: rotate(-41deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(7,7, 7); left: 526.5px; bottom: 238.0px; height: 20px; width: 63.0px; -moz-transform: rotate(-64deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(10,10, 10); left: 559.0px; bottom: 297.0px; height: 20px; width: 84.0px; -moz-transform: rotate(-46deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(14,14, 14); left: 615.0px; bottom: 359.0px; height: 20px; width: 86.0px; -moz-transform: rotate(-49deg);" onClick="doSomething()"> &nbsp;</div>

<div style="background-color: rgb(20,20, 20); left: 682.0px; bottom: 411.0px; height: 20px; width: 88.0px; -moz-transform: rotate(-26deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(28,28, 28); left: 765.0px; bottom: 435.0px; height: 20px; width: 78.0px; -moz-transform: rotate(-6deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(40,40, 40); left: 843.0px; bottom: 435.0px; height: 20px; width: 42.0px; -moz-transform: rotate(-169deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(57,57, 57); left: 883.5px; bottom: 433.0px; height: 20px; width: 97.0px; -moz-transform: rotate(-2deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(81,81, 81); left: 981.0px; bottom: 431.0px; height: 20px; width: 96.0px; -moz-transform: rotate(-176deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(115,115, 115); left: 1076.5px; bottom: 421.0px; height: 20px; width: 91.0px; -moz-transform: rotate(-172deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(164,164, 164); left: 1161.0px; bottom: 391.0px; height: 20px; width: 88.0px; -moz-transform: rotate(-149deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(234,234, 234); left: 1233.0px; bottom: 346.0px; height: 20px; width: 70.0px; -moz-transform: rotate(-139deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(164,164, 164); left: 1163.0px; bottom: 398.0px; height: 20px; width: 70.0px; -moz-transform: rotate(-153deg);" onClick="doSomething()"> &nbsp;</div>

<div style="background-color: rgb(57,57, 57); left: 884.0px; bottom: 432.0px; height: 20px; width: 52.0px; -moz-transform: rotate(-2deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(81,81, 81); left: 935.5px; bottom: 434.0px; height: 20px; width: 41.0px; -moz-transform: rotate(-2deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(115,115, 115); left: 976.0px; bottom: 440.0px; height: 20px; width: 48.0px; -moz-transform: rotate(-14deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(164,164, 164); left: 1021.5px; bottom: 460.0px; height: 20px; width: 81.0px; -moz-transform: rotate(-20deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(115,115, 115); left: 977.0px; bottom: 435.0px; height: 20px; width: 52.0px; -moz-transform: rotate(-3deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(81,81, 81); left: 936.0px; bottom: 437.0px; height: 20px; width: 50.0px; -moz-transform: rotate(-10deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(115,115, 115); left: 984.5px; bottom: 446.0px; height: 20px; width: 39.0px; -moz-transform: rotate(-12deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(40,40, 40); left: 842.5px; bottom: 441.0px; height: 20px; width: 35.0px; -moz-transform: rotate(-7deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(57,57, 57); left: 878.0px; bottom: 445.0px; height: 20px; width: 36.0px; -moz-transform: rotate(-5deg);" onClick="doSomething()"> &nbsp;</div>

<div style="background-color: rgb(81,81, 81); left: 914.0px; bottom: 449.0px; height: 20px; width: 90.0px; -moz-transform: rotate(-4deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(115,115, 115); left: 1004.0px; bottom: 454.0px; height: 20px; width: 20.0px; -moz-transform: rotate(-12deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(164,164, 164); left: 1015.0px; bottom: 484.0px; height: 20px; width: 98.0px; -moz-transform: rotate(-35deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(115,115, 115); left: 998.5px; bottom: 472.0px; height: 20px; width: 87.0px; -moz-transform: rotate(-28deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(81,81, 81); left: 910.5px; bottom: 461.0px; height: 20px; width: 65.0px; -moz-transform: rotate(-27deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(115,115, 115); left: 965.5px; bottom: 497.0px; height: 20px; width: 75.0px; -moz-transform: rotate(-34deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(20,20, 20); left: 658.5px; bottom: 434.0px; height: 20px; width: 91.0px; -moz-transform: rotate(-67deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(28,28, 28); left: 703.0px; bottom: 496.0px; height: 20px; width: 40.0px; -moz-transform: rotate(-87deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(40,40, 40); left: 704.0px; bottom: 538.0px; height: 20px; width: 44.0px; -moz-transform: rotate(-85deg);" onClick="doSomething()"> &nbsp;</div>

<div style="background-color: rgb(57,57, 57); left: 703.0px; bottom: 578.0px; height: 20px; width: 38.0px; -moz-transform: rotate(-108deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(81,81, 81); left: 696.5px; bottom: 607.0px; height: 20px; width: 25.0px; -moz-transform: rotate(-122deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(115,115, 115); left: 665.5px; bottom: 647.0px; height: 20px; width: 61.0px; -moz-transform: rotate(-104deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(164,164, 164); left: 645.0px; bottom: 711.0px; height: 20px; width: 72.0px; -moz-transform: rotate(-101deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(81,81, 81); left: 694.5px; bottom: 610.0px; height: 20px; width: 31.0px; -moz-transform: rotate(-111deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(115,115, 115); left: 680.0px; bottom: 644.0px; height: 20px; width: 40.0px; -moz-transform: rotate(-104deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(57,57, 57); left: 675.0px; bottom: 602.0px; height: 20px; width: 86.0px; -moz-transform: rotate(-103deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(81,81, 81); left: 671.0px; bottom: 677.0px; height: 20px; width: 66.0px; -moz-transform: rotate(-98deg);" onClick="doSomething()"> &nbsp;</div>
<div style="background-color: rgb(115,115, 115); left: 660.0px; bottom: 753.0px; height: 20px; width: 88.0px; -moz-transform: rotate(-85deg);" onClick="doSomething()"> &nbsp;</div>	
	</div>

</body>
</html>

Style.css:

CSS: 
@CHARSET "UTF-8";

.tree div{
			-moz-border-radius: 10px;
			background-color: black;
			position: absolute;
		}
.tree div:hover{
			background-color: red;
			width: 200px;
		}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück