Responsive CSS pomoć

paor · srpanj 2014 09:17 27

pregled1

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

Hvala

<div id="lijevastrana"></div>
<div id="desnastrana"></div>

desktop CSS:
------------
#lijevastrana {
    width: 320px;
    background-color : transparent;
    float : left;
    padding-left : 5px;
    height : 90%;
    text-align : center;
}

#desnastrana {
    width: 590px;
    min-height : 450px;
    background-color : transparent;
    float : right;
    margin-bottom : 15px;
    margin-right : 5px;
    margin-top :80px;
}

responsive CSS:
----------------
#lijevastrana {
   width:99%;
    background-color : transparent;
    float : none;
    padding: 1px;
    height :auto;
    text-align : center;
}
#desnastrana {
    width:100%;
    min-height : 50px;
    background-color : transparent;
    float : none;
    margin-bottom : 15px;
    margin-right : 1px;
    margin-top :1px;padding:2%;
    overflow-y: scroll;
}

cronex · srpanj 2014 22:50 27

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.

Anteloff · srpanj 2014 23:53 27

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…

cronex · srpanj 2014 07:05 28

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.

Anteloff · srpanj 2014 22:28 28

Da, promaklo mi je to…

ili moze ipak dodati ovaj kod u #lijevastrana i #desnastrana :

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit /
-moz-box-sizing: border-box; / Firefox, other Gecko /
box-sizing: border-box; / Opera/IE 8+ */

I dodati na oboje padding: 5px; , jer ipak obicaj je da se na mobitelu ostavi malo paddinga…
a margine left i right kao sto si i ti rekao, izbaciti.

paor · kolovoz 2014 07:15 7

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.

Hvala lijepo

creatifcode · kolovoz 2014 08:39 7

Ovaj dio ide obavezno na vrh svakog CSS filea, a najbolje je to ovako napisati kako si ti napisao, samo promijeniti selektore. Znaci

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit /
    -moz-box-sizing: border-box; / Firefox, other Gecko /
    box-sizing: border-box; / Opera/IE 8+ */
}

i dodati jos

*, html {
    margin: 0; paddinng: 0;
}
html {
    font-size: 16px;
}
body {
    font-size: 62.5%; /* 12px */
}

i sve skupa jos jednom.

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit /
    -moz-box-sizing: border-box; / Firefox, other Gecko /
    box-sizing: border-box; / Opera/IE 8+ */
}

*, html {
    margin: 0; paddinng: 0;
}
html {
    font-size: 16px;
}
body {
    font-size: 62.5%; /* 12px */
}

i to je obavezan pocetak svakog CSS filea, bez ovoga nema dalje.

blaja · kolovoz 2014 00:32 8

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.

* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit /
-moz-box-sizing: border-box; / Firefox, other Gecko /
box-sizing: border-box; / Opera/IE 8+ */

margin: 0;
padding: 0;

}

i ovaj selektor je smiješan

*,  html {}

apazinjan · kolovoz 2014 02:59 8

Nema potrebe za izmisljanjem tople vode http://necolas.github.io/normalize.css/

creatifcode · kolovoz 2014 07:15 8

slazem se.
■■■■■ ti 20 znakova

paor · siječanj 2015 18:48 15

idemo dalje

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

template code:

`<dl class="icon icon2" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;" >`

browser inspect code

<dl class="icon icon2" style="background:url(http://hitsk.in/t/10/60/62/i_folder_big.gif) no-repeat scroll 10px 50%;">

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.

browser inspect code

<form action="/post" method="post" name="post" id="quick_reply">ev
<div id="textarea_content" style="width: 50%; clear: both; margin-left: auto; margin-right: auto; text-align: center;">

Inače, @media screen… mi se nalazi u headu (owerall header template editing).

Hvala