Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> xhtml, szerokości % i px w jednej linji.
Grzesiek1
post 6.10.2008, 16:31:37
Post #1





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 5.02.2007

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

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...

Ten post edytował Grzesiek1 6.10.2008, 16:34:52
Go to the top of the page
+Quote Post
-SaraniS-
post 19.12.2008, 02:03:18
Post #2





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 2.01.2005
Skąd: Opolskie

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

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


--------------------
Workstation: Hardware: Toshiba Satellite L40-14B Software: Linux 2.6.30.3 - Slackware 12.2 - KDE3.5.10
Server: Hardware: Celeron 850MHz/ 256MiB Software: Linux 2.4.31 - Slackware 10.2 - Apache 2.2.0.59 + PHP 5.1.6 + MySQL 5.0.24a
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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: 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 Wersja Lo-Fi Aktualny czas: 29.06.2025 - 10:26
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn