Nu reusesc sa fac ceva ca in imaginea de mai jos.
Liniile negre sunt tabelul, si patratele verzi sunt niste poze cu dimensiunile respective.
Stiu ca pentru celulele mari trebuie folosit colspan="2" rowspan="2".
Dar problema apare atunci cand introduc prima poza mare de jos (din stanga). TOATA coloana, inclusiv cele doua celule de 125px de deasupra, se mareste la 250px.
Exista solutii, dar totul facut dintr-un singur tabel?
Click pentru a vizualiza atașamentul
daca pui colspan=2 jos, una din cele 2 coloane de jos o sa aiba marimea a doua de sus (nu 1,5)
poti sa faci un singur cell jos (colspan=3) si adaugi 2 divuri de 50% (sau mai inserezi un table cu 2 td-uri de 50%)
edit: defapt e o solutie daca ma gandesc mai bine
faci 4 coloane sus si cele 2 din mijloc le unesti.
atunci jos ar trebui teoretic sa-ti sa mearga colspan=2 cum trebuie:
poti sa faci un singur cell jos (colspan=3) si adaugi 2 divuri de 50% (sau mai inserezi un table cu 2 td-uri de 50%)
edit: defapt e o solutie daca ma gandesc mai bine
faci 4 coloane sus si cele 2 din mijloc le unesti.
atunci jos ar trebui teoretic sa-ti sa mearga colspan=2 cum trebuie:
CODE
<table width="500px;">
<tr>
<td style="width: 25%;">1</td>
<td colspan="2" rowspan="2" style="width: 50%;background:#e1e">2</td>
<td style="width: 25%;background:#d2d">3</td>
</tr>
<tr>
<td style="width: 25%;background:#7f7">1/2</td>
<td style="width: 25%;">3/2</td>
</tr>
<tr>
<td colspan="2" rowspan="2" style="width: 50%;background:#ccc">4</td>
<td colspan="2" rowspan="2" style="width: 50%;background:#5cc">5</td>
</tr>
</table>
<tr>
<td style="width: 25%;">1</td>
<td colspan="2" rowspan="2" style="width: 50%;background:#e1e">2</td>
<td style="width: 25%;background:#d2d">3</td>
</tr>
<tr>
<td style="width: 25%;background:#7f7">1/2</td>
<td style="width: 25%;">3/2</td>
</tr>
<tr>
<td colspan="2" rowspan="2" style="width: 50%;background:#ccc">4</td>
<td colspan="2" rowspan="2" style="width: 50%;background:#5cc">5</td>
</tr>
</table>
QUOTE (unu @ 30th September 2009, 10:57) 
edit: defapt e o solutie daca ma gandesc mai bine
faci 4 coloane sus si cele 2 din mijloc le unesti.
atunci jos ar trebui teoretic sa-ti sa mearga colspan=2 cum trebuie:
faci 4 coloane sus si cele 2 din mijloc le unesti.
atunci jos ar trebui teoretic sa-ti sa mearga colspan=2 cum trebuie:
Pai exact asa am facut, si apare probleme. De fapt arata bine in IE8, dar in restul browserelor nu. In Firefox se mareste toata coloana din stanga + cea din dreapta, inclusiv celulele cu poze mici, iar in Chrome se lungeste doar partea din dreapta.
Ruleaza codul asta in diferite browsere:
CODE
<table width="500px;">
<tr>
<td style="width: 125px;"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="125"></td>
<td colspan="2" rowspan="2" style="width: 250px;background:#e1e"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="250"></td>
<td style="width: 125px;background:#d2d"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="125"></td>
</tr>
<tr>
<td style="width: 125px;background:#7f7"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="125"></td>
<td style="width: 125px;"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="125"></td>
</tr>
<tr>
<td colspan="2" rowspan="2" style="width: 250px;background:#ccc"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="250"></td>
<td colspan="2" rowspan="2" style="width: 250px;background:#5cc"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="250"></td>
</tr>
</table>
<tr>
<td style="width: 125px;"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="125"></td>
<td colspan="2" rowspan="2" style="width: 250px;background:#e1e"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="250"></td>
<td style="width: 125px;background:#d2d"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="125"></td>
</tr>
<tr>
<td style="width: 125px;background:#7f7"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="125"></td>
<td style="width: 125px;"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="125"></td>
</tr>
<tr>
<td colspan="2" rowspan="2" style="width: 250px;background:#ccc"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="250"></td>
<td colspan="2" rowspan="2" style="width: 250px;background:#5cc"><img src="http://www.acf.org/images/American_Chestnut_Tree.jpg" width="250"></td>
</tr>
</table>
CITAT (don_dannielo @ 30th September 2009, 09:38)
Nu reusesc sa fac ceva ca in imaginea de mai jos.
Liniile negre sunt tabelul, si patratele verzi sunt niste poze cu dimensiunile respective.
Stiu ca pentru celulele mari trebuie folosit colspan="2" rowspan="2".
Dar problema apare atunci cand introduc prima poza mare de jos (din stanga). TOATA coloana, inclusiv cele doua celule de 125px de deasupra, se mareste la 250px.
Exista solutii, dar totul facut dintr-un singur tabel?
Liniile negre sunt tabelul, si patratele verzi sunt niste poze cu dimensiunile respective.
Stiu ca pentru celulele mari trebuie folosit colspan="2" rowspan="2".
Dar problema apare atunci cand introduc prima poza mare de jos (din stanga). TOATA coloana, inclusiv cele doua celule de 125px de deasupra, se mareste la 250px.
Exista solutii, dar totul facut dintr-un singur tabel?
sau renunti definitiv la tebel si faci cu div. UIte-asa:
CODSURSA
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.clearfix:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix{height: 1%;}
.float-left {float:left}
.float-right {float:right}
#wrapper {margin:0 auto;width:540px}
#first-block {background:gray}
#second-block {background:yellow}
.narrow {width:125px;padding:10px 10px 0 10px;min-height:250px;}
.wide {width:250px;padding:10px 10px 0 10px;min-height:250px;}
#first-block .wide {padding: 10px 0 0 0}
.image {background:green;text-align:center;margin-bottom:10px}
.wide .image {min-height:250px}
.narrow .image {min-height:125px}
</style>
</head>
<body>
<div id="wrapper">
<div id="first-block" class="clearfix">
<div class=" narrow float-left">
<div class="image">poza 125px</div>
<div class="image">poza 125px</div>
</div>
<div class="wide float-left">
<div class="image">poza 250px</div>
</div>
<div class="narrow float-left">
<div class="image">poza 125px</div>
<div class="image">poza 125px</div>
</div>
</div>
<div id="second-block" class="clearfix">
<div class="wide float-left">
<div class="image">poza 250px</div>
</div>
<div class="wide float-right">
<div class="image">poza 250px</div>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.clearfix:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix{height: 1%;}
.float-left {float:left}
.float-right {float:right}
#wrapper {margin:0 auto;width:540px}
#first-block {background:gray}
#second-block {background:yellow}
.narrow {width:125px;padding:10px 10px 0 10px;min-height:250px;}
.wide {width:250px;padding:10px 10px 0 10px;min-height:250px;}
#first-block .wide {padding: 10px 0 0 0}
.image {background:green;text-align:center;margin-bottom:10px}
.wide .image {min-height:250px}
.narrow .image {min-height:125px}
</style>
</head>
<body>
<div id="wrapper">
<div id="first-block" class="clearfix">
<div class=" narrow float-left">
<div class="image">poza 125px</div>
<div class="image">poza 125px</div>
</div>
<div class="wide float-left">
<div class="image">poza 250px</div>
</div>
<div class="narrow float-left">
<div class="image">poza 125px</div>
<div class="image">poza 125px</div>
</div>
</div>
<div id="second-block" class="clearfix">
<div class="wide float-left">
<div class="image">poza 250px</div>
</div>
<div class="wide float-right">
<div class="image">poza 250px</div>
</div>
</div>
</div>
</body>
</html>
QUOTE (don_dannielo @ 30th September 2009, 11:59)
Pai exact asa am facut, si apare probleme. De fapt arata bine in IE8, dar in restul browserelor nu. In Firefox se mareste toata coloana din stanga + cea din dreapta, inclusiv celulele cu poze mici, iar in Chrome se lungeste doar partea din dreapta.
la mine arata bine in chrome, opera si ie8.
scoate width de pe toate td-urile si de pe table daca ai pus imagini ce au dimensiunile alea. probabil de aia ai probleme in ff
QUOTE (Jumping Jack @ 30th September 2009, 12:25)
sau renunti definitiv la tebel si faci cu div. UIte-asa:
Asta se pare ca merge.
Acum sa vad daca-l pot adapta, pentru ca exemplul de sus era... doar un exemplu. Tabelul e generat dinamic, se lungeste mult in jos si exista tot felul de combinatii de poze de cele doua marimi, de-aia as fi preferat tabele html. Erau mai usor de generat.
QUOTE (unu @ 30th September 2009, 12:36)
la mine arata bine in chrome, opera si ie8.
scoate width de pe toate td-urile si de pe table daca ai pus imagini ce au dimensiunile alea. probabil de aia ai probleme in ff
scoate width de pe toate td-urile si de pe table daca ai pus imagini ce au dimensiunile alea. probabil de aia ai probleme in ff
Ciudat. O sa incerc.
TX.
Aceasta este o versiune simplificată a paginii originale. Pentru a vizita versiunea originala click aici.