Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] tabela/ramka
Michał90
post
Post #1





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 16.05.2007

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

Witam,
Jak zrobić taką ramkę/tabele opartą o div + css

(IMG:http://img72.imageshack.us/img72/183/28386931.th.jpg)

Pozdrawiam
Go to the top of the page
+Quote Post
dg2001
post
Post #2





Grupa: Zarejestrowani
Postów: 71
Pomógł: 12
Dołączył: 9.01.2008
Skąd: Olkusz

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

[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 (IMG:style_emoticons/default/haha.gif)
Go to the top of the page
+Quote Post
Michał90
post
Post #3





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 16.05.2007

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

Wszystko fajnie tylko te tabele są jeden pod drugim, a nie obok siebie (IMG:style_emoticons/default/tongue.gif) (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Damonsson
post
Post #4





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

Tak z ciekawości...umieszczanie dla "br clear: both" oraz dodanie "float: left dla tab3". Ma jakiś głębszy powód? (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/winksmiley.jpg)

Ten post edytował Damonsson 28.07.2010, 13:11:29
Go to the top of the page
+Quote Post
dg2001
post
Post #5





Grupa: Zarejestrowani
Postów: 71
Pomógł: 12
Dołączył: 9.01.2008
Skąd: Olkusz

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

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? (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/tongue.gif) fakt zbędne to (IMG:style_emoticons/default/winksmiley.jpg)

Ten post edytował dg2001 28.07.2010, 13:17:15
Go to the top of the page
+Quote Post
Michał90
post
Post #6





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 16.05.2007

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

No tak mam (IMG:style_emoticons/default/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
Go to the top of the page
+Quote Post
dg2001
post
Post #7





Grupa: Zarejestrowani
Postów: 71
Pomógł: 12
Dołączył: 9.01.2008
Skąd: Olkusz

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

A może jakiś kod (IMG:style_emoticons/default/worriedsmiley.gif)

Bez niego to nic ci nie doradzimy (IMG:style_emoticons/default/worriedsmiley.gif)
Go to the top of the page
+Quote Post
Michał90
post
Post #8





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 16.05.2007

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

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
Go to the top of the page
+Quote Post
dg2001
post
Post #9





Grupa: Zarejestrowani
Postów: 71
Pomógł: 12
Dołączył: 9.01.2008
Skąd: Olkusz

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

Sorry błąd zrobiłem (IMG:style_emoticons/default/smile.gif) nie zauważyłem tego wcześniej (IMG:style_emoticons/default/haha.gif)

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

Teraz powinno działać (IMG:style_emoticons/default/haha.gif) sprawdziłem

Ten post edytował dg2001 28.07.2010, 13:29:49
Go to the top of the page
+Quote Post
Michał90
post
Post #10





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 16.05.2007

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

Noo... pozmieniałem na width i działa (IMG:style_emoticons/default/smile.gif)

Teraz pozostaje mi tylko przerobić to na tło obrazkowe + zaokrąglone rogi (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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