Responsive CSS pomoć

Programiranje
#1

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;
}
#2

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.

#3

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…

#4

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.

1 Like
#5

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.

#6

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

#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.

#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 {}
#9

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

#10

slazem se. :smile:
■■■■■ ti 20 znakova

#11

idemo dalje :smile:

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.

  1. 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


Copyright © 2020 WM Forum - About | Contact - Sponsored by: Mydataknox & Profit Monkey