Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dwukolumnowy layout - rozjeżdżająca się kolumna
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
ThePunisher
23.04.2011, 16:00:35
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 
  1. <div id="contentzone">
  2.   <table cellspacing="0" cellpadding="0">
  3.     <tr>
  4.       <td id="contentLG"></td>
  5.       <td id="contentSG"</td>
  6.       <td id="contentPG"</td>
  7.     </tr>
  8.     <tr>
  9.       <td id="contentLS"</td>
  10.       <td id="contentCONT">
  11.         <!-- tutaj treść strony -->
  12.       </td>
  13.       <td id="contentPS"</td>
  14.     </tr>
  15.     <tr>
  16.       <td id="contentLD"</td>
  17.       <td id="contentSD"</td>
  18.       <td id="contentPD"</td>
  19.     </tr>
  20.   </table>
  21. </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 
  1.     <div id="ornament_left"></div>
  2.     <div id="contentzone">
  3.       <table cellspacing="0" cellpadding="0">
  4.         <tr>
  5.           <td id="contentLGn"></td>
  6.           <td id="contentSGn"></td>
  7.           <td id="contentPGn"></td>
  8.         </tr>
  9.         <tr>
  10.           <td id="contentLSn"></td>
  11.           <td id="contentCONT">
  12.             <div id="titlecont">Tytuł strony</div><br>
  13.             <div id="ornament">................................................................................
    .........................................................................</div><br><br>
  14.             <div id="paragraphcont">Treść strony</div>
  15.           </td>
  16.           <td id="contentPSn"></td>
  17.         </tr>
  18.         <tr>
  19.           <td id="contentLDn"></td>
  20.           <td id="contentSDn"></td>
  21.           <td id="contentPDn"></td>
  22.         </tr>
  23.       </table>
  24.     </div>
  25.     <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
      }
kalipek
24.04.2011, 12:34:34
Cytat(ThePunisher @ 23.04.2011, 17:00:35 ) *
(..) 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
24.04.2011, 17:22:15
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
24.04.2011, 17:53:32
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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.