Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html/css] wyrównanie div'ów
Forum PHP.pl > Forum > Po stronie przeglądarki
pikey
6.07.2007, 12:59:18
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/
Black-Berry
9.07.2007, 23:57:38
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.
batman
10.07.2007, 04:29:21
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.
Black-Berry
10.07.2007, 08:31:45
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 smile.gif

Pozdrawiam
gekon
10.07.2007, 23:16:04
Ż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/
batman
11.07.2007, 07:26:50
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.
gekon
11.07.2007, 10:10:11
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.
Kreton
25.07.2007, 20:29:12
@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ą.
RaNdaLLHD
26.07.2007, 05:11:11
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?
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.