Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] tabela/ramka
Forum PHP.pl > Forum > Przedszkole
Michał90
28.07.2010, 12:41:56
Witam,
Jak zrobić taką ramkę/tabele opartą o div + css



Pozdrawiam
dg2001
28.07.2010, 12:49:32 
[CSS] pobierz, plaintext 
  1. #strona {
  2. width: 900px;
  3. margin: 0 auto;
  4. }
  5.  
  6. .tab1 {
  7. float: left;
  8. size: 200px;
  9. }
  10. .tab2 {
  11. float: left;
  12. size: 500px;
  13. }
  14.  
  15. .tab3 {
  16. float: left;
  17. size: 200px;
  18. }
[CSS] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div id="strona">
  2. <div class="tab1"></div>
  3. <div class="tab2"></div>
  4. <div class="tab3"></div>
  5. <br style="clear: both" />
  6. </div>
[HTML] pobierz, plaintext


Poczytaj sobie więcej o FLOAT haha.gif
Michał90
28.07.2010, 13:05:45
Wszystko fajnie tylko te tabele są jeden pod drugim, a nie obok siebie tongue.gif smile.gif
Damonsson
28.07.2010, 13:07:11
Tak z ciekawości...umieszczanie dla "br clear: both" oraz dodanie "float: left dla tab3". Ma jakiś głębszy powód? snitch.gif Czy po prostu zbędne 38 znaków więcej w kodzie?


@Michał90 - te dłuższe dane wpisujesz pomiędzy<header> <style> XXXXXX </style> </header> , a to drugie pomiędzy <body> XXXXXX </body> , wątpliwe byś nie wiedział, ale innej przyczyny chyba nie ma, by to nie działało winksmiley.jpg
dg2001
28.07.2010, 13:16:51
Cytat(Damonsson @ 28.07.2010, 14:07:11 ) *
Tak z ciekawości...umieszczanie dla "br clear: both" oraz dodanie "float: left dla tab3". Ma jakiś głębszy powód? snitch.gif Czy po prostu zbędne 38 znaków więcej w kodzie?


Jeżeli coś będzie jeszcze pod tymi div-ami to np jakaś stopka, to jak nie będzie tego <br style="clear: both" /> to się rozjedzie haha.gif ale nie mówię o fakacie kiedy da się stopkę np pod <div id="strona"></div>.

a to "float: left dla tab3" z rozpędu tongue.gif fakt zbędne to winksmiley.jpg
Michał90
28.07.2010, 13:17:06
No tak mam smile.gif
jak jest bardzo mało treści to jest ok, ale jak już jest troche więcej to już jest 1 pod 2
dg2001
28.07.2010, 13:21:00
A może jakiś kod worriedsmiley.gif

Bez niego to nic ci nie doradzimy worriedsmiley.gif
Michał90
28.07.2010, 13:24:52
Ja to robię tylko taką tabelkę na czysto..

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #strona {
  5. width: 900px;
  6. margin: 0 auto;
  7. }
  8.  
  9. .tab1 {
  10. float: left;
  11. size: 200px;
  12. }
  13. .tab2 {
  14. float: left;
  15. size: 500px;
  16. }
  17.  
  18. .tab3 {
  19. float: left;
  20. size: 200px;
  21. }
  22.  
  23. </style>
  24. </head>
  25. <body>
  26. <div id="strona">
  27. <div class="tab1">FOTKA</div>
  28. <div class="tab2">ArcaVir jest kompletnym pakietem zaawansowanych narzędzi do ochrony komputera przed wirusami, trojanami, robakami internetowymi
  29. i innymi zagrożeniami. Program zawiera jedną z największych obecnie dostępnych baz wirusowych. W przypadku wykrycie zagrożenia możliwe jest natychmiastowe określenie 
  30. stopnia zagrożenia i potencjalnych strat wynikacjących z aktywizacji wykrytego wirusa.</div>
  31. <div class="tab3">DANE PLIKUUU</div>
  32. <br style="clear: both" />
  33. </div>
  34. </body>
  35. </html>
[HTML] pobierz, plaintext


Jak coś to wrzucę to na serwer
dg2001
28.07.2010, 13:28:51
Sorry błąd zrobiłem smile.gif nie zauważyłem tego wcześniej haha.gif

Zamiast size: 200px; idt... zmień na width: 200px;

Teraz powinno działać haha.gif sprawdziłem
Michał90
28.07.2010, 13:32:03
Noo... pozmieniałem na width i działa smile.gif

Teraz pozostaje mi tylko przerobić to na tło obrazkowe + zaokrąglone rogi smile.gif
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.