ich steh grad mal wieder aufm schlauch und es ist mir warm, deshalb komm ich einfach nich drauf:
ich habe ein 3 divs die wie folgt positioniert werden sollen:
<div id="1">
<div id="2"></div><div id="3"></div>
</div>
div 1 hat eine variable größe.
div 3 hat eine feste größe und soll oben rechts stehen.
div 2 soll oben stehen und den bereich bis zum div 3 ausfüllen
was zur hölle muss ich tun O.O
wichtig ist noch: div3 darf nicht innerhalb von div 2 stehen...
Vollständige Version anzeigen: [gelöst] divs positionieren
hä? mal ma uff. und lern ma css :P
so?
HTML
<div class="window" style="width:300px;height:150px;border:1px solid #000;">
<div class="menubar" style="background-color:#00f;height:20px;">
<div class="window-title" style="float:left;color:#fff;">Schweinefenster 1.0</div>
<div class="window-handler" style="float:right;"><a href="#" style="display:block;width:20px;height:20px;background-color:#f00;"></a></div>
</div>
<div class="window-content">
Hier koennen dann schweineviele Schweineelemente rein...<br />
Und schweinegeil gestylt werden kann das natuerlich auch noch...<br />
</div>
</div>
<div class="menubar" style="background-color:#00f;height:20px;">
<div class="window-title" style="float:left;color:#fff;">Schweinefenster 1.0</div>
<div class="window-handler" style="float:right;"><a href="#" style="display:block;width:20px;height:20px;background-color:#f00;"></a></div>
</div>
<div class="window-content">
Hier koennen dann schweineviele Schweineelemente rein...<br />
Und schweinegeil gestylt werden kann das natuerlich auch noch...<br />
</div>
</div>
fast... der handler is der titel-dv und das rote is nur zum schließen gedacht... ich probiers nochma, hab das aber glaub ich vorhin schonmal so gehabt
€: geht natürlich nicht. das blaue muss vom linken rand bis zum roten gehen. denn das ist mein handler zum verschieben des fensters. es darf aber auch nicht unterm roten sein, weil sonst beim klicken aufs rote zwei animationen laufen und es dann nur wild flackert...
€: geht natürlich nicht. das blaue muss vom linken rand bis zum roten gehen. denn das ist mein handler zum verschieben des fensters. es darf aber auch nicht unterm roten sein, weil sonst beim klicken aufs rote zwei animationen laufen und es dann nur wild flackert...
so, habs hinbekommen. falls sowas mal wieder jemand braucht:
<html>
<head>
<title> schweinetest </title>
</head>
<body>
<div id="statusdiv" style="visibility:hidden;">MOVING</div>
<div id="dndArea" style="background: url('bg.jpg');
width:1004px; height:748px; border:1px solid black;
margin:10px; padding:10px; text-align:left;">
<div id="window1icon" class="icons" style="text-align:center;
display:inline-block;">
<img src="icon48.png" style="width:48px; height:48px;"/>
</br>Schweinefenster 1.0
</div>
<div id="window1" style="
background:white; border:1px solid black;
visibility:hidden; width:640px; height:480px;">
<div id="window1titlebar" style="height:32px; width:100%;
text-align:center;
margin:bottom:10px; border-bottom:1px solid black;">
<div id="window1close" style="float:right;
height:32px; width:32px;
background-color:red;">X</div>
<div id="window1titleicon" style="float:left; height:32px; width:32px;
background:green;">O</div>
<div id="window1Handler" style="background:blue; height:32px;
color:white;">Schweinefenster!</div>
</div>
<div id="window1content">
Hier koennen dann schweineviele Schweineelemente rein...</br>
Und schweinegeil gestylt werden kann das natuerlich auch noch...</br>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad:true">
</script>
<script>
dojo.require("dojo.dnd.Moveable");
dojo.require("dojo.fx");
dojo.require("dojo._base.fx");
dojo.addOnLoad(function () {
hideWindow();
var dnd1 = new dojo.dnd.Moveable(dojo.byId('window1'),
{ handle : dojo.byId('window1Handler') });
var dnd2 = new dojo.dnd.Moveable(dojo.byId('window1icon'));
dojo.connect(dojo.byId('window1icon'),
'ondblclick', showWindow);
dojo.connect(dojo.byId('window1close'),
'onclick', hideWindow);
dojo.connect(dnd1, 'onMoveStart', windowMovingStarts);
dojo.connect(dnd1, 'onMoveStop', windowMovingStops);
});
function showWindow() {
dojo.style("window1", "visibility", "visible");
dojo.fadeIn({node : "window1"}).play();
}
function hideWindow() {
var anim = dojo.fadeOut({node : "window1"});
dojo.connect(anim,"onEnd", function() {
dojo.style("window1", "visibility", "hidden");});
anim.play();
}
function windowMovingStops() {
dojo.style("statusdiv", "visibility", "hidden");
var anim = dojo.animateProperty({node:"window1", delay:10,
properties: { opacity: {
end:1.0}}});
anim.play();
}
function windowMovingStarts() {
dojo.style("statusdiv", "visibility", "visible");
var anim = dojo.animateProperty({node:"window1", delay:10,
properties: { opacity: {
end:0.5}}});
anim.play();
}
</script>
</html>
CODE
<html>
<head>
<title> schweinetest </title>
</head>
<body>
<div id="statusdiv" style="visibility:hidden;">MOVING</div>
<div id="dndArea" style="background: url('bg.jpg');
width:1004px; height:748px; border:1px solid black;
margin:10px; padding:10px; text-align:left;">
<div id="window1icon" class="icons" style="text-align:center;
display:inline-block;">
<img src="icon48.png" style="width:48px; height:48px;"/>
</br>Schweinefenster 1.0
</div>
<div id="window1" style="
background:white; border:1px solid black;
visibility:hidden; width:640px; height:480px;">
<div id="window1titlebar" style="height:32px; width:100%;
text-align:center;
margin:bottom:10px; border-bottom:1px solid black;">
<div id="window1close" style="float:right;
height:32px; width:32px;
background-color:red;">X</div>
<div id="window1titleicon" style="float:left; height:32px; width:32px;
background:green;">O</div>
<div id="window1Handler" style="background:blue; height:32px;
color:white;">Schweinefenster!</div>
</div>
<div id="window1content">
Hier koennen dann schweineviele Schweineelemente rein...</br>
Und schweinegeil gestylt werden kann das natuerlich auch noch...</br>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad:true">
</script>
<script>
dojo.require("dojo.dnd.Moveable");
dojo.require("dojo.fx");
dojo.require("dojo._base.fx");
dojo.addOnLoad(function () {
hideWindow();
var dnd1 = new dojo.dnd.Moveable(dojo.byId('window1'),
{ handle : dojo.byId('window1Handler') });
var dnd2 = new dojo.dnd.Moveable(dojo.byId('window1icon'));
dojo.connect(dojo.byId('window1icon'),
'ondblclick', showWindow);
dojo.connect(dojo.byId('window1close'),
'onclick', hideWindow);
dojo.connect(dnd1, 'onMoveStart', windowMovingStarts);
dojo.connect(dnd1, 'onMoveStop', windowMovingStops);
});
function showWindow() {
dojo.style("window1", "visibility", "visible");
dojo.fadeIn({node : "window1"}).play();
}
function hideWindow() {
var anim = dojo.fadeOut({node : "window1"});
dojo.connect(anim,"onEnd", function() {
dojo.style("window1", "visibility", "hidden");});
anim.play();
}
function windowMovingStops() {
dojo.style("statusdiv", "visibility", "hidden");
var anim = dojo.animateProperty({node:"window1", delay:10,
properties: { opacity: {
end:1.0}}});
anim.play();
}
function windowMovingStarts() {
dojo.style("statusdiv", "visibility", "visible");
var anim = dojo.animateProperty({node:"window1", delay:10,
properties: { opacity: {
end:0.5}}});
anim.play();
}
</script>
</html>
Holla...
das kann doch keiner lesen^^
warum trennst du HTML und CSS nicht?
Ach und zumindest hier fehlt <!doctype html> damit der IE weiß dass das html sein soll
das kann doch keiner lesen^^
warum trennst du HTML und CSS nicht?
Ach und zumindest hier fehlt <!doctype html> damit der IE weiß dass das html sein soll
Nichts gegen dich, aber wenn ich den Code und zusätzlich den Code im Zusammenhang mit dem geschilderten Problem sehe, denke ich wirklich das du vielleicht den Berufszweig wechseln solltest ...
Zitat(sn3ek @ 12 Jul 2010, 23:03)
Holla...
das kann doch keiner lesen^^
warum trennst du HTML und CSS nicht?
Ach und zumindest hier fehlt <!doctype html> damit der IE weiß dass das html sein soll
das kann doch keiner lesen^^
warum trennst du HTML und CSS nicht?
Ach und zumindest hier fehlt <!doctype html> damit der IE weiß dass das html sein soll
das is doch nur zum probieren...
Zitat(I.I @ 12 Jul 2010, 23:53)
Nichts gegen dich, aber wenn ich den Code und zusätzlich den Code im Zusammenhang mit dem geschilderten Problem sehe, denke ich wirklich das du vielleicht den Berufszweig wechseln solltest ...
los nimm deine pillen du vogel
nicht dass ich zum thema was beitragen könnte (web is nich so meins) aber habe mir den link trotzdem mal angeschaut. find das recht cool mit dem fenster dort. aber nur eine frage: soll man das fenster auch außerhalb des "desktops" (also dieser rahmen mit windows-hintergrund) dort verschieben können?
das is momentan egal ob das da drüber schiebbar ist. später wird der "desktop" eh das ganze browserfenster sein...
ziel der übung ist daß am ende dojo-mäßige widgets rauskommen die ich dann anderweitig verwenden kann...
als nächstes wird noch das resizen des fensters ausprobiert...
ziel der übung ist daß am ende dojo-mäßige widgets rauskommen die ich dann anderweitig verwenden kann...
als nächstes wird noch das resizen des fensters ausprobiert...
resizing funzt auch... allerdings noch nicht besonders schön...