Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: xhtml, szerokości % i px w jednej linji.
Forum PHP.pl > Forum > Po stronie przeglądarki
Grzesiek1
6.10.2008, 16:31:37
Mamy sobie taki oto kodzik:

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
  <style type="text/css">
    body{
    min-width:950px;
    }
    #left{
    float:left;
    width:15%;
    background:#9988cc;
    padding:3px;
    border:1px solid black;
    }
    #left_two{
    float:left;
    width:15%;
    background:#9999bb;
    border:1px solid black;
    padding:3px;
    }
    #general{
    float:left;
    border:1px solid black;
    width:50%;
    padding:5px;
    }
    #right{
    float:right;
    width:16%;
    padding:3px;
    background:#8888bb;
    border:1px solid black;
    }
  </style>
</head>
<body>

<div id="left">
        LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO<br/> <br/>
</div>

<div id="left_two">
        LEWO dwa <br/>LEWO dwa <br/>LEWO dwa <br/>LEWO dwa <br/>LEWO dwa
</div>

<div id="general">
        srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek ! <br/>
        ssssssssssssssssssss sda dsaaaaaaaaaa dsadsa sadsa dad aadad adasdasdassda dsaaaaaaaaaa dsadsa sadsa dad aadad adasdasdassda dsaaaaaaaaaa dsadsa sadsa dad aadad adasdasdas      <br/>
        ssssssssssssssssssssssssssssssssssss
        sssssssssssssssssss
        sssssssssssssssssssssssssssssss
        sssssssssssssssssssssssssssssssss
</div>

<div id="right">
        prawo  <br/>prawo  <br/>prawo  <br/>prawo  <br/>prawo  <br/>prawo  <br/>prawo  <br/>prawo  
</div>

</body>
</html>

Wszystko super fajnie, zmniejszamy okno przeglądarki równomiernie się wszystko ładnie zmniejsza itd.

Ale teraz załóżmy że chcemy aby tylko środkowe okno się zmniejszało i powiększało a boczne panele miały stałą szerokość.

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
  <style type="text/css">
    body{
    min-width:950px;
    }
    #left{
    float:left;
    width:170px;
    background:#9988cc;
    padding:3px;
    border:1px solid black;
    }
    #left_two{
    float:left;
    width:170px;
    background:#9999bb;
    border:1px solid black;
    padding:3px;
    }
    #general{
    float:left;
    border:1px solid black;
    width:40%;
    padding:5px;
    }
    #right{
    float:right;
    width:175px;
    padding:3px;
    background:#8888bb;
    border:1px solid black;
    }
  </style>
</head>
<body>

<div id="left">
        LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO <br/>LEWO<br/> <br/>
</div>

<div id="left_two">
        LEWO dwa <br/>LEWO dwa <br/>LEWO dwa <br/>LEWO dwa <br/>LEWO dwa
</div>

<div id="general">
        srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>srodek  <br/>
        ssssssssssssssssssss sda dsaaaaaaaaaa dsadsa sadsa dad aadad adasdasdassda dsaaaaaaaaaa dsadsa sadsa dad aadad adasdasdassda dsaaaaaaaaaa dsadsa sadsa dad aadad adasdasdas      <br/>
        ssssssssssssssssssssssssssssssssssss
        sssssssssssssssssss
        sssssssssssssssssssssssssssssss
        sssssssssssssssssssssssssssssssss
</div>

<div id="right">
        prawo  <br/>prawo  <br/>prawo  <br/>prawo  <br/>prawo  <br/>prawo  <br/>prawo  <br/>prawo  
</div>

</body>
</html>

Efekt każdy widzi, ja osobiście zawsze kombinuje, zrobić tak żeby główny div rozciągał się jakoś inaczej ale ciekawi mnie jak wy takie coś rozwiązujecie ?
Jeśli w jednej linji jest dużo takich tabelek że jedne stałe drugie zmienne to czasami robi się spory problem...
-SaraniS-
19.12.2008, 02:03:18
Hmm, w taki sposób?
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  3. <head>
  4.   <style type="text/css">
  5.     body{
  6.     min-width:950px;
  7.     }
  8.     #left{
  9.     float:left;
  10.     width:170px;
  11.     background:#9988cc;
  12.     padding:3px;
  13.     border:1px solid black;
  14.     }
  15.     #left_two{
  16.     float:left;
  17.     width:170px;
  18.     background:#9999bb;
  19.     border:1px solid black;
  20.     padding:3px;
  21.     }
  22.     #general{
  23.     float:left;
  24.     border:1px solid black;
  25.     width:100%;
  26.     padding: 0 175px 0 170px;
  27.     }
  28.     #right{
  29.     float:right;
  30.     width:175px;
  31.     padding:3px;
  32.     background:#8888bb;
  33.     border:1px solid black;
  34.     }
  35.   </style>
  36. </head>
  37. <body>
  38.  
  39. <div id="general">
  40. <div id="left"></div>
  41. <div id="left_two"></div>
  42. <div id="right"></div>
  43. <p>Tresc srodka</p>
  44. </div>
  45.  
  46. </body>
  47. </html>
[HTML] pobierz, plaintext

(Pisane z ręki, z Twojego kodu)
Chodzi o to, że div o szerokości procentowej jest pudełkiem i na boczne kolumny i ma 100% szerokości; możliwe, że padding w nim nie jest potrzebny w momencie gdy boczne kolumny pływają - nie testowałem, jest to tylko koncepcja winksmiley.jpg
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.