CSS vertikalne...? – CSS – Fórum – Programujte.com

v css layoutoch som viacmenej zaciatocnik, neviem prelomit nasledujuci problem, ani som nan nikde nenasiel riesenie...

nespravny boxing ie, riesim cez "matriosky":

.outer { width: 202px; }

.inneer { border: solid 1px #000; }



...



<div class="outer"><div class="inner">...</div><div>

.outer { height: 202px; }

.inner { height: 200px; border: solid 1px #000; }

Prog. píše:#
# v css layoutoch som viacmenej zaciatocnik, neviem prelomit nasledujuci problem, ani som nan nikde nenasiel riesenie...#
##
#nespravny boxing ie, riesim cez "matriosky":#
##
#

#
#.outer { width: 202px; }#
#.inneer { border: solid 1px #000; }#
##
#...#
##
#<div class="outer"><div class="inner">...</div><div>#
#

#
#..tymto zarucim ze vnutro je presne 200px siroke a ramcek 1px skazdej strany, dokopy mam 202px. Vsetko funguje na pixel presne ako ma.#
##
#ok, teraz by som chcel to iste s height. Existuje nejake moznost? ako to spravit? ked nastavim .outer.height na nejaky rozmer, aby sa do neho inner automaticky natiahol aj na vysku ako sa to deje so sirkou, ked je width:auto. Jedina moznost, ako mi to funguje, je nepevno nastavit vysku .inner-u:#
#

#
#.outer { height: 202px; }#
#.inner { height: 200px; border: solid 1px #000; }#
#

#
##
#...ono by to aj stacilo, ale niekedy potrebujem nastavit .ounter.height =100%, a potom by to chcelo nastavit .inner.height na 100% - 2px, Aj to som skusal, ale ziadny browser mi to neberie, a w3c by sa to tiez asi nepacilo :-)#
##
#Da sa to nejako riesit...?#
##
#

Ty jsi pou?il pixiho "matro?ka hack". J? bych to ?e?il jinak, proto?e v?po?et "100% - 2px" je nesmysl. Zkus podtr??tkov? hack:" _width" a "_height" IE je rozpozn?, ale ostatn? pohl??e?e ne. V?ce najde? na http://www.jakpsatweb.cz/css/mody-prohlizecu.html

To Lukáš Chadraba: To je taky možnost jak to nahackovat - pravděpodobně validně, ale já ji nemám rád pro nepřehlednost

RobinHood píše:#
# To Lukáš Chadraba: To je taky možnost jak to nahackovat - pravděpodobně validní, ale já ji nemám rád pro nepřehlednost

To Lukáš Chadraba: No ona se někdy funkčnost, sémantika a validita docela vylučuje. Chce to najít nějaký zlatý střed. Cituju Yuhůa, abych ti ukázal princip toho hacku.

Matrjoška

Matroška hack vyžaduje trochu ukecanější html kód, ale přijde mi na hackování rozměrů nejspolehlivejší. Zakládá se na tom, že se vůbec nepoužívá padding. Pokud nějakému prvku chcete přidat padding, uděláte to tak, že celý obsah prvku obalíte ještě jedním divem a tomu nastavíte margin. Margin se v obou režimech interpretuje stejně, takže nevznikají žádné odlišnosti. Příklad když chci mít prvek široký 300 pixelů včetně paddingu (jako by to odpovídalo quirk módu),

tak namísto

<div style="padding: 5px; backgound-color: yellow; width: 300px;">
obsah prvku
</div>

stačí napsat

<div style="backgound-color: yellow; width: 300px;">
<div style="margin: 5px;">
obsah prvku
</div>
</div>

RobinHood píše:#
# To Lukáš Chadraba: No ona se někdy funkčnost, sémantika a validita docela vylučuje. Chce to najít nějaký zlatý střed.#
#cituju Yuhůa abych ti ukázal princip toho hacku.#
##
#

#
#Matrjoška#
##
#Matroška hack vyžaduje trochu ukecanější html kód, ale přijde mi na hackování rozmarů nejspolehlivejší. Zakládá se na tom, že se vůbec nepoužívá padding. Pokud nějakému prvku chcete přidat padding, uděláte to tak, že celý obsah prvku obalíte ještě jedním divem a tomu nastavíte margin. Margin se v obou režimech interpretuje stejně, takže nevznikají žádné odlišnosti. Příklad když chci mít prvek široký 300 pixelů včetně paddingu (jako by to odpovídalo quirk módu),#
##
#tak namísto#
##
#<div style="padding: 5px; backgound-color: yellow; width: 300px;">#
# obsah prvku#
#</div>#
##
#stačí napsat#
##
#<div style="backgound-color: yellow; width: 300px;">#
# <div style="margin: 5px;">#
# obsah prvku#
# </div>#
#</div>#
#

Nelze mít všechno, buď musíš slevit na sémantice, nebo na validitě. Yuh si to ale muže dovolit.
Nezapomenejme taky na to, že validita a sémantika nejsou účelem, ale prostředkem.

Luk?? Chadraba píše:#
#

RobinHood píše:#
# To Luk?? Chadraba: To je taky mo?nost jak to nahackovat - pravd?podobn? validn?, ale j? ji nem?m r?d pro nep?ehlednost

#
##
#Ale mn? jde o to pro? to vůbec chce. Dva divy v sob? jsou nes?mantick? a zbyte?n? v tomhle p??pad?

Co se t??e prvk? span a div, tak ty na s?mantickou strukturu obsahu maj? nulov? vliv ? pokud jsou spr?vn? pou?ity, maj? nulov? vliv i na fyzickou strukturu dokumentu samotn?ho. T?m m?m na mysli hlavn? "zabalen?" n?jak?ho bloku do dal??ho div, ?i zabalen? ?seku textu do prvku span. Kdy? se nebudou "k???it" se s?mantikou dokumentu (tj. nezbal? se nap?. do jednoho div p?lka prvn? kapitoly s p?lkou druh?) a ponech? se jejich v?choz? rozd?len? (na bloky je div, na ??dkov? obsah span), pak jsou zcela transparentn? a maj? na strukturu dokumentu nulov? vliv.