Vidim da se masovno priča o responsivnom webu, pa kud turci…
Osnovni layout moje stranice je sidebar (#lijevastrana) lijevo i content (#desnastrana) desno. Pošto mi sidebar na nekim stranicama sadrži ‘in page’ navigaciju relevantnu za content sadržaj, sasvim ok je da u responzive bude na vrhu. No npr. na index.php bi volio sidebar prebaciti na dno (ispod contenta).
Kako prilagoditi responsive CSS (ili html) da se to postigne.
LINK
probaj zamijeniti logički redoslijed - stavi da ti u html kodu prvo ide desnastrana pa nakon toga lijevastrana.
U normalnoj rezoluciji nema efekta ali u responsive dijelu dobiješ što si htio.
Da, dobro si mu rekao.
I onda napravi media max width za sve tablete i mobitele i fiksne (px) sirine lijeve i desne strane zamijeni sa dinamicnom velicinom, tj sa postotcima (100%). Mozda za tablete ovo i ne moras, ali za mobitele definitivno da.
to bi ti otprilike ovako izgledalo
@media (max-width: 539px){
#lijevastrana {
width: 100%; /*Ovdje je izvrsena zamjena*/
padding-left : 5px; /*Ovo mozda ukloniti, testiraj pa vidi treba li*/
height : 90%; /*Ovo isto testiraj pa vidi sto treba*/
}
#desnastrana {
width: 100%; /*Ovdje je izvrsena zamjena*/
min-height : 0px; /*Ovdje je izvrsena zamjena*/
height: auto; /*dodan novi atribut*/
margin-bottom : 15px;
margin-right : 5px;
margin-top :80px; /*margine testiraj pa vidi, margin-top ce vjerojatno trebati smanjiti*/
}
}
Evo, to ti je ukratko to. Makar se ovo ne moze napraviti ukratko…
Slobodno eksperimentiraj sa max-width: velicinom, ja sam ovaj 539px izvukao iz jednog od svojih radova, ali ja sam po bootstrapu radio tako da su i neke druge stvari igrale ulogu pa mozda tebi bolje bude odgovarala neka druga sirina.
Osobno, ja bih cijeli sajt prekodirao u bootstrap framework i miran si, ali ima tu dosta i posla…
Note : width : 100% + padding-left/right ili margin-left/right ti daje više od 100% width, to može raditi ako je postoji div koji nije floatan i nema definiran width.
Već sam bio probao u html sa zamjenom rasporeda dotičnih elemenata i nije radilo. Po vašem savjetu ubacivanjem “box:sizing” sve je ok.
Očito je bilo nekog klanja sa margin i padding kako ste već i napisali.
zašto mora ovako početi ? ovo se može puno bolje napisati
i
body { font-size: 62.5%; /*je 10px a ne 12px */ }
nema potrebe postavljati html na 16px to je po defaultu tako na 99.9% preglednika.
spuštanje veličine fonta na 10px je nekad smatrano dobrom praksom ali više nije. Najbolje je ostaviti defaultnih 16px. Universal selektor je skup i treba bit oprezan kad ga se koristi i zašto ne ovako kombinirat sve u jedno ,a ne 2 puta koristit.
Administrator sam foruma koji je hostan na Forumotionu (free forums). Dakle sa ograničenom mogućošću uređivanja (dostupno je tek nekoliko template modula za editiranje).
Nemamo tapatalk, mobile view je očajan, a po GA već preko 20% korisnika stiže sa smartphone uređaja. Zato pokušavam sa ograničenim mogućnostima i znanjem uraditi responsive pogled. Nešto sam čak i uspio, ali zasad vidim barem dva problema koja ne znam riješiti.
Smanjiti (background-size) ili barem pomaknuti više ulijevo strelicom označene ikone
2.2 Quick Replay bar je preuzak (50%) na smart uređajima. U template editoru nemam mogućnosti editiranja istog je je na tom mjestu nekakav smarty - {QUICKREPLAY}. Pokušao sam sa CSS, ali inline style izgleda sve pragazi.
Zanima me da li se ikako može pregaziti taj inline style.