Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> layout na div-ach, to chyba zmęcznie
batman
post 19.10.2006, 19:49:55
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.


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
babejsza
post 20.10.2006, 08:16:35
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 20.10.2006, 08:25:01
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.


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
babejsza
post 20.10.2006, 08:29:08
Post #4





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

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

Chyba żartujesz 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 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 winksmiley.jpg.

Ten post edytował babejsza 20.10.2006, 08:41:36
Go to the top of the page
+Quote Post
php programmer
post 20.10.2006, 09:21:53
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 smile.gif

Ten post edytował php programmer 20.10.2006, 09:28:51
Go to the top of the page
+Quote Post
batman
post 20.10.2006, 09:26:35
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.


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
babejsza
post 20.10.2006, 09:28:48
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 biggrin.gif.

//edit

@batman
Które rozwiązanie nie jest satysfakcjonujące? Moje czy z A List Apart? Chyba, że oba smile.gif. W takim przypadku zostaną Ci już właściwie tylko tabele. Ale nie polecam tego smile.gif.

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





Grupa: Moderatorzy
Postów: 36 557
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


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 11:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn