3 oszlopos webshop reszponzívvá?
Ti mit tennétek, csak simán egymás alá rendeznétek, vagy valami más megoldás is van?
Max szélességen ugyanúgy kell kinézzen.
1. oszlopban kategóriák és hírlevél
2.-ban a tartalom
3.-ban pedig "szűrés" (néhány link, hogy 0-10.000 ft-ig, 10.001- től 25k-ig, ...)
A legzavaróbb hogy a hírlevelet nem szeretném eltűntetni, de egymás alá rendezve nagyon rossz helyen van.
Pakoljam át javascripttel lentre?
Én egymás alá raknám őket, ilyen sorrendben:
2
3
1
A reszponzív megjelenésre sok lehetőség van. A két véglet a full szélesség (1200px felett) és a mobil szélesség (480px és alatta). A köztes megállókat is meg kell állapíani, és minden "megállóra" a megfelelő kialakítást és elrendezést kell megvalósítani.
Pl.:
Az oldal alapban 1000px széles, ebből 200px a bal oldal, 650px a középső tartalom, és 150px a jobb oldali oszlop.
Az első megállónál 1000px és felette az oldal így néz ki.
Ez alatt mondjuk 700pixelig az oldal jobb oldali oszlopa eltűnik, bekerül a tartalma a bal oldal alá, a tartalmi rész pedig 500pixelre szűkül.
480px-699px az oldal oldal-oszlopai lenyíló menükké válnak a felső menüsoron, az oldal tartalmi része 480px széles lesz.
Ez alatt majdnem ugyanez, csupán az oldal tartalmi része 100%-os szélességű lesz, vagyis alkalmazkodik a képernyő szélességéhez.
Ez csak egy példa, több megoldás is megfelelő lehet. Pl. a szűrőt a szűkebb képernyő méretnél az oldal tetején egy status-sávba helyezzük, hogy mindig elérhető legyen.
A reszponzív megoldásokhoz ritkán kell js, a media-query többnyire a css-en keresztül valósul meg.
köszönöm a válaszokat, én csak azt nem értem, hogy hogyan valósítható meg, hogy pl az első oszlop (vagy abból a hírlevél) kerüljön a végére.
van 3 div/oszlop egymás mellett, floattal
1 2 3
ebből hogyan lehet
2 3
1
nekem csak olyan megoldás jut eszembe, hogy vagy átrakom, vagy pozicionálom javascripttel (vagy ha fix magas pl a hírlevél, akkor simán css-el)
(persze ha a html szerkezetet módosítom 231-re, akkor 1-et balra, 2-3-at jobbra floatolva megoldható lenne az oszlopos kérdés)
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!