Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> layout na div-ach, to chyba zmęcznie
batman
post
Post #1





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
Witam

Za długo już patrzę w kod i nie wiem co się dzieje. Jeśli wpiszę w jednego div-a dużo tektu, następuje jego rozszerzenie wraz z tłem - jest to efekt jak najbardziej pożądany. Jednak pozostałe div-y ni jak nie chcą się rozciągnąć. Możecie zerknąć na kod i ocenić co źle zrobiłem ?

[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. <html>
  3. <head>
  4. <style type="text/css">
  5. #main {
  6.     margin-top: 10px;
  7.     margin-bottom: 10px;
  8.     height: 10%;
  9.     width: 800px;
  10.     border: 1px solid #707070;
  11. }
  12.  
  13. #head {
  14.     background-color: #DBDBDB;
  15.     width: 800px;
  16.     border: 1px solid #707070;
  17. }
  18.  
  19. #foot {
  20.     background-color: #DBDBDB;
  21.     width: 800px;
  22.     border: 1px solid #707070;
  23. }
  24.  
  25. #box_left {
  26.     float:left;
  27.     height: 100%;
  28.     width:650px;
  29.     border: 0px none;
  30. }
  31.  
  32. #right {
  33.     float:right;
  34.     height: 100%;
  35.     width:148px;
  36.     border: 0px none;
  37.     border-left: 1px solid #707070;
  38.     background-color: #DBDBDB;
  39. }
  40.  
  41. #left {
  42.     float: left;
  43.     border-right: 1px solid #707070;
  44.     width: 150px;
  45.     height:100%;
  46.     background-color: #DBDBDB;
  47. }
  48.  
  49. #center {
  50.     float: right;
  51.     width: 499px;
  52.     height:100%;
  53.     background-color: #EEEEEE;
  54. }
  55.  
  56. #wrap {
  57. }
  58.  
  59. </style>
  60. <title></title>
  61. </head>
  62. <body>
  63.  
  64. <div id="head"><h3>text</h3></div>
  65. <div id="main">
  66.     <div id="box_left">
  67.         <div id="left">
  68.             <p>aaa</p>
  69.             <p>bbb</p>
  70.             <p>ccc</p>
  71.             <p>ddd</p>
  72.             <p>eee</p>
  73.         </div>
  74.         <div id="center">vvvvvvvvvvv</div>
  75.     </div>
  76.     <div id="right"> </div>
  77.     <div style="clear: both"></div>
  78. </div>
  79. <div id="foot">text</div>
  80.  
  81. </body>
  82. </html>
[HTML] pobierz, plaintext


Efekt jest taki sam w IE, FF i Operze. Dodam jeszcze, iż użycie JavaScript odpada.
Go to the top of the page
+Quote Post
babejsza
post
Post #2





Grupa: Zarejestrowani
Postów: 407
Pomógł: 1
Dołączył: 4.03.2003
Skąd: warszawa

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

Możesz tak:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3.  
  4. <head>
  5. <title></title>
  6.  
  7. <style type="text/css">
  8. #head {
  9.     background-color: #DBDBDB;
  10.     width: 800px;
  11.     border: 1px solid #707070;
  12. }
  13.  
  14. #main {
  15.     margin: 10px 0 10px 0;
  16.     width: 800px;
  17.     border: 1px solid #707070;
  18.     background-color: #DBDBDB;
  19. }
  20.  
  21. #main br {clear: both;}
  22.  
  23. #left {
  24.     float: left;
  25.     width: 150px;
  26. }
  27.  
  28. #center {
  29.     float: right;
  30.     width: 498px;
  31.     background-color: #EEEEEE;
  32.     border-left: 1px solid #707070;
  33.     border-right: 1px solid #707070;
  34. }
  35.  
  36. #right {
  37.     float: right;
  38.     width: 150px;
  39. }
  40.  
  41. #foot {
  42.     background-color: #DBDBDB;
  43.     width: 800px;
  44.     border: 1px solid #707070;
  45. }
  46. </style>
  47. </head>
  48.  
  49.  
  50. <body>
  51.  
  52. <div id="head"><h1>Nagłowek</h1></div>
  53.  
  54. <div id="main">
  55. 	<div id="left">aaa</div>
  56. 	<div id="right">aaa</div>
  57. 	<div id="center">aaa</div>
  58. 	<br />
  59. </div>
  60.  
  61. <div id="foot">Stopka</div>
  62.  
  63. </body>
  64. </html>
[HTML] pobierz, plaintext


Ale to pod warunkiem, że "center" będzie tym, który zawsze będzie najdłuższy. W innym przypadku trzeba będzie skorzystać z grafiki tła.

Ten post edytował babejsza 20.10.2006, 08:25:22
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
Nietety podane rozwiązanie nie działa. Ani w FF ani w IE. W Operze nawet nie sprawdzałem.
Go to the top of the page
+Quote Post
babejsza
post
Post #4





Grupa: Zarejestrowani
Postów: 407
Pomógł: 1
Dołączył: 4.03.2003
Skąd: warszawa

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

Chyba żartujesz (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Działa w IE6, FF 1.5.0.7 oraz w Operze 9.02. Nie wiem na czym sprawdzałeś, ale zrób to jeszcze raz (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) . I powtarzam, to zadziała tylko w przypadku gdy blok #center będzie najwyższy.

//Edit

Jeżeli jednak będziesz potrzebował uniwersalnego rozwiązania, to tak jak napisałem wcześniej będziesz musiał posiłkować się grafiką. Więcej tutaj: Faux columns. Chyba, że ktoś wie jak zrobić, aby divy rozciągały się względem siebie bez wykorzystania grafik, ale nie wydaje mi się. Oczwiście mówię tu o rozwiązaniu działającym we wszystkich przeglądarkach (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) .

Ten post edytował babejsza 20.10.2006, 08:41:36
Go to the top of the page
+Quote Post
php programmer
post
Post #5





Grupa: Zarejestrowani
Postów: 1 045
Pomógł: 5
Dołączył: 8.11.2004
Skąd: trójmiasto

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

Cytat
zadziała tylko w przypadku gdy blok #center będzie najwyższy.

Nie no sory, skoro nie ma prostego rozwiazania (o ile wogóle jest)
na ten prosty problem, to w moich oczach mit łatwości używania DIV'ów
do tworzenia bloków, boleśnie upadł!

Mam nadzieje, że
może ktoś uratuje honor, tych co uważają inaczej (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował php programmer 20.10.2006, 09:28:51
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
@babejsza
Zwracam honor. Działa. Miałem starą wersję w cache-u.
Niemniej jednak nie jest to dla mnie satysfakcjonujące rozwiązanie.

@php programmer
Muszę przyznać Ci rację. Do tej pory pracowałem na divach ułożonych w dwie kolumny i nie miałem najmniejszych problemów. Ale by tak się nakombinować do dodania trzeciej kolumny, to już lekka przesada.
Go to the top of the page
+Quote Post
babejsza
post
Post #7





Grupa: Zarejestrowani
Postów: 407
Pomógł: 1
Dołączył: 4.03.2003
Skąd: warszawa

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

Jest prosty sposób. Przedstawiono go w linku, który podałem. Dodatkowo są metody, aby nie robić tego za pomocą grafiki, ale niestety badzIEwie ich nie obsługuje. Poza tym nie widzę innego rozwiązania niż stosowanie elementów blokowych do tworzenia ... bloków. Chyba, że tabele nazywasz blokiem (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) .

//edit

@batman
Które rozwiązanie nie jest satysfakcjonujące? Moje czy z A List Apart? Chyba, że oba (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) . W takim przypadku zostaną Ci już właściwie tylko tabele. Ale nie polecam tego (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) .

Ten post edytował babejsza 20.10.2006, 09:31:46
Go to the top of the page
+Quote Post
nospor
post
Post #8





Grupa: Moderatorzy
Postów: 36 559
Pomógł: 6315
Dołączył: 27.12.2004
posty OT zostaly przeniesione do wlasciwszego tematu:
http://forum.php.pl/index.php?showtopic=48750&st=120
tam jest dyskusja na ten temat
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · 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: 2.10.2025 - 16:13
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn