| Autor | Zpráva | ||
|---|---|---|---|
| skaaj Profil |
#1 · Zasláno: 15. 3. 2011, 12:57:38 · Upravil/a: skaaj
Zdravim,
Na tomto webe je zoznam tovaru rieseny ako tabulka, kde kazdy riadok obsahuje tri polozky. Problemom je zlty box v spodnej casti bunky, rad by som ho odsadil do rovnakej vysky pre vsetky polozky v riadku. Skusal som boxy absolutne pozicovat na spodok riadku <tr>, toto riesenie vsak neviedlo k nicomu. Nemate nejake napady ako na to? Dakujem |
||
| Michal Benda Profil |
#2 · Zasláno: 15. 3. 2011, 14:41:47
Stačí přidat další řádek <tr> pod řádek ve kterém je popis a tam dát ten zlatý box... tím že tam bude další řádek tak se ty boxy srovnají... Dělat ale výpis produktů pomocí tabulky je dost nepraktické... Co když jich bude víc a bude třeba je dávat pod sebe?
Pomocí tabulek bych to nedělal, ale jenom pomocí divů... Udělal bych to takto: <div class="produkt"> <div class="fotoNazevACena"><img> atd.</div> <div class="popis">Popis produktu:sit amet, con... atd.</div> <div class="kosik"><input>... atd.</div> </div> To je kód pro každý produkt. Pak stačí v CSS všem produktům nastavit stejnou šířku a plovoucí umístění vlevo (.produkt {width:*px; float:left;}). Tím dostaneme to stejné, co už teďka na tom webu je a pak stačí všem popisům nastavit stejnou výšku, třeba tak velkou jak je ten popis u prostředního produktu (.popis {height:*px;})... |
||
| panther Profil |
#3 · Zasláno: 15. 3. 2011, 17:56:14
skaaj:
ať tabulkou či bez (floatované bloky (ať div, nebo LI, je to přeci jen výpis/seznam produktů) vedle sebe), ty divy jsou tam zbytečné všechny.
Výhoda floatovaných netabulkových elementů vedle sebe bude, že v nich bude možno snáze pozicovat ke spodnímu okraji. Michal Benda: „Stačí přidat další řádek <tr> pod řádek ve kterém je popis a tam dát ten zlatý box“ tohle je snad nejhorší možné řešení. Je-li tabulkový výpis, celá položka by měla být v jedné buňce. Ne v několika řádcích. |
||
| Michal Benda Profil |
#4 · Zasláno: 15. 3. 2011, 19:09:11
proto jsem psal, že bych to dělal pomocí divů... je to na skaajovi co si vybere
|
||
| skaaj Profil |
#5 · Zasláno: 15. 3. 2011, 19:10:30
@ panther jasne viem co mi chces povedat... rad by som vsak dosiahol efekt, ze tie 3 bunky vedla seba budu mat rovnaku dlzku...ak aj pouzijem nejake floatovane elementy, ako to dosiahnut?
|
||
| skaaj Profil |
#6 · Zasláno: 15. 3. 2011, 23:48:06
nakoniec si asi odpoviem sam :)
tie tri bunky spravim ako plavajuce elementy, teda napr DIV a cele ich obalim do vonkajsieho DIVu, ktoremu nastavim position:relative. Vnutornym boxom v bunkach potom staci nastavit position:absolute; left:auto; bottom:0; a mam ich napozicovane na spodok tak ako som chcel. ukazka:
<style>
.bunka{
float:left;
width: 200px;
}
.out{
position:relative;
padding-bottom:20px;
}
.box{
positon:absolute;
left:auto;
bottom:0;
height:20px;
}
</style>
<div class="out">
<div class="bunka">
bla bla bla...
<div class="box"></div>
</div>
<div class="bunka">
bla bla bla...
bla bla bla...
bla bla bla...
<div class="box"></div>
</div>
<div class="bunka">
bla bla bla...
bla bla bla...
<div class="box"></div>
</div>
<br style="clear:both" />
</div> |
||
|
Časová prodleva: 15 let
|
|||
0