Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Div zamiast tabelki, 9 pokolorowanych prostokątów
JaRoPHP
post
Post #1





Grupa: Zarejestrowani
Postów: 675
Pomógł: 15
Dołączył: 7.11.2004
Skąd: Katowice

Ostrzeżenie: (0%)
-----

[/HTML]Witam!!!

Chcę zrobić układ podobny do tego (ten jest oparty na tabelce):
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  3. <head>
  4. </head>
  5. <body>
  6.  
  7.  
  8. <table border="0" style="width: 75px; height: 75px;" cellpadding="0" cellspacing="1">
  9. <tr>
  10.   <td style="background: #666666; width: 24px; height: 24px"></td>
  11. 	<td style="background: #999999; width: 24px; height: 24px"></td>
  12. 	<td style="background: #CCCCCC; width: 24px; height: 24px"></td>
  13. </tr>
  14. <tr>
  15.   <td style="background: #999999; width: 24px; height: 24px"></td>
  16. 	<td style="background: #CCCCCC; width: 24px; height: 24px"></td>
  17. 	<td style="background: #FFFFFF; width: 24px; height: 24px"></td>
  18. </tr>
  19. <tr>
  20.   <td style="background: #CCCCCC; width: 24px; height: 24px"></td>
  21. 	<td style="background: #FFFFFF; width: 24px; height: 24px"></td>
  22. 	<td style="background: #666666; width: 24px; height: 24px"></td>
  23. </tr>
  24. </table>
  25.  
  26. </body>
  27. </html>
[HTML] pobierz, plaintext


Ale chcę to zrobić za pomocą divów (po tabel nie powinno się używać do formatowania layoutu).
Napisałem coś takiego:

[HTML] pobierz, plaintext 
  1. <div style="position: relative; top: 0px; left: 0px; width: 24px; height: 24px; background-color: #666666;"></div>
  2. <div style="position: relative; top: -24px; left: 25px; width: 24px; height: 24px; background-color: #999999;"></div>
  3. <div style="position: relative; top: -48px; left: 50px; width: 24px; height: 24px; background-color: #CCCCCC;"></div>
  4. <div style="position: relative; top: -47px; left: 0px; width: 24px; height: 24px; background-color: #999999;"></div>
  5. <div style="position: relative; top: -71px; left: 25px; width: 24px; height: 24px; background-color: #CCCCCC;"></div>
  6. <div style="position: relative; top: -70px; left: 0px; width: 24px; height: 24px; background-color: #CCCCCC;"></div>
  7. <div style="position: relative; top: -94px; left: 50px; width: 24px; height: 24px; background-color: #666666;"></div>
[HTML] pobierz, plaintext


ale to działa tylko pod niektórymi przeglądarkami. Pod IE pojawia się dość dużo wolnej przestrzeni - jak się doda div i ramkę to jest to dość widoczne:

[HTML] pobierz, plaintext 
  1. <div style="border: 1px solid #000000;">
  2. <div style="position: relative; top: 0px; left: 0px; width: 24px; height: 24px; background-color: #666666;"></div>
  3. <div style="position: relative; top: -24px; left: 25px; width: 24px; height: 24px; background-color: #999999;"></div>
  4. <div style="position: relative; top: -48px; left: 50px; width: 24px; height: 24px; background-color: #CCCCCC;"></div>
  5. <div style="position: relative; top: -47px; left: 0px; width: 24px; height: 24px; background-color: #999999;"></div>
  6. <div style="position: relative; top: -71px; left: 25px; width: 24px; height: 24px; background-color: #CCCCCC;"></div>
  7. <div style="position: relative; top: -70px; left: 0px; width: 24px; height: 24px; background-color: #CCCCCC;"></div>
  8. <div style="position: relative; top: -94px; left: 50px; width: 24px; height: 24px; background-color: #666666;"></div></div>
[HTML] pobierz, plaintext


(czytając specyfikację, jest to właściwe zachowanie).
Lecz gdy zamknę to w inny div, już powinno być dobrze, ale nie jest.

Mam nadzieję, że ktoś robił juz coś podobnego, i pewno znalazł lepsze rozwiązanie, od zaproponowanego powyżej.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
revyag
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <div style="width:76px">
  2.     <div style="float:left;width:24px;height:24px;background-color: #666666;margin: 0 1px 0 0"></div>
  3.     <div style="float:left;width:24px;height:24px;background-color: #999999;margin: 0 1px 0 0"></div>
  4.     <div style="float:left;width:24px;height:24px;background-color: #cccccc"></div>
  5.     <div style="float:left;width:24px;height:24px;background-color: #999999;margin: 1px 1px 0 0"></div>
  6.     <div style="float:left;width:24px;height:24px;background-color: #cccccc;margin: 1px 1px 0 0"></div>
  7.     <div style="float:left;width:24px;height:24px;background-color: #ffffff;margin: 1px 0 0 0"></div>
  8.     <div style="float:left;width:24px;height:24px;background-color: #cccccc;margin: 1px 1px 0 0"></div>
  9.     <div style="float:left;width:24px;height:24px;background-color: #ffffff;margin: 1px 1px 0 0"></div>
  10.     <div style="float:left;width:24px;height:24px;background-color: #666666;margin: 1px 0 0 0"></div>
  11. </div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
JaRoPHP
post
Post #3





Grupa: Zarejestrowani
Postów: 675
Pomógł: 15
Dołączył: 7.11.2004
Skąd: Katowice

Ostrzeżenie: (0%)
-----

Dzieki serdeczne...
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 22:21
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn