Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zmienna szerokość komórki w tabeli
Forum PHP.pl > Forum > Przedszkole
ArekKrol
Witam. Nie wiem jak to nazwać dlatego ciężko mi poszukać odpowiedzi na forum. Chodzi mi o to aby strona zawsze była wyświetlana w całym oknie przeglądarki, przy czym:
mam dwie kolumny (lewą i prawą) ze stałymi rozmiarami, chcę aby środkowa była ruchoma ... ale miała minimalną szerokość np. 400px. Chodzi o to że przy oglądaniu stronki na rozdzielczości 800x600 lub 1024x768 strona będzie na całym oknie ... tylko środkowa część strony/tabeli będzie się rozsuwać lub zsuwać w zależności od potrzeb. A dopiero przy rozdzielczości mniejszej niż 800x600 pojawią się poziome paski przewijania. Wiecie jak to nazwać? Albo jeszcze lepiej - jak to zrobić? Pozdrawiam
drPayton
  1. <table id="Kontener" style="width:100%;background:yellow;">
  2. <tr>
  3. <td id="lewaKolumna" style="height:50px;width:200px;background:red;"></td>
  4. <td id="srodkowaKolumna" style="background:green;"></td>
  5. <td id="prawaKolumna" style="width:200px;background:blue;"></td>
  6. </tr>

Jeżeli komuś uda się to zrobić na DIV'ach (tak by działało i pod FF i pod badzIEwiem), niech się pochwali.
Co do minimalnej szerokości - nie ma chyba nic takiego w html/css co działałoby i pod FF i pod IE, javascriptem da się to zrobić prosto...
Cezar708
  1. <div style='width: 100%'>
  2. <div id='lewa' style='float: left; width: 400px; background: rgb(255,0,0) 1px;'>
  3. lewa
  4. </div>
  5. <div id='srodek' style='float: left; background: rgb(0,255,0) 1px;'>
  6. srodek
  7. </div>
  8. <div id='prawa' style='float: right; width: 400px; background: rgb(0,0,255) 1px;'>
  9. prawa
  10. </div>
  11. </div>


oczywiście kolorki żebyś widział jak to wygląda w praktyce. Problem się pojawi przy rozdziałce niskiej (strona się rozejdzie) sprawdź sobie

EDIT: nie testowałem na innych przeglądarkach więc nie wiem
drPayton
Uhm, ale środek nie zajmuje całej szerokości, co będzie problemem np w przypadku obramowania... Dlatego napisałem na tabelach
Cezar708
@drPayton... ano też można:

  1. <div style='width: 100%'>
  2. <div id='lewa' style='float: left; width: 400px; background: rgb(255,0,0) 1px;'>
  3. lewa
  4. </div>
  5. <div id='prawa' style='float: right; width: 400px; background: rgb(0,0,255) 1px;'>
  6. prawa
  7. </div>
  8. <div id='srodek' style='margin-right:400px; margin-left:400px; background: rgb(0,255,0) 1px;'>
  9. srodek
  10. </div>
  11. </div>


(zwróć uwagę na kolejność DIVów)
drPayton
A teraz zobacz co się stanie, kiedy zmniejszysz okno przeglądarki tongue.gif
Czyli nadal źle... ;-)
ArekKrol
drPayton, mówisz, że w javie da się to zrobić. Możesz podpowiedzieć jak?

Przepraszam winksmiley.jpg
drPayton
@ArekKrol: Proponuje kopiuj-wklej nicka, wtedy błędu nie będzie :roll2:
Załóżmy,że jednak na div'ie robimy, i ten div (środkowy) ma id="srodek", a minimalna szerokość to 400px:
  1. <script type="text/javascript">
  2. function pilnuj_szerokosci()
  3. {
  4. if(document.getElementById("srodek").style.width < 400)
  5. document.getElementById("srodek").style.width = 400;
  6. }

I ta funkcja musi być wywoływana na zakończenie ładowania strony. I weź przykład (jeśli divy) z pierwszego tu posta @Cezar708
Cezar708
Cytat(drPayton @ 2.08.2007, 14:58:01 ) *
A teraz zobacz co się stanie, kiedy zmniejszysz okno przeglądarki tongue.gif
Czyli nadal źle... ;-)


no nie da rady, jeśli nie zrobisz takiej kontroli w JS co do szerokości to jeśli szerokość okna będzie za mała (czyli w moim przypadku mniejsza niż 400+400=800px) i zakładając że w środkowej kolumnie nic nie ma to strona się rozjedzie...

ja zamiast kontroli środkowej kolumny zrobiłbym w javaScript kontrolę rozdzielczości całego ekranu i na podstawie tego określiłbym szerokość wszystkich DIVów, w szczególności tego div - rodzica (co w moim przypadku ma szerokość 100%).
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.