div.hover & positioning probleme. @ tutorials.de: Tutorials, Forum & Hilfe

klanawagna · 11.03.11 06:27

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-Code:

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

Code css:

1	.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

franz007 · 11.03.11 10:50

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-Code:

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

klanawagna · 11.03.11 12:16

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.

klanawagna · 14.03.11 09:22

Bei folgendem Code funktioniert es immer noch nicht.

HTML-Code:

<!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:

Code css:

@CHARSET "UTF-8";
 
.tree div{
            -moz-border-radius: 10px;
            background-color: black;
            position: absolute;
        }
.tree div:hover{
            background-color: red;
            width: 200px;
        }

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Problem mit CSS Design und Myspace (positioning im IE)

korrektes div positioning

korrektes div positioning

Hover-Probleme

probleme mit a:hover...

E-Mail:

Abonnieren Abbestellen