Autor Zpráva
raddimm.xx
Profil
Mám takový problém

Na stránce:

<div id="zahlavi">
</div>

<div id="obsah"></div>
<div id="levysloupec"></div>

<div id="paticka"></div>

levysloupec je až druhý v pořadí protože bych chtěl aby při "procházení" prohlížečem byl první obsah (má smysl?)

Nicméně při použití responzivního webu na mobilu se levysloupec (jelikož je až po "obsah") zařadít pod obsah (obsah mám na celou šířku)
Potřeboval bych to menu přesmistit při responzivitě nahoru

Je na to řešení? nebo se mám vykašlat na pořadí a v HTML přemístit levysloupec přes obsahem

Děkuji za každou radu
Keeehi
Profil
raddimm.xx:
Všechno se dá. Bohužel jsi nám neukázal CSS. Nejlépe, když vytvoříš živou ukázku na http://kod.djpw.cz/
raddimm.xx
Profil
css nemám protože nevím jak na to
v tomto případě je proste jen

#obsah { width: 400px; float: right; }
#levysloupec { width: 400px; float: left; }

cimze je zahlavi
levy sloupec vlevo, pravy jde do prava
paticka

a muj cil je pro mobilni zarizeni (pro tento priklad o sirce 400px) to naskladat tak aby #levysloupec byl prvni

http://kod.djpw.cz/eklb
Keeehi
Profil
Responzivní design a používat pevnou šířku soupců? Nu což. Ukázku jsem vytvářel pro slupce o šířce 500px, takže to má vlastně 2 stavy pod 1000px a nad 1000px.

Živá ukázka

Testoval jsem to v Chrome a IE. Kvůli tomu, že jsou použity media queries pro přepínání mezi těmi dvěma stavy, tak to funguje od IE9. V IE8 a níž to responzivní není a má to stále 1000px. Meadia queries se však dají zprovoznit přes polyfill Respond.

Tím si sice pomůžeš u IE8 ovšem IE7 aníž má tentokrát jiný problém. Neznají display: table; takže pro ně přehození fungovat nebude a obsah tedy zůstane pořád nahoře. No vzhledem k malé penetraci IE7 to můžete ignorovat nebo si na to vytvořit v javascriptu fallback a prostě ty divy pomocí něho jen přehodit. Samozřejmě že použití javascriptu a polyfillu (což je taky javascript) na něm vytváří závislost ale lépe to prostě nejde.

Ještě se to dá celé vytvořit pomocí pozicování. Je k tomu ale zapotřeba mít pevnou výšku u levého sloupce. A pak myslím že zase media query pro určení breakpointu.

Při výzkumu jsem ještě pro IE objevil případně jednu metodu jak ty prvky prohodit když jsou pod sebou:
#helper #obsah #levysloupec { filter:flipv; }
Což je rozhodně velmi zajímavé řešení. Já jsem však filtrům nikdy moc nefandil.

Velmi pomáhá, že mají oba bloky fixní šířku. I když i s proměnlivou šířkou by to mělo jít. Záleží na požadavcích.

Ale tu nejpodstatnější otázku jsem si nechal až na konec: "Proč to chceš takto?" Před několika lety by to asi smysl mělo, kdy kvůli nestabilnímu připojení se nenačetly styly, načetla se jen část stránky a nebo google zobrazoval v úryvku špatnou část stánky a nacpat mu obsah na začáte prý pomáhalo. Dnes už na tom tak špatně nejsme, takže je důležité zhodnotit, co nám to vlastně přinese a zda to převáží ty nevýhody s tím spojené.
raddimm.xx
Profil
dekuji za velmi vyčerpavájící dotaz
a ano i muj poddotaz vlastně byl: má to vůbec smysl řešit. Dneska už si asi vyhledávače poradí.
OK děkuji velmi za čas, tipy

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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