Dwukolumnowy layout - rozjeżdżająca się kolumna, Kolumny: lewa - menu (float:left), prawa - treść (zagnieżdżona tabela) Opcje

[ThePunisher]

Witam wszystkich forumowiczów, to mój pierwszy post na tym forum.

Od niedawna borykam się z dosyć specyficznym przypadkiem. Tworzę layout (dwukolumnowy) na potrzeby strony internetowej wspólnoty katolickiej (od razu zaznaczam - tworzę layout pod działający w PHP/MySQL system L.safeCMS, obecnie mało popularny).

O ile wszystkie elementy jakoś mi się ułożyły, o tyle mam problem z poprawnym spozycjonowaniem, a jeszcze bardziej - z rozciągnięciem - div'a treści właściwej.

Div ów zawiera zagnieżdżoną tabelę, której jedynym zadaniem jest dopasowywać elementy grafiki do szerokości / wysokości strony. (Layout tworzony jest w systemie autoskalowania w zależności od rozdzielczości. Rozciągać się ma właśnie div zawartości.)

Kod HTML:

[HTML] pobierz, plaintext 
<div id="contentzone">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td id="contentLG"></td>
      <td id="contentSG"</td>
      <td id="contentPG"</td>
    </tr>
    <tr>
      <td id="contentLS"</td>
      <td id="contentCONT">
        <!-- tutaj treść strony -->
      </td>
      <td id="contentPS"</td>
    </tr>
    <tr>
      <td id="contentLD"</td>
      <td id="contentSD"</td>
      <td id="contentPD"</td>
    </tr>
  </table>
</div>
[HTML] pobierz, plaintext 

W CSS mam tak:

Kod

  #contentzone {
    position: relative;
    left: 40px;
    top: -15px;
    margin-right: 40px
  }
  #contentzone table {
    table-layout: fixed
  }
  #contentLG {
    background: url(i/content_lg.png) no-repeat;
    width: 15px;
    height: 15px
  }
  #contentSG {
    background: url(i/content_sg.png) repeat-x;
    width: auto;
    height: 15px
  }
  #contentPG {
    background: url(i/content_pg.png) no-repeat;
    width: 15px;
    height: 15px
  }
  #contentLS {
    background: url(i/content_ls.png) repeat-y;
    width: 15px;
    height: auto
  }
  #contentCONT {
    background-color: #89AABB;
  }
  #contentPS {
    background: url(i/content_ps.png) repeat-y;
    width: 15px;
    height: auto
  }
  #contentLD {
    background: url(i/content_ld.png) no-repeat;
    width: 15px;
    height: 15px
  }
  #contentSD {
    background: url(i/content_sd.png) repeat-x;
    width: auto
    height: 15px
  }
  #contentPD {
    background: url(i/content_pd.png) no-repeat;
    width: 15px;
    height: 15px
  }

Przed tą konstrukcją jest jeszcze sidemenu (float: left) i dwa ozdobniki (lewy górny i prawy dolny róg contentzone).

Tabela nie chce się za Chiny ludowe zmaksymalizować do rozmiaru div'a, w którym się znajduje. O dziwo, w IE maksymalizuje się dobrze. Następna sprawa: ozdobniki schodzą mi się w jednej linii, mimo, że drugi dostaje right: 20px (obydwa mają position: relative, pozycjonowanie absolutne na sto procent się nie sprawdzi, bo wysokość pola treści będzie zmienna).

Nie wiem, jak sobie z tym poradzić, siedzę od ponad 10 godzin i próbuję to złożyć. Szukam w Internecie, niestety, na próżno. Może ktoś z Was wie, jak to skonstruować? W razie potrzeby mogę podrzucić pełny kod.

----

EDIT: Problem rozwiązany po dłuższej (10 godzin) mordędze metodą prób i błędów.

Rozwiązanie: Dodałem width: 100% do tabeli i zmieniłem układ CSS, aby contentzone miało wyrażoną szerokość (żeby działała poprzednia dyrektywa). Floatnąłem ozdobnik prawy do prawej, marginesy ujemne. Działa pod wszystkimi browserami, w tym IE.

Kody HTML i CSS poniżej:

[HTML] pobierz, plaintext 
    <div id="ornament_left"></div>
    <div id="contentzone">
      <table cellspacing="0" cellpadding="0">
        <tr>
          <td id="contentLGn"></td>
          <td id="contentSGn"></td>
          <td id="contentPGn"></td>
        </tr>
        <tr>
          <td id="contentLSn"></td>
          <td id="contentCONT">
            <div id="titlecont">Tytuł strony</div><br>
            <div id="ornament">................................................................................
.........................................................................</div><br><br>
            <div id="paragraphcont">Treść strony</div>
          </td>
          <td id="contentPSn"></td>
        </tr>
        <tr>
          <td id="contentLDn"></td>
          <td id="contentSDn"></td>
          <td id="contentPDn"></td>
        </tr>
      </table>
    </div>
    <div id="ornament_right"></div>
[HTML] pobierz, plaintext 

Kod

      #ornament_left {
        background: url(i/ornament_up.png);
        position: relative;
        margin-left: 260px;
        left: 20px;
        top: 10px;
        width: 67px;
        height: 65px
      }
      #ornament_right {
        background: url(i/ornament_down.png);
        position: relative;
        float: right;
        right: 20px;
        top: -80px;
        width: 69px;
        height: 65px
      }
      #contentzone {
        position: relative;
        top: -35px;
        margin-left: 260px;
        padding-right: 80px
      }
      #contentzone table {
        table-layout: fixed;
        width: 100%;
        position: relative;
        left: 40px
      }
      #contentLGn {
        width: 15px;
        height: 15px;
        background: url(i/content_lg.png) no-repeat
      }
      #contentSGn {
        width: auto;
        height: 15px;
        background: url(i/content_sg.png) repeat-x
      }
      #contentPGn {
        width: 15px;
        height: 15px;
        background: url(i/content_pg.png) no-repeat
      }
      #contentLSn {
        width: 15px;
        height: auto;
        background: url(i/content_ls.png) repeat-y
      }
      #contentCONT {
        background-color: #DAAA39;
      }
      #contentPSn {
        width: 15px;
        height: auto;
        background: url(i/content_ps.png) repeat-y
      }
      #contentLDn {
        width: 15px;
        height: 15px;
        background: url(i/content_ld.png) no-repeat
      }
      #contentSDn {
        width: auto;
        height: 15px;
        background: url(i/content_sd.png) repeat-x
      }
      #contentPDn {
        width: 15px;
        height: 15px;
        background: url(i/content_pd.png) no-repeat
      }
      #titlecont {
        display: inline;
        font-family: Arial;
        font-size: 25pt;
        font-style: italic;
        font-weight: bold;
      }
      #ornament {
        margin-top: -5px;
        padding-top: 0;
        font-size: 8pt;
        font-weight: bold;
        color: #A67A42
      }
      #paragraphcont {
        font-family: Book Antiqua;
        font-size: 14pt
      }

Ten post edytował ThePunisher 23.04.2011, 23:49:14

[kalipek]

(..) tabelę, której jedynym zadaniem jest dopasowywać elementy grafiki do szerokości / wysokości strony. (..)

Jedynym zadaniem tabel jest prezentacja danych tabelarycznych! Robisz sobie kuku na własne życzenie!

[ThePunisher]

A zatem dochodzi następny kłopot. Nie za bardzo wiem, jak sporządzić na divach taką konstrukcję. Tu mam przynajmniej konkretne wymiary zaklepane. Strona w pełni zdaje testy zgodności z HTML 4.01 Strict i CSS3 na walidatorach W3C. (Mówię już o stronie z poprawkami.)

[kalipek]

Kłopot będzie miała osoba, która będzie musiała kiedyś zmieniać coś w Twojej misternej konstrukcji - o ile zajdzie taka potrzeba. Dla Ciebie w tej chwili to bez różnicy, chyba że notorycznie używasz tabel do takich celów - w takim wypadku skorzystaj po prostu z dobrego kursu CSS (np http://www.amazon.com/Getting-StartED-with...=A2ZHC53Q5OYSS4 ).

Walidator nie jest w stanie sprawdzić do czego używasz tabel.