basti: problem mit css und doctype

SELF-Forum

problem mit css und doctype

basti
– Informationen zu den Bewertungsregeln

Hallo,

ich habe eine HTML-Seite mit 3 Zeilen (div's + css):
1. header 100px hoch,
2. content höhe dynamisch,
3. footer 100px hoch.

die 2.zeile ist "overflow: auto"-definiert.

funktioniert auch alles wunderbar, d.h., die content-zeile kriegt einen scrollbalken bei bedarf - AUSSER wenn ich eine xhtml-doctype-deklaration an den anfang meiner seite stelle, dann kriegt die gesamte seite den scrollbalken.

kann mir jemand helfen?
danke basti

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. problem mit css und doctype

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    ich habe eine HTML-Seite mit 3 Zeilen (div's + css):

    1. header 100px hoch,
    2. content höhe dynamisch,
    3. footer 100px hoch.

    die 2.zeile ist "overflow: auto"-definiert.

    funktioniert auch alles wunderbar, d.h., die content-zeile kriegt einen scrollbalken bei bedarf

    und wann entsteht der bedarf? sprich, mit welcher höhe hast du sie definiert?

    • AUSSER wenn ich eine xhtml-doctype-deklaration an den anfang meiner seite stelle, dann kriegt die gesamte seite den scrollbalken.

    code?

    gruß,
    wahsaga

    --
    Rest in peace, Dimebag!
    #
    "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. problem mit css und doctype

      basti
      – Informationen zu den Bewertungsregeln

      hi wahsaga,

      bei bedarf soll heissen, wenn der inhalt im contentContainer entsprechend groß ist.

      hier der code:

      <html>
      <head>
      <title></title>
      <style type="text/css">
      body
       {
       margin:0px;
       overflow: hidden;
       border: 0px;
       padding-top:114px;
       padding-bottom:10px;
       }

      #logoRight
       {
       position:absolute;
       width:100%;
       height:114px;
       top:0px;
       left:0px;
       background-color:#ff0;
       }

      #contentContainer
       {
       position:relative;
       top:0px;
       left:0px;
       width:100%;
       height:100%;
       background-color:#f90;
       overflow:auto;
       }

      #greenLineBottom
       {
       position: absolute;
       left:0px;
       top: 100%;
       width:100%;
       height:10px;
       margin-top: -10px;
       background-color:#33cc33;
       }
      </style>

      </head>
      <body>
      <div id="logoRight"></div>
      <div id="contentContainer"></div>
      <div id="greenLineBottom"></div>
      </body>
      </html>

      grüße basti

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. problem mit css und doctype

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        body [...]
        padding-top:114px;
        padding-bottom:10px;

        damit haben alle elemente, die im elementfluss belassen werden, also schon mal 114px abstand vom oberen "fensterrand".

        #contentContainer
        {
        position:relative;
        top:0px;

        siehe oben, 114px abstand sind von dir vorgegeben, also laufen 0px versatz von oben zur normalen position des elementes auch wieder auf 114px abstand von oben hinaus.

        left:0px;
        width:100%;
        height:100%;

        114px + 100% sind 114px + 100%

        gruß,
        wahsaga

        --
        Rest in peace, Dimebag!
        #
        "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln