Forum PHP.pl > layout na div-ach

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

batman

19.10.2006, 19:49:55

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 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#main {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 10%;
    width: 800px;
    border: 1px solid #707070;
}
 
#head {
    background-color: #DBDBDB;
    width: 800px;
    border: 1px solid #707070;
}
 
#foot {
    background-color: #DBDBDB;
    width: 800px;
    border: 1px solid #707070;
}
 
#box_left {
    float:left;
    height: 100%;
    width:650px;
    border: 0px none;
}
 
#right {
    float:right;
    height: 100%;
    width:148px;
    border: 0px none;
    border-left: 1px solid #707070;
    background-color: #DBDBDB;
}
 
#left {
    float: left;
    border-right: 1px solid #707070;
    width: 150px;
    height:100%;
    background-color: #DBDBDB;
}
 
#center {
    float: right;
    width: 499px;
    height:100%;
    background-color: #EEEEEE;
}
 
#wrap {
}
 
</style>
<title></title>
</head>
<body>
 
<div id="head"><h3>text</h3></div>
<div id="main">
    <div id="box_left">
        <div id="left">
            <p>aaa</p>
            <p>bbb</p>
            <p>ccc</p>
            <p>ddd</p>
            <p>eee</p>
        </div>
        <div id="center">vvvvvvvvvvv</div>
    </div>
    <div id="right"> </div>
    <div style="clear: both"></div>
</div>
<div id="foot">text</div>
 
</body>
</html>
[HTML] pobierz, plaintext

Efekt jest taki sam w IE, FF i Operze. Dodam jeszcze, iż użycie JavaScript odpada.

babejsza

20.10.2006, 08:16:35

Możesz tak:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 
<head>
<title></title>
 
<style type="text/css">
#head {
    background-color: #DBDBDB;
    width: 800px;
    border: 1px solid #707070;
}
 
#main {
    margin: 10px 0 10px 0;
    width: 800px;
    border: 1px solid #707070;
    background-color: #DBDBDB;
}
 
#main br {clear: both;}
 
#left {
    float: left;
    width: 150px;
}
 
#center {
    float: right;
    width: 498px;
    background-color: #EEEEEE;
    border-left: 1px solid #707070;
    border-right: 1px solid #707070;
}
 
#right {
    float: right;
    width: 150px;
}
 
#foot {
    background-color: #DBDBDB;
    width: 800px;
    border: 1px solid #707070;
}
</style>
</head>
 
 
<body>
 
<div id="head"><h1>Nagłowek</h1></div>
 
<div id="main">
	<div id="left">aaa</div>
	<div id="right">aaa</div>
	<div id="center">aaa</div>
	<br />
</div>
 
<div id="foot">Stopka</div>
 
</body>
</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.

batman

20.10.2006, 08:25:01

Nietety podane rozwiązanie nie działa. Ani w FF ani w IE. W Operze nawet nie sprawdzałem.

babejsza

20.10.2006, 08:29:08

Chyba żartujesz

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

. 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

php programmer

20.10.2006, 09:21:53

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

batman

20.10.2006, 09:26:35

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

babejsza

20.10.2006, 09:28:48

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

.

//edit

@batman
Które rozwiązanie nie jest satysfakcjonujące? Moje czy z A List Apart? Chyba, że oba

. W takim przypadku zostaną Ci już właściwie tylko tabele. Ale nie polecam tego

nospor

21.10.2006, 07:50:04

posty OT zostaly przeniesione do wlasciwszego tematu:
http://forum.php.pl/index.php?showtopic=48750&st=120
tam jest dyskusja na ten temat

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.