Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [html/css] wyrównanie div'ów, pomocy :P
pikey
post
Post #1





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 15.10.2006

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

Podaje kod:

index.html
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <head>
  3.       <meta name="Robots" content="all" />
  4.       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
  5.  
  6.       <link rel="stylesheet" href="styles.css" type="text/css"/>      
  7.       <meta http-equiv="Content-Language" content="pl" />
  8.       <meta name="Author" content="PiKey" />
  9.       <title> Stronka  </title>
  10. </head>
  11.  <body style='height: 100%'>
  12.  
  13. <table class="page" border="1">
  14. <tr><td>
  15.  
  16. <div class="blue">
  17. 	Logowanie | Rejestracja
  18. </div>
  19.  
  20. <div class="blue" style="margin-top: 4px;">
  21. 	Witaj na stronie<br /><br />
  22.  
  23. 	Już teraz: <a href="?page=login">Zaloguj</a> się lub <a href="?page=register">Załóż nowe konto</a>
  24. </div>
  25.  
  26. </td><td>
  27.  
  28. <div class="green">
  29. 	<b>Ostatnio zalogowani:</b><br />
  30.  
  31. 	<table border="0">
  32. 	<tr>
  33. 	<td>1. </td>
  34. 	<td><h1>Teddy</h1>
  35. 	aa</td></tr>
  36.  
  37. 	<tr>
  38. 	<td>2. </td>
  39. 	<td><h1>Michałek</h1>
  40. 	aa</td></tr>
  41.  
  42. 		<tr>
  43. 	<td>3. </td>
  44. 	<td><h1>PiKey</h1>
  45. 	aa</td></tr>
  46. 	</table>
  47.  
  48. 	<br /><b>Najbogatsi:</b><br />
  49.  
  50.  
  51. 	<table border="0">
  52. 	<tr>
  53. 	<td>1. </td>
  54. 	<td><h1>PiKey</h1>
  55. 	aa</td></tr>
  56.  
  57. 	<tr>
  58. 	<td>2. </td>
  59. 	<td><h1>Michałek</h1>
  60. 	aa</td></tr>
  61.  
  62. 	<tr>
  63. 	<td>3. </td>
  64. 	<td><h1>Mruczek</h1>
  65. 	aa</td></tr>
  66. 	</table>
  67.  
  68. </div>
  69.  
  70. </td></tr>
  71. </table>
  72.  
  73.  
  74.  </body>  
  75. </html>
[HTML] pobierz, plaintext


style.css
[HTML] pobierz, plaintext 
  1. body {
  2. height: 100%;
  3. font-family: verdana;
  4. font-size: 12px;
  5. }
  6.  
  7. body {
  8. height: 100%;
  9. }
  10.  
  11. .blue {
  12. border: 1px solid #1abcff;
  13. padding: 10px;
  14. background-image: url(images/bcg-blue.png);
  15. width: 400px;
  16. }
  17.  
  18. h1 {
  19. font-size: 12px;
  20. font-family: tahoma;
  21. color:gray;
  22. margin: 0;
  23. }
  24.  
  25. .green {
  26. border: 1px solid #1abcff;
  27. padding: 10px;
  28. background-image: url(images/bcg-green.png);
  29. }
  30.  
  31. .page {
  32. height: 100%;
  33. }
  34.  
  35. .page td {
  36. vertical-align: top;
  37. }
[HTML] pobierz, plaintext


screen:
http://www.fotosik.pl/pokaz_obrazek/14f9e74b0da24055.html

wszystko wyjaśnione na screenie
proszę o szybką pomoc!http://fotosik.pl/
Go to the top of the page
+Quote Post
Black-Berry
post
Post #2





Grupa: Zarejestrowani
Postów: 663
Pomógł: 6
Dołączył: 3.06.2007
Skąd: Kraków

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

spróbuj może całość wstawić w jednego wielkiego diva i ten div który chcesz wyrównać do dołu spróbuj dać "vertical-align:bottom", a jak nie to chyba bez tabelki się nie obejdzie.
Go to the top of the page
+Quote Post
batman
post
Post #3





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
I dlatego właśnie tworzę strony w oparciu o tabele. Jest to możliwe, jeśli dasz wysokość tego div-a równą 100%. Aby to zadziałało musisz ustawić wysokość div-a nadrzędnego na konkretną wysokość (w pikselach). Jednak w ten sposób (chyba w FF) uzyskasz efekt wyjeżdżania tekstu poza div-a. Są jakieś "haki" css, które to umożliwiają pod każdą przeglądarką, jednak moim zdaniem szkoda na nie czasu. Tak jak napisał @Black-Berry - użyj tabelki i olej opinie ludzi, którzy wmawiają Ci, że div-y są lepsze.

Ten post edytował batman 10.07.2007, 04:30:33
Go to the top of the page
+Quote Post
Black-Berry
post
Post #4





Grupa: Zarejestrowani
Postów: 663
Pomógł: 6
Dołączył: 3.06.2007
Skąd: Kraków

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

Ja myślę, że w tej dyskusji o divach i tabelkachbrakło jednej zasadniczej kwestji - powinno się zawsze używać tego co ułatwia sprawę. Divy sa dobre jesli kod który piszemy ma być wyświetlany na każdej stronie inaczej. Wtedy za pomocą css-a można z nimi zrobić prawie wszystko. Jesli natomiast tworzymy tylko jedną stronę która ma się nigdy nie zmieniać to łatwo się używa tabelek. Jest jeszcze oczywiście argument dotyczący robotów wyszukiwarek, ale nie jestem w stanie go potwierdzić.

Walnij tabelkę i będzie dobrze (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Pozdrawiam
Go to the top of the page
+Quote Post
gekon
post
Post #5





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

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

Żal mi panowie zaglądać na forum, jak widzę takie posty.

@pikey: Całkowity brak zrozumienia tematu. Radzę poczytać jakieś kursy, od deski do deski. Potem przespać się, przeczytać jeszcze raz to czego się nie zrozumiało. Nie od razu Kraków zbudowano.

@batman & Black-Berry: Panowie divy nie są lepsze. Sa jedyną metodą, zgodną ze standardami, służącą do tworzenia szkieletu stron. Tabele jak sama nazwa wskazuje, służą do przedstawiania danych tabelarycznych (zaraz sie ktoś zapyta co to są dane tabelaryczne. Otóż definicja łopatoliczna jest dość prosta: jeżeli można zamienić kolumny z wierszami i nie zmienia to odbioru przekazywanej treści mamy do czynienia właśnie z tym typem danych).

A to może pomóc w rozwiązaniu problemu: http://www.alistapart.com/articles/fauxcolumns/

Ten post edytował gekon 11.07.2007, 00:08:28
Go to the top of the page
+Quote Post
batman
post
Post #6





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
Cytat
Żal mi panowie zaglądać na forum, jak widzę takie posty.

Mam dokładnie takie same odczucia, czytając Twój post. Wiem po co są div-y i wiem, że jeśli oprzesz szkielet strony o tabele, wówczas programy "czytające" dla osób niedowidzących zbaranieją. W innym temacie zadałem pytanie jak zachowa się div w FF i IE:

[HTML] pobierz, plaintext 
  1. <div style="border:1px solid #DBDBDB; margin:4px; parring:3px;">jakis tekst</div>
[HTML] pobierz, plaintext


Na tym kończę swój udział w dyskusjach na temat div vs tabela. A dlaczego? Kiedyś ktoś miał bardzo fajną sygnaturkę na temat dyskutowania.
Go to the top of the page
+Quote Post
gekon
post
Post #7





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

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

Cytat
Wiem po co są div-y

A czy powiedziałem, że nie wiesz?
Cytat
W innym temacie zadałem pytanie jak zachowa się div w FF i IE:

Normalnie się zachowa (biorąc pod uwagę, że "parring" to literówka). Przeglądarka to taki kompilator (interpreter ale mniejsza o szczegóły), który często musi kompilować błędny kod (!). I o ile nowe wersje trzymają się standardów języków, które kompilują to stare całkowicie to olewały. Marketing ma to do siebie, że nie można olać klientów więc potrzebny był tryb zgodności. To jedyna różna. Więc odpowiedź jest dość prosta: jeżeli Twój kod nie ustawi przeglądarki w tryb dziwactw to będzie wyglądało to identycznie we wszystkich przeglądarkach.
Go to the top of the page
+Quote Post
Kreton
post
Post #8





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 20.02.2005

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

@batman zachowa się normalnie. Uzywając XHTML 1.0 Strict i w FF oraz w IE 6 zachowa się tak samo. Użycie XHTML 1.0 Transitional przełącza IE 6 w Quirksmode i powoduje złą interpretację.

Zakończyć rozmowę można tylko tak : nie bardzo chyba wiesz z czym się je div-y. Najlepiej powiedzieć, że są głupie.

Szkoda tylko, że namawiacie ludzi do głupot i potem głupot się uczą.
Go to the top of the page
+Quote Post
RaNdaLLHD
post
Post #9





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 21.06.2007

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

Powinno pomóc Ci utworzenie warstwy i użycie w niej position: relative lub ewentualnie position: absolute. W ogóle nie rozumiem czemu używasz div'ów w komórkach tabeli. Nie lepiej zrobić to na samych div'ach?
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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: 27.09.2025 - 15:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn