Autor Zpráva
Urza
Profil *
Zdravím .

Jak jsem pročítal všechny možné manuály a diskuse o css , pochopil jsem ( a doufám , že jsem to pochopil špatně ) , že css layout neumožňuje následující rozložení . Chtěl totiž ve stránce , která má na levé straně menu a na pravé obsah , ve kterém jsou nalevo ( tedy blíže k tomu menu ) plovoucí objekty ( float:left ) , ukončit obtékání toho objektu .
Jenže když použiji clear:both nebo clear:left , prohlížeče to nevztáhnou k parent objektu ( tedy k tomu obsahu ) , ale k celé stránce , takže se to začne vykreslovat až za tím menu . Je tedy možné nějak ukončit obtékání objektu s vlastností float:left , pokud je tento objekt v divu , který se sám vyresluje vedle jiného , který už float:left má ?
Zkoušel jsem několik způsobů , jak toto chování obejít , ale veskrze marně . Dosáhl jsem částečných úspěchu , nicméně fungovaly vždy jen pro některé prohlížeče .
Konkrétněji : chci v tom obsahu ( který má vedle sebe po levé straně menu ) vytvořit dvousloupcovou tabulku , jejíž obsah je ale generován dynamicky , čili na žádné řádce nevím , jestli bude v levém či pravém sloupci delší text ( a kolik řádků tedy každá buňka tabulky bude mít ) . Při tvorbě této tabulky narážím především na to , že IE se chová naprosto dementně a při ,, pro něj nevhodném ´´ rozvržení textu dělá různé náhodné chyby ( například přestane zobrazovat části stránky , nicméně tak , že když se po té nezobrazené části stránky přejede myší , zobrazovat ji začne , aniž dojde vůbec k nějakému refreshi či změně kódu ) .

Děkuji za případné odpovědi ,
Urza

PS : Vím , že bych mohl použít místo css tabulku a asi to ve výsledku udělám , pokud to nepůjde jinak . Takže moc prosím , piště mi sem pouze rady , jak to udělat v css layoutu .
tiso
Profil
http://ie-brouci.dero.name/peekaboo.html
Urza
Profil *
Děkuji moc , dals mi řešení problému , které už marně hledám asi dva dny .

Každopádně mám ještě ( tentokrát jen ze zajímavosti ) otázku , kterou už nepotřebuji ke svým stránkám , ale prostě by mě zajímalo , jestli to umí css layout řešit .

Když je menu vlevo , obsah vpravo a v obsahu mám objekt s vlastností float:left a chci ukončit jeho obtékání POUZE V RÁMCI OBSAHU ( aby se to neřadilo za to menu ) - jak to udělat ? Jde to vůbec ?
Tady to lze ( těžko , ale přece ) řešit nějakýma fintama , nicméně neumím si představit , jak bych něco takového řešil v případě , že bych měl nějaké jiné menu i vpravo .
Dočetl jsem se o tom , že by se to dalo nahradit tím , že se tam vloží div s vlastností width=100% , nicméně toto řešení nefunguje v IE6 .
Každopádně tato otázka je čistě teoretická , nepotřebuji to k ničemu , jen mě to zaujalo .

Ještě jednou díky za vyřešení mého problému .
tiso
Profil
Urza - daj sem link na ukážku kde ti to robí, alebo sem vlož celý html súbor i css.
Urza
Profil *
Už nemám takový link , opravil jsem to .

Ale prostě obecně stačí napsat ( tohle není příklad žádné konkrétní stránky , jen zobecňuji to , o čem mluvím ) :
<div style="float:left; width: 256px">
  tady je menu<br/><br/><br/><br/>a tak dále
</div>
<div style="margin-left:256px">
  nadpis obsahu
  <div style="float:left">
    tady je objekt OoO
  </div>
  <div style="clear:left">
    a tohle bych rád zařadil pod objekt OoO , nicméně bude začínat až pod textem ,, a tak dále ´´ v levém menu , protože clear:left ho zarovná podle toho menu
  </div>
</div>



A otázka je , jak něco zařadit pod objekt OoO , nicméně ne pod úroveň toho menu .
Že se to zařazuje pod menu je vyzkoušeno v Opeře v. 8.5 , FF v. 1.5.0.12 a IE v. 6.0.2900.2180 a v nějakém beta Chrome , jehož verzi neznám , nebo ho tu momentálně nemám .

Tohle samozřejmě není kritika těch prohlížečů , ono se to tak skutečně MÁ CHOVAT . Já se jen ptám , jak to udělat , když nechci , aby se to tak chovalo a chci prostě zarovnat text doleva pod objekt OoO , ale ne pod konec toho menu .
Urza
Profil *
Přičemž v tohle případě se bude stejně chovat i clear:both . Clear:right udělá samozřejmě něco jiného .
Jde si též pomoci tím , že ten text , který chci hodit pod to OoO dám do divu , který bude mít nastaveno width:100% , ale IE to stejně nepochopí ( a pokud to pochopí v tomto jednoduchém příkladu , tak stačí přídat nějaký ten margin a vložit ještě pár divů do těch již existujících a IE to nevykreslí .

Navíc to není moc přímočaré řešení ,, k tomu určené ´´ . Prostě kdybych dělal tabulkový layout , je jasné , jak to udělat ,, tak , jak se to má dělat ´´ . V css layoutu nevím o žádném ,, přímočarém ´´ řešení , které je ,, k tomu určeno ´´ .
Jinak tím tady nechci obhajovat tabulkový layout před css , nejsem žádný zastánce ani jednoho , jsem začátečník a netroufám si ještě mít pevný názor , protože o dané problematice moc nic nevím , ač už jsem četl hodně článků na dané téma .
tiso
Profil
Urza - to je tak, keď floatuješ prvky a nezadávaš im šírku...
Pre obsah nastav miesto marginu float: left
Urza
Profil *
Tak tohle naprosto nechápu .
Když nastavím místo marginu float:left , logicky se obsah zařadí doleva POD MENU , což sice řeší ten problém s obtékáním , ale přehází mi to celé stránky tak , že mám menu NAD obsahem , když ho chci mít vedle .
tiso
Profil
Urza - v tom prípade máš užší monitor ako ja.
Neviem odkiaľ berieš tú svoju logiku, ale skús si prečítať ako funguje float a clear. Kde je problém som ti napísal naposledy, že čítaš len druhú vetu, za to fakt nemôžem.
Plaváček
Profil
Urza

Já ti rozumím, co potřebuješ. Prvek s clear:both dělá přesně to, co se od něj očekává, ukončí obtékání plovoucích prvků. Nicméně situace je vcelku snadno řešitelná a máš v zásadě dvě možnosti:

1. U layoutu s pevnou šířkou to problém není, prostě oba bloky budou plovoucí a každý bude mít pevně stanovenou šířku, čímž podobnému problému zamezíš (a také vyřešíš 3px float bug).

2. U layoutu s plovoucí šířkou je situace složitější, nicméně dá se řešit vložením dalšího bloku do "main", kterému se nastaví šířka na 100% a nechá se také plavat (a opět se jakoby mimochodem zbavíš 3px float bugu). V rámci něho pak už můžeš používat clear bez problémů. Jedná se o obvyklé řešení a dělá přesně to, co je třeba.

Tohle by mělo fungovat korektně:

http://klient.plavacek.net/float.html

Ke studiu:

http://www.pixy.cz/pixylophone/2003_12_archiv.html#1071056082
Urza
Profil *
Děkuji za rady , už tomu rozumím .

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0