Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css][html][php]rozmieszczenie div wysokość lewej kolumny = wys. prawej
Forum PHP.pl > Forum > Po stronie przeglądarki
Oscar_83
23.09.2007, 14:36:07
Witam wszsystkich
Mam taki problem. Strone stworzyłem w oparciu o div. Mam nagłówek, lewą kolumne, prawą i stopkę. Chciałbym aby lewa kolumna i prawa miała zawsze tą samą wysokość (tzn w zależności od zawartości prawej kolumny lewa automatycznie zmieniała się w taką samą wysokośc), zrobiłem to biorąc prawą i lewą kolumnę w oddzielną warstwe którą nazwałem "srodek". Jest teraz wszystko oki tylko że chciałbym aby lewa kolumna miała zawsze tło wczytywane z jpg (i jeśli się lewa kolumna powiększy to na całej jej wysokości ma być tło z obrazka i odwrotnie). mógłbym zrobić to wczytując do wartwy srodek tło z obrazka, z tym że na niektórych podstronach prawa kolumna jest mniejsza niż lewa (niższa) i wtedy pozostała częśc wypełniana by była tłem z obrazka, a chcę aby prawa kolumna calutka miała tło "background: #CCE6FF;".
Proszę o pomoc i ewentualne pytania jeśli jest coś niezrozumiałe:

[HTML] pobierz, plaintext 
  1. * { padding: 0; margin: 0; }
  2.  
  3. body {
  4.  overflow: visible;
  5.  font-family: Arial, Helvetica, sans-serif;
  6.  font-size: 12pt;
  7.  font color: #0056E8;
  8.  background: #A7C2D5;
  9.  
  10. }
  11. a { text-decoration: none }
  12. a:link { color: #0000FF }
  13. a:visited { color: #1E1EAD }
  14. a:hover { text-decoration: underline }
  15. a:active { color: #FFFFFF }
  16.  
  17. #strona {
  18.  margin: 0 auto;
  19.  width: 758px;
  20.  
  21. }
  22.  
  23. #naglowek {
  24.  color: #333;
  25.  width: 738px;
  26.  height: 100px;
  27.  padding: 10px;
  28.  margin: 10px 0px 0px 0px;
  29.  background-image:url('naglowek1.jpg');
  30. }
  31. #srodek {
  32.  background: #CCE6FF;
  33.  margin-bottom: 0px;
  34.  overflow: auto;
  35.  width: 100%
  36. }
  37. #lewakolumna {
  38.  display: inline;
  39.  color: #333;
  40.  padding: 0px;
  41.  width: 190px;
  42.  float: left;
  43.  background-image:url('lewakolumna.jpg');
  44. }
  45. #prawakolumna {
  46.  float: right;
  47.  color: #333;
  48.  background: #CCE6FF;
  49.  margin: 10px;
  50.  padding: 0px;
  51.  width: 534px;
  52.  display: inline;
  53.  position: relative;
  54. }
  55. #stopka {
  56.  font-size: 9pt;
  57.  width: 738px;
  58.  clear: both;
  59.  color: #333;
  60.  border: 1px solid #A3C3FF;
  61.  background-image:url('stopka.jpg');
  62.  margin: 0px 0px 10px 0px;
  63.  padding: 10px;
  64. }
  65. .clear { clear: both; background: none; }
[HTML] pobierz, plaintext


plik index.php ma zawartość taką:
[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3.    <div id="strona">
  4.  
  5.          <div id="naglowek">
  6.  
  7. 		 </div>
  8. 		 <div id="srodek">
  9.                  <div id="lewakolumna">
  10.  
  11.         	     <br><br><br><br>
  12.  
  13.                      <center><table background="tabela.jpg" border="0" cellspacing="0" width="172px"></center>
  14. <tr>
  15.     <td><br>&nbsp<a href="index.php?id=o_firmie">O firmie</a><br>&nbsp</td>
  16. </tr>
  17. <tr>
  18.     <td>&nbsp<a href="index.php?id=aktualna_oferta">Aktualna oferta</a><br>&nbsp</td>
  19. </tr>
  20. <tr>
  21.     <td>&nbsp<a href="index.php?id=inwestycje">Planowane inwestycje</a><br>&nbsp</td>
  22. </tr>
  23. <tr>
  24.     <td>&nbsp<a href="index.php?id=galeria">Galeria</a><br>&nbsp</td>
  25. </tr>
  26. <tr>
  27.     <td>&nbsp<a href="index.php?id=adres">Adres i kontakt</a><br>&nbsp<br>&nbsp</td>
  28. </tr>
  29. </table>
  30.  
  31. <center><img src="logo_22.jpg" border="0" align="center"/></a></center>               		
  32. <br><br><br><br>
  33. 		 </div>
  34. 		 <div id="prawakolumna">
  35. 		 <?php
  36.  
  37.                            $strony=array('o_firmie','aktualna_oferta','galeria','adres','ulica','inwestycje','lista','lista1','postojowe','rzuty','wizualizacja');
  38.  
  39.                             if (isset($_GET['id'])) $id=$_GET['id'];
  40.                             else $id='';
  41.                             if (!in_array($id,$strony)) $id=$strony[0];
  42.                             if (file_exists($id.'.php')) include($id.'.php');
  43.                             else include('o_firmie.php')
  44.                   ?>	
  45. 		 </div>
  46. 		 </div>
  47. 		 <div id="stopka">
  48. 		  <p align="center">bla bla</p>
  49.  
  50.  
  51. 	        <div class="clear"></div>		
  52.  
  53. 	     </div>
  54.  
  55. 	         <div class="clear"></div>	
  56.    </div>
  57.  
  58.  
  59. </body>
  60. </html>
[HTML] pobierz, plaintext


bardzo prosze o pomoc, z góry dziękuję
cicik
24.09.2007, 10:09:57
Cytat(Oscar_83 @ 23.09.2007, 15:36:07 ) *
mógłbym zrobić to wczytując do wartwy srodek tło z obrazka


I to jest jedyny sposób. Co prawda ma wadę, którą sam wymieniłeś - nie można zmieniać szerokości kolumn. Ale niestety - obecnie z użyciem divow inaczej sie nie da. Dla podstron z innymi szerokościami kolumn musisz używać innych styli po prostu.
Oscar_83
24.09.2007, 12:03:10
Ale ja nie chce zmieniać szerokości kolumn, tylko wysokość będzie się zmieniała. Chodziło mi o to że niektóre podstrony mają prawą kolumnę niższą niż lewą i wtedy będą wypełniane tłem warstwy "srodek" :/ a tak nie chce.
cicik
24.09.2007, 12:23:57
Cytat(Oscar_83 @ 24.09.2007, 13:03:10 ) *
Ale ja nie chce zmieniać szerokości kolumn, tylko wysokość będzie się zmieniała. Chodziło mi o to że niektóre podstrony mają prawą kolumnę niższą niż lewą i wtedy będą wypełniane tłem warstwy "srodek" :/ a tak nie chce.


Teraz rozumiem. Sprawa jest bardzo prosta.
Tworzysz tło, które lewą część ma w kolorze a prawą białą. Tak jak na stronie www.php-art.pl. Ustawiasz takie tło dla warstwy "środek" i masz "wirtualne dwie kolumny".
Oscar_83
24.09.2007, 12:58:31
Dzięki smile.gif w sumie racja smile.gif Dzięki za pomysł smile.gif)) Metoda prosta i skuteczna smile.gif
Jeszcze raz wielkie dzięki smile.gif
Pozdrawiam
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.