mo: css layout mit fixen größen

SELF-Forum

css layout mit fixen größen

mo Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo zusammen

ich möchten mein Layout von Tabellen auf div-Container umstellen.
Im groben und ganzen habe ich das schon.
Nun möchte ich gerne folgendes:
Oben einen Head-Bereich mit einer Grafik. (feste Höhe 114px)
Am unteren Bildrand einen Bereich mit Änderungsdatum und Textlinks, welcher immer fest positioniert ist.
Links ein Grafisches menue mit einer fixen Breite.
Die Höhen im menue sowie im Content-bereich sollte jedoch variabel sein.
Ebenso die Breite des Content-Bereiches, welcher über die ganze Bildschirmbreite gehen sollte(abzüglich Menue).

Mein Stylesheet:

img{
    vertical-align:bottom;
  }
   html, body {
    height: 100%;
    margin: 0;
    padding:0;
  }
  #kopfzeile1{
    position:absolute; top:0; left:0;
    width:100%;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: x-small;
    color: #000;
    background-image:url(../images/oben_black_01.gif);
    background-repeat:repeat-x;
  }
  #kopfzeile2{
    position:absolute; top:60; left:0;
    width:100%;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: x-small;
    color: #000;
    background-image:url(../images/oben_black_02.gif);
    background-repeat:repeat-x;
  }
  #abstand{
    position:absolute; top:104; left:0;
    width:100%;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 2pt;
    color: #000;
    background-color:#66cc99;
    background:#66cc99;
  }
  #navigation{
    position:absolute; top:114; left:0;
    padding: 0;
    margin: 0;
    border: 0;
    height: 100%;
    background-image:url(../images/schraffur.gif);
    background-repeat:repeat-y;
    width: 165px;
}
  #inhalt{
    position:absolute; top:114px; left:165px;
    height:80%;
    width:100%;
    margin:0;
    padding:0;
    overflow:auto;
    background: #66cc99;
  }
  #fusszeile{
    background:gainsboro;
    position:absolute; bottom:0; left:0;
    width:100%;
    height:10%;
    margin:0;
    padding:0;
}
  #titelgrafik{
    float: left;
    white-space:nowrap;
    padding: 0 0%;
    margin: 0;
    border: 0;
    font-size: small;
    font-weight: bold;
    color: #fff;
    background: #666;
  }

Wie bekomme ich das hin?

Danke im voraus

MO

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. css layout mit fixen größen

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    ich möchten mein Layout von Tabellen auf div-Container umstellen.
    Im groben und ganzen habe ich das schon.
    Nun möchte ich gerne folgendes: [...]

    Wie bekomme ich das hin?

    woher sollen wir das wissen?

    du sagst uns ja noch nicht einmal, was du bisher an HTML-code hast, und wie es damit aussieht ...

    gruss,
    wahsaga

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. css layout mit fixen größen

      mo Homepage des Autors
      – Informationen zu den Bewertungsregeln

      du sagst uns ja noch nicht einmal, was du bisher an HTML-code hast, und wie es damit aussieht ...

      Oh sorry...klar.
      Mein HTML-Code:

      <body>
      <!-- ###Osteo_Dokument### //-->
      <div id="kopfzeile1"><img src="images/oben_01.gif" width="165" height="60" border="0" alt=""><img src="images/oben_02.gif" width="47" height="60" border="0" alt=""><img src="images/oben_03.gif" width="138" height="60" border="0" alt=""><img src="images/oben_04.gif" width="200" height="60" border="0" alt=""><img src="images/oben_05.gif" width="211" height="60" border="0" alt="">
      </div>
      <div id="kopfzeile2"><img src="images/oben_06.gif" width="165" height="44" border="0" alt=""><img src="images/oben_07.gif" width="47" height="44" border="0" alt=""><img src="images/oben_08.gif" width="138" height="44" border="0" alt=""><img src="images/oben_09.gif" width="200" height="44" border="0" alt=""><img src="images/oben_10.gif" width="211" height="44" border="0" alt="">
      </div>
      <div id="abstand"><img src="images/links_oben_01.gif" width="165" height="10" border="0" alt=""><img src="images/links_oben_02.gif" width="47" height="10" border="0" alt="">
      </div>
      <div id="navigation">###menue_links###
      </div>
      <div id="inhalt">###contents###
      </div>
      <div id="fusszeile">Hier steht der Fusszeilentext
      </div>
      <!-- ###Osteo_Dokument### //-->
      </body>

      Anschauen kann man sich das ganze unter:
      http://www.suppanz.de/html/index.php?id=1

      Bin aber noch am experimentieren.......

      Gruß

      MO

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln