[CSS] Złożona tabela oparta na CSS Opcje

[oomaster]

Witam,

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

(IMG:http://img408.imageshack.us/img408/6747/beznazwy2.gif)


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

[HTML] pobierz, plaintext 
<div id="top_mm">
<div id="top_mm_a">1</div>
<div id="top_mm_b">2</div>
<div id="top_mm_c">3</div>
<div id="top_mm_d">4</div>
<div id="top_mm_e">5</div>
<div id="top_mm_f">6</div></div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#top_mm {width:950px;}
#top_mm_a {width:950px;}
#top_mm_b{width: 220px; float: left; overflow: hidden;}
#top_mm_c{width: 730px; float: left; overflow: hidden;}
#top_mm_d {width: 330px; float: left; overflow: hidden;}
#top_mm_e {width: 400px; float: left; overflow: hidden;}
#top_mm_f {clear: both; width: 100%;}
[HTML] pobierz, plaintext 

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

Ten post edytował wookieb 4.05.2009, 14:39:19

[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 (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[oomaster]

dla jasności to ma być szkielet strony (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

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

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ść (IMG:http://forum.php.pl/style_emoticons/default/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:

[HTML] pobierz, plaintext 
#top_mm_a {width:950px; background-color:#0F0;}
#top_mm_b{width: 220px; float: left; overflow: hidden; background-color:#CF0;}
#top_mm_c{width: 730px; float: left; overflow: hidden; background-color:#F00;}
#top_mm_d {width: 330px; float: left; overflow: hidden; background-color:#CCC; }
#top_mm_e {width: 400px; float: left; overflow: hidden; background-color:#FC9;}
#top_mm_f {clear: both; width: 950px; background-color:#36F;}
#pom {float:left; width:730px}
 
<div id="top_mm_a">1</div>
<div id="top_mm_b">2</div>
<div id="pom">
  <div id="top_mm_c">3</div>
  <div id="top_mm_d">4</div>
  <div id="top_mm_e">5</div>
</div>
<div id="top_mm_f">6</div>
[HTML] pobierz, plaintext