kostenloser Webspace werbefrei: lima-city

Divs mit CSS, Klappe die zweite

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   c****s

   20:54, 5.8.2009

   Ich hab ein ähnliches Problem wie n0x3l, nur hoffe ich, dass meines noch trivialer ist.
   Ich habe leider nicht wirklich den Plan von CSS weshalb ich euch bitte, mir zu zeigen, wie man dies sauber und einfach löst. Workarounds habe ich selbst schon gefunden, aber keine saubere Lösung. Wahrscheinlich ist es eh so einfach, dass ihr darüber lacht:
   
   Ich möchte 3 Divs:
   
   Das erste namens "Header" soll über die gesamte Breite des Browsers gehen und die Höhe 200px haben.
   Das zweite namens "Canvas" soll über die gesamte Breite des Browsers gehen und den Rest der Höhe einnehmen.
   Das dritte namens "Content" soll innerhalb von "Canvas" liegen und an den vier Seiten 5% Abstand zu seinem Elternteil haben.
   Der eigentliche Inhalt der Seite kommt in Content rein. Bei langem Inhalt (overflow) sollen alle drei Divs an Ort und Stelle bleiben und nicht die Größe ändern, allein Content soll Scrollbars erhalten.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. w******s

   21:57, 5.8.2009

   census schrieb:
   Das erste namens "Header" soll über die gesamte Breite des Browsers gehen und die Höhe 200px haben.
   Das zweite namens "Canvas" soll über die gesamte Breite des Browsers gehen und den Rest der Höhe einnehmen.
   Das dritte namens "Content" soll innerhalb von "Canvas" liegen und an den vier Seiten 5% Abstand zu seinem Elternteil haben.
   Der eigentliche Inhalt der Seite kommt in Content rein. Bei langem Inhalt (overflow) sollen alle drei Divs an Ort und Stelle bleiben und nicht die Größe ändern, allein Content soll Scrollbars erhalten.

   
   
   

   /*---Reset---*/
   * {margin:0;padding:0;border:0;}
   body {width:100%; height:100%;}
   #header {
   width: 100%;
   height:200px;
   position: relative;
   }
   
   #canvas {
   width:100%;
   height:100%;
   padding:5%;
   }
   
   #content {
   width:100%;
   height:100%;
   overflow:scroll;
   }

   
   
   Erst mal: Kein Garantie!
   Einfach mal ausprobieren, wenn noch en Fehler besteht, hochladen und dann kann man sicherlich gut mit Firebug testen.

4. nikic

   

   nikic hat kostenlosen Webspace.

   22:04, 5.8.2009

   Wenn ich mich nicht irre, dann sind 100% auch wirklich 100% und nicht 100% - 200px. Also hätte man so einen 200px Überhang unten.
   
   Ich glaube da müsste man ein klein wenig was mit margin-top/bottom basteln um die 200 abzuziehen.
   Villeicht test ich das mal gleich...

5. technofan

   Moderator

   technofan hat kostenlosen Webspace.

   13:33, 6.8.2009

   #header {
     position:fixed;
     top:0px;
     left:0px;
     right:0px;
     height:200px;
   }
   #canvas {
     position:fixed;
     top:200px;
     left:0px;
     right:0px;
     bottom:0px;
   }
   #content {
   width:100%;
   height:100%;
   margin: 5%;
   overflow:scroll;
   }

   
   
   Klappt bei allen browsern, nur mal wieder net im IE6... da kannst du dein Vorhaben nur mit JS lösen.
   
   Beitrag zuletzt geändert: 6.8.2009 13:38:25 von technofan
6. Autor dieses Themas

   c****s

   10:41, 7.8.2009

   Danke technofan. Hatte mir schon gedacht, dass das ganze trivial ist.

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?