Autor Zpráva
Tinny
Profil *
#1 · Zasláno: 4. 3. 2005, 14:58:21
Odpovědět Citovat
ahoj,
zkoušel jsem pomocí DIVů udělat něco jako "tekutou tabulku". DIVy tak tvoří jednotlivé buňky "tabulky" a podle šířky stránky se případně přelévají na další řádek (kvůli tomu jsme to chtěl, obyčejná tabulka to neumí). Zkusil jsem to přes "display:inline" pro div; V IE to funguje bezvadně, ale v Moz jen když v divu/buňce není obsah ničím zalomen, což je potřeba... Napadá někoho, co s tím? 


<HTML><HEAD>

<STYLE type=text/css>

div {width:100px; height:100px; border:solid 1px red}

div {display:inline}

</STYLE>

</HEAD><BODY><CENTER>

<DIV>obsah<BR>prvku</DIV>

<DIV>obsah<BR>prvku</DIV>

<DIV>obsah<BR>prvku</DIV>

<DIV>obsah prvku</DIV>

<DIV>obsah prvku</DIV>

<DIV>obsah prvku</DIV>

<DIV>obsah prvku</DIV>

<DIV>obsah prvku</DIV>

<DIV>obsah prvku</DIV>

<DIV>obsah prvku</DIV>

<DIV>obsah prvku</DIV>

<DIV>obsah prvku</DIV>

<DIV>obsah prvku</DIV>

<DIV>obsah prvku</DIV>

</CENTER></BODY></HTML>
Martin Kuželka
Profil
#2 · Zasláno: 4. 3. 2005, 15:01:52
Odpovědět Citovat
Jenom otázka, proč tohle? Proč nepoužít normální tabulku?
Acci
Profil
#3 · Zasláno: 4. 3. 2005, 15:01:55 · Upravil/a: Acci
Odpovědět Citovat
Radši nastav display:block a float:left. Pak to bude to, co jsi chtěl. Firefox se chová správně.
Honza Hučín
Profil
#4 · Zasláno: 5. 3. 2005, 12:10:55
Odpovědět Citovat
Ano, Acciho řešení je typické a dělá se to tak. Nezapomeň za poslední buňkou dát block s clear:left.
Podívej se například na karolina.petnik.cz, tam je to tak udělané, stylopis je ve zdrojáku.
Fred
Profil
#5 · Zasláno: 5. 3. 2005, 12:44:30
Odpovědět Citovat
Někde jsem viděl kalendář bez tabulky, ale nemůžu najít původní zdroj, takhle to vypadalo

<style type="text/css">
h2{text-align:center;}
#calendar{padding-top:1em; width: 17em;}
#calendar span{float:left;width: 2em;padding:0;margin:0.125em;text-align:center;border:1px solid silver;}
#calendar, .sun{clear:left;}
</style>
</head>
<body>
<div id="calendar">
<h2>February 2003</h2>
<span id="d0201" class="sat">1</span>
<span id="d0202" class="sun">2</span>
<span id="d0203" class="mon">3</span>

<span id="d0204" class="tue">4</span>
<span id="d0205" class="wed">5</span>
<span id="d0206" class="thu">6</span>
<span id="d0207" class="fri">7</span>
<span id="d0208" class="sat">8</span>
<span id="d0209" class="sun">9</span>
<span id="d0210" class="mon">10</span>
<span id="d0211" class="tue">11</span>
<span id="d0212" class="wed">12</span>

<span id="d0213" class="thu">13</span>
<span id="d0214" class="fri">14</span>
<span id="d0215" class="sat">15</span>
<span id="d0216" class="sun">16</span>
<span id="d0217" class="mon">17</span>
<span id="d0218" class="tue">18</span>
<span id="d0219" class="wed">19</span>
<span id="d0220" class="thu">20</span>
<span id="d0221" class="fri">21</span>

<span id="d0222" class="sat">22</span>
<span id="d0223" class="sun">23</span>
<span id="d0224" class="mon">24</span>
<span id="d0225" class="tue">25</span>
<span id="d0226" class="wed">26</span>
<span id="d0227" class="thu">27</span>
<span id="d0228" class="fri">28</span>
</div>
Tinny
Profil *
#6 · Zasláno: 7. 3. 2005, 08:26:14
Odpovědět Citovat
Díky kluci. Ještě to trochu prokoumám.

Martine: Proč se tak ptáš? :o)

A proč Ne? Potřebuji, jak jsem napsal v úvodním dotazu, aby se jednotlivé buňky uspořádaly do řádku tak, aby jich tam bylo jen kolik se vejde. Jinými slovy při zúžení ty krajní přetečou na druhý řádek atd.
Takto vytvořená "tabulka" by měla být navíc na středu stránky.

Řešení s "float:left" dobře znám a také jej zkouším, ale zde je problém, že bez JS a fce "document.body.clientWidth" neumím tabulku vystředit;

Pokud jde o Firefox, ten příklad, co jsem vypsal úvodem... buňky kde je zalomení Firefox roztrhne a každý kousek vykreslí na úplně jiném místě stránky. Myslel jsem, že Div má zůstat vždy jako intaktní pravoúhelník... a to teda Firefox nedělá. Jestli je tohle to "správné" chování posoudit nedovedu, tolik se v tom zas nevyznám;

Tinny
Časová prodleva: 4 dny
Tinny
Profil *
#7 · Zasláno: 11. 3. 2005, 09:04:33
Odpovědět Citovat
No, porád mi ještě nikdo nevysvětlil, proč je správné takové chování v mozille a firefoxu... viz zdrojový kód v úvodu.
Plaváček
Profil
#8 · Zasláno: 11. 3. 2005, 11:43:00
Odpovědět Citovat
Když opominu fakt, že to co se snažíš vytvořit jde proti zásadám správně strukturovaného textu (na podobné věci je právě tabulka určena), pak ti doporučuji pročíst si o fungování plovoucích prvků. Z toho ti vyjde, že jediná cesta, jak zabezpečit správnou funkci je nastavit všem DIVům pevnou výšku (která je jinak dána jejich obsahem). Pokud to z nějakého důvodu nelze udělat (kupříkladu nevíš, kolik textu bude v jednom DIVu), dostal ses do situace, která není pomocí CSS řešitelná a hledal bych jiný postup.
Tinny
Profil
#9 · Zasláno: 11. 3. 2005, 15:17:37
Odpovědět Citovat
Dobře. Já to už nepotřebuji jen se ptám teoreticky.
popis chování plovoucích prvků (float, clear) jsem četl a krom toho se tohoto můj dotaz netýká. Jde o nastavení vlastnosti display:inline pro div. Když je uvnitř zalomení řádku - proč ho Gecko roztrhne? 




<HTML><HEAD><STYLE type=text/css>

div {width:100px; height:100px; border:solid 1px red}

div {display:inline}

</STYLE></HEAD><BODY>



<DIV>obsah<BR>prvku</DIV>

<DIV>obsah<BR>prvku</DIV>

<DIV>obsah prvku</DIV>



</BODY></HTML>
Časová prodleva: 19 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0