Lekerekített sarkú téglalap képekből
Sziasztok!
Terveztem egy egyszerű kinézetet: az oldal tartalma egy lekerekített sarkú téglalapban lenne az oldal közepén. Csináltam 8 képet (sarkok, bal, jobb, felső, illetve alsó rész), az oldalt pedig 9 DIV-ből építettem fel. A középsőben van a tartalom, a többinél meg a képek vannak beállítva háttérként. Ez idáig szép, és jó, viszont ha a tartalomba hosszabb szöveg kerül, akkor a design szétesik. Ez lenne még csak a kisebbik gond, a nagyobb az, hogy másik két DIV marad ugyanakkora méretű.
http://ti_00652.extra.hu/krizsi-dtr/div.html
Ezért átírtam az egészet táblázat alapúra, gondoltam így jó lesz (ha egy cella megnyúlik, akkor vele a sor is). Addig rendben is van, hogy a sor megnyúlik, de a bal és jobb oldali cellák maradtak ugyanakkorák.
http://ti_00652.extra.hu/krizsi-dtr/table.html
Hogy lehetne ezt normálisan kivitelezni?
■ Terveztem egy egyszerű kinézetet: az oldal tartalma egy lekerekített sarkú téglalapban lenne az oldal közepén. Csináltam 8 képet (sarkok, bal, jobb, felső, illetve alsó rész), az oldalt pedig 9 DIV-ből építettem fel. A középsőben van a tartalom, a többinél meg a képek vannak beállítva háttérként. Ez idáig szép, és jó, viszont ha a tartalomba hosszabb szöveg kerül, akkor a design szétesik. Ez lenne még csak a kisebbik gond, a nagyobb az, hogy másik két DIV marad ugyanakkora méretű.
http://ti_00652.extra.hu/krizsi-dtr/div.html
Ezért átírtam az egészet táblázat alapúra, gondoltam így jó lesz (ha egy cella megnyúlik, akkor vele a sor is). Addig rendben is van, hogy a sor megnyúlik, de a bal és jobb oldali cellák maradtak ugyanakkorák.
http://ti_00652.extra.hu/krizsi-dtr/table.html
Hogy lehetne ezt normálisan kivitelezni?
egy képből
a doboz akkorára nyúlik majd, amekkora tartalmat teszel bele. ha ez így nem jó, ajánlom figyelmedbe a min-height css tulajdonságot.
ez most ie6-ban is működik, ha ez nem követelmény, akkor a jelenlegi 3 helyett elég 2 div is egymásba ágyazva. a felső íveket áttetszővé kell tenni (alfa-csatorna), így a külső div alatt a body kék háttérszíne, a belső alatt pedig a fehér háttérszíne fog áttűnni.
Tutorial
Üdv: Nu7ec
css clear
<div id="felso" class="vizszintes"></div>
<div id="jobb_felso" class="sarok"></div>
<div style="clear : both"><!-- --></div>
Ezt minden olyan "sor" végére berakod, ahol véget ér a float.
A css-eden még annyit változtatnék:
float: left;
background-color: #ffffff;
padding: 5px;
width: 890px;
height: 390px;
overflow-y : auto;
overflow-x : hidden;
}
A magasság adott lesz, és ha a tartalom kilógna a keretből, akkor megjelenik a görgetősáv az adott diven belül.
Amúgy a javaslatom a következő lenne, ha fix szélességet használsz:
<div id="felso"><!-- --></div>
<div id="kozepso">
<div id="tartalom">
...
</div>
</div>
<div id="also"><!-- --></div>
</div>
És css-el beállítod a felsőnek meg az alsónak a képeket, a középsőnek meg a háttérszíne simán fehér. A tartalom divre csak azért lehet szükség, hogy megfelelő keretet adhass neki (IE is szeresse), az alap divvel meg középre tudod igazítani. Még a margókat állítod 0-ra, és készen is vagy.
Az eredeti megoldásodban a baj és jobb divek magasságát js-el hozzá kell igazítanod a tartalom div magasságához, ha annak változik a tartalma, és magasabb, mint amit a css-ben megadtál. (Bár ha használsz jQuery-t, akkor ez nem nagy ügy.)
Fuppa
nem értem a logikád