kostenloser Webspace werbefrei: lima-city


Divs mit CSS, Klappe die zweite

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    c****s

    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. 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. 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 Kostenloser Webspace von technofan

    technofan hat kostenlosen Webspace.

    #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

    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?

Über lima-city

Login zum Webhosting ohne Werbung!