kills Geschrieben 20. Juli 2004 Geschrieben 20. Juli 2004 Hallo zusammen, ich möchte per Javascript (beim Knopfdruck eines Links) eine Ebene einfahren lassen. Einfach ein/ausblenden kann ich auch, aber ich möchte sie "einfahren" lassen. muss ich das per umständlicher "for-Schleife" mit langsamen inkrementieren der Absoluten position des Layers bewerkstelligen, oder kann ich das auch per z.b. JS-effekt machen, bzw. gibts JS vielleicht schon einen solchen effekt her? Zitieren
etreu Geschrieben 20. Juli 2004 Geschrieben 20. Juli 2004 Soweit ich weiss, darfst du dich selbst darum kümmern. In welche Richtung soll denn der Layer einfahren? Von oben und von links ist leicht. Wenn du von rechts oder von unten einen Layer einfahren lassen möchtest, dann wirds etwas komplizierter. Zitieren
kills Geschrieben 20. Juli 2004 Autor Geschrieben 20. Juli 2004 von unten in den content nach oben einfahren Zitieren
etreu Geschrieben 20. Juli 2004 Geschrieben 20. Juli 2004 1. die höhe der ebene auf 0px setzen und überlauf verstecken (am besten auch noch white-space auf no-wrap setzen 2. die ebene absolute ausrichten => bottom:0px 3. die grösse der ebene erweitern 4. wenn die ebene komplett ist, soweit hochfahren, wie du möchtest. Zitieren
kills Geschrieben 20. Juli 2004 Autor Geschrieben 20. Juli 2004 1. die höhe der ebene auf 0px setzen und überlauf verstecken (am besten auch noch white-space auf no-wrap setzen 2. die ebene absolute ausrichten => bottom:0px 3. die grösse der ebene erweitern 4. wenn die ebene komplett ist, soweit hochfahren, wie du möchtest. was meinst du mit überlauf verstecken? "overflow" ? soweit ichs verstanden habe, setzt ich mich ma drann. Zitieren
etreu Geschrieben 20. Juli 2004 Geschrieben 20. Juli 2004 was meinst du mit überlauf verstecken? "overflow" ? genau. Zitieren
kills Geschrieben 20. Juli 2004 Autor Geschrieben 20. Juli 2004 und warum die höhe auf 0px? Und wie bekomme ich den Layer genauso breit wie meine Tabelle? Meine Tabelle hat width 100%! Wenn ich das bei dem Layer auch mache, dann ignoriert dieser aber natürlich auch meine bodyMargins. Nun habe ich ihm die Margins gleich dem body gesetzt, aber die position ist immer noch nicht die gleiche edit: das mit der layer position hab ich hinbekommen! geht aber nur im Mozilla/FireFox: .margin { left: 7px; right: 7px; } Zitieren
etreu Geschrieben 20. Juli 2004 Geschrieben 20. Juli 2004 Probier es doch mit padding oder margin. Zitieren
kills Geschrieben 20. Juli 2004 Autor Geschrieben 20. Juli 2004 Probier es doch mit padding oder margin. hat kein zweck Zitieren
kills Geschrieben 20. Juli 2004 Autor Geschrieben 20. Juli 2004 <table style="width: 100%"> <tr> <td> mein content </td> </tr> </table> <div style="position: absolute; width: 100%; z-index: 10;"> mein Layer </div> die Tabelle hat aussenherum einen margin von 7px! der layer hat aussenherum kein margin! nun will ich den layer genau über der tabelle positionieren. also mit margin 7px! aber wenn ich nun z.b. um den layer noch ein layer mach mit padding7px, dann wird dieser wenn er ein layer mit width=100% enthält genau 7 px breiter als das bild ist. es entstehen scrollbalken. Zitieren
etreu Geschrieben 20. Juli 2004 Geschrieben 20. Juli 2004 <html> <head> <title>titel</title> </head> <body style="margin:20px; padding:0px;"> <table style="width: 100%; border: solid 1px green;"> <tr> <td> mein content </td> </tr> </table> <div style="position: absolute; width: 100%; z-index: 10; margin:20px; border:solid 1px black; top:0px; left: 0px;"> mein Layer </div> </body> </html> Entspricht das dem, was du erreichen willst? (Getestet mit Opera 7.52) Zitieren
kills Geschrieben 20. Juli 2004 Autor Geschrieben 20. Juli 2004 im IE sieht dein Vorschlag gut aus, aber im Mozilla/FireFox nicht.. Es geschieht bei dir das gleiche, wie bei meinen Versuchen! Der Layer geht bis ganz rechts zum Rand(trotz margin!) Zitieren
kills Geschrieben 22. Juli 2004 Autor Geschrieben 22. Juli 2004 Also ich habs jetzt wie folgt gelöst: CSS: div.latest_infos_moz { position: absolute; z-index: 10; overflow: hidden; white-space: nowrap; bottom: 10px; left: 10px; right: 10px; border: solid 1px black; background-color: green } div.latest_infos_common { position: absolute; z-index: 10; overflow: hidden; white-space: nowrap; bottom: 10px; left: 10px; right: 10px; width: 100%; border: solid 1px black; background-color: green } HTML: <div id="latest_infos" style="visibilty: hidden;"> Layer </div> <!-- setLayerClass --> <script language="JavaScript" type="text/javascript"> var oLayer = fetch_object('latest_infos'); var sClass = is_moz ? 'latest_infos_moz' : 'latest_infos_common'; setClass( oLayer, sClass); </script> Also ich hab mir 2 Klassen angelegt, und je nach Browser dann beim laden der seite die CSS Klasse gesetzt Zitieren
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.