Koncept strony www

http://zapodaj.net/13db5046438ae.png.html

w zamieszczonym linku widać szare pole na którym są białe linie(równa siatka 5 kolumn, 4 wierszy(zewnętrzne kolumny węższe)). Nie widać wszystkich białych linii ponieważ są przysłonięte przez czerwone pola, w których będzie treść.

Jak zrobić te białe linie aby możliwe było nałożenie na nie później tych czerwonych pol?

Wpadłem na dwa pomysły:
1a. zrobić siatkę białych linii jako divy z kolorem tła transparent i białym obramowaniem, jednak późniejsze umieszczanie czerwonych pól będzie chyba niemożliwe.
1b. rozwinięcie pierwszego pomysłu: tworząc nieregularne kolumny tzn gdzie nie gdzie robić po 3 kolumny, 4, lub 5. wtedy ładnie dopasowały by się te czerwone pola jednak w pewnych miejscach będzie brakować białych linii.

2. zrobić szare tło z liniami jako jpg, ustawić jako tło, a na to wstawiać divy z czerwonymi polami. Jednak myślę, że przy zmianie rozmiaru strony całość będzie się rozjeżdżać jak szalona.

Dodam jeszcze że to szare tło i tak będzie musiało być jakimś obrazem bo nie będzie jednolicie szare ale ma tonalnie jaśnieć do środka.

tam w drugim rzedzie te trzy czerwone bloki sa oddzielone szarym obramowaniem o roznej grubosci??i czy one sa w ogóle cale z szarym obramowaniem czy ci sie w paincie zle wypelnilo?? tak samo w trzecim rzedzie ten dlugi czerwony pas ma odstepy od bialego obramowania gdzie przeswituje szary -> tak ma byc czy niedopracowane??

w drugim rzędzie 3 czerwone bloki sa takie same i leżą w tej samej odległości od siebie, zajmują dwa pola szare(wg podziału białymi liniami) - nie postarałem się w przygotowaniu tego schematu wybacz.

długi czerwony pas tak ma być, mają być odstępy. Mówię, jeśli połączyć to w jeden kontener (szare pola) to nie było by problemów ale wtedy nie będzie tych białych linii, a one mają tworzyć, że tak powiem.. wartość artystyczną.

EDIT:
Kurcze, chyba najlepiej byłoby to zrobić w grafice, tzn szare tło razem z liniami, o szerokości 1000 px i na to nakładać resztę, z tym że czy nie będzie problemów z zachowaniem spójności przy zmianie rozdzielczości?

co do zachowania spojnosci to jesli strona ma byc responsywna to bloczki powinny przeskakiwac jeden pod drugi, ale wtedy to szaro-czerwone z wartoscia artystyczna bierze w leb. a jak bedzie statyczne to i tak bedzie trzeba przewijac.

a jak to zrobic, normalnie.

kazdy bloczek to div z obramowaniem i kolorem tla. Pamietaj ze obramowanie mozesz ustalic czy ma byc prawe, lewe czy wszedzie dookola.wiec ta wartosc artystyczna zrob tak:

1 dlugi czerowny blok to div z czerwonym tlem i szarym obramowaniem bez obramowania dolnego, a trzy szare pod nim maja obramowanie na zasadzie(liczac od lewej) pierwszy ma prawe biale obramowanie, drugi ma prawe biale a trzeci nie ma wcale. zas biale obramowanie otaczajace ta wartosc artystyczna to bedzie obramowanie z blokow sasiadujacych.

Moze najpierw cos skrobnij w css i html i wtedy powiedz gdzie masz klopot. latwiej i szybciej bedzie nam przerobic css lub pokazac gdzie przerobic niz bawic sie w projekty graficzne, ktore malowane w paincie nie do konca moga byc szczegolowe.