Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Złożona tabela oparta na CSS
Forum PHP.pl > Forum > Przedszkole
oomaster
Witam,

Wpadłem na fajny pomysł a zarazem głupi pod względem budowy. Chcę zbudować tabelę jak na poniższej fotce.




Próbowałem coś wymodzić, byłem pewien ,że coś wyjdzie z tego ale kicha...

  1. <div id="top_mm">
  2. <div id="top_mm_a">1</div>
  3. <div id="top_mm_b">2</div>
  4. <div id="top_mm_c">3</div>
  5. <div id="top_mm_d">4</div>
  6. <div id="top_mm_e">5</div>
  7. <div id="top_mm_f">6</div></div>


  1. #top_mm {width:950px;}
  2. #top_mm_a {width:950px;}
  3. #top_mm_b{width: 220px; float: left; overflow: hidden;}
  4. #top_mm_c{width: 730px; float: left; overflow: hidden;}
  5. #top_mm_d {width: 330px; float: left; overflow: hidden;}
  6. #top_mm_e {width: 400px; float: left; overflow: hidden;}
  7. #top_mm_f {clear: both; width: 100%;}


Czy ktoś może pomóc mi rozwiązać ten problem ?
wookieb
Jeżeli nie ma być to szkielet szablonu to do tabelek używa się table oraz odpowiednie atrybuty colspan i rowspan dla td.
Poza tym gorąco polecam http://kurs.browsehappy.pl
megawebmaster
Podział na 3 div'y - górny, środkowy i dolny. W środkowym umieszczasz 2 div'y - lewy i prawy, float: left; W prawym dajesz 2 divy - górny i dolny. Wszystko to pakujesz do div'a Page i ten pozycjonujesz na szerokość, żeby np. było na środku. Reszta position: static i powinno hulać. Pisane z głowy, nie testowane winksmiley.jpg
oomaster
dla jasności to ma być szkielet strony smile.gif

megawebmaster dzięki za pomoc ale nie rozumiem jednej kwestii:

Cytat
pakujesz do div'a Page i [...] Reszta position: static i powinno hulać.
megawebmaster
Chodzi mi o to, że wszystkie te divy, pakujesz do jednego. Żeby wypozycjonować na szerokość winksmiley.jpg Tego właśnie diva pozycjonujesz z position: absolute, a reszcie nie nadajesz żadnego position (domyślnie jest to static).
oomaster
ok, według twojego rozwiązania wszystko się zgadza, Ale czy nie ma łatwiejszego rozwiązania ?
megawebmaster
Ja takiego nie znam. Możliwe, że dałoby się to uzyskać jeszcze jakoś inaczej, stosując mniej div'ów, ale to raczej dla satysfakcji. W ten sposób jestem pewien, że da się to wypozycjonować dokładnie tak jak tego chcę. I na wiele różnych sposobów.
athei
Można i tak:
  1. #top_mm_a {width:950px; background-color:#0F0;}
  2. #top_mm_b{width: 220px; float: left; overflow: hidden; background-color:#CF0;}
  3. #top_mm_c{width: 730px; float: left; overflow: hidden; background-color:#F00;}
  4. #top_mm_d {width: 330px; float: left; overflow: hidden; background-color:#CCC; }
  5. #top_mm_e {width: 400px; float: left; overflow: hidden; background-color:#FC9;}
  6. #top_mm_f {clear: both; width: 950px; background-color:#36F;}
  7. #pom {float:left; width:730px}
  8.  
  9. <div id="top_mm_a">1</div>
  10. <div id="top_mm_b">2</div>
  11. <div id="pom">
  12. <div id="top_mm_c">3</div>
  13. <div id="top_mm_d">4</div>
  14. <div id="top_mm_e">5</div>
  15. </div>
  16. <div id="top_mm_f">6</div>
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.