Potrebna pomoc responsiv design HTML i CSS ako ste raspolozeni!

[joca pa]

Poredjao sam 20 slicica u 2 reda,izgleda kao traka sa slicama.E sad na laptopu mi je sve ok,traka(tj. slicice) su od leve do desne stranice ali kad to otvorim ma kompu gde je monitor dosta vecitraka sa slicicama dodje do pola monitora.Kako da je razvucem ili skupim u zavisnosti od rezolucije?

 

[avaxx11]

Mozda css: width: auto; height: auto;

 

[joca pa]

Velicinu slika sam definisao pikselima pa nisam nikako to mogao da resim.Onda sam to prebacio u procente i sve je bilo ok.Ali hvala u svakom slucaju.
Pozz!

 

[kobayashi]

Može i u pikselima, ali ne može sa konstantnim dimentijama.
Za DIV koji je traka staviš dimenzije npr. max-width: 1200px; i min-width: 800px;
Međutim, onda moraš sličice zadati u procentima (znaš koliko sličica staje u koju traku) širine trake kako bi im se menjala veličina i tako traka uvek bila popunjena.

Takođe, možeš i sa "float" da uradiš da ti sličice budu uvek istih dimentija, ali da se "prelivaju" iz trake u traku u zavisnosti od širine (tj., kako menjaš širinu trake, u prvi red će stati manje ili više sličica u zavisnosti od širine, a višak će ići u drugi red itd.).

Za ovakve stvari najbolje postavi kod na jsfiddle ili negde drugde, da ne nagađamo...

 

[braca07]

@charset "utf-8";
/* CSS Document */


body {
margin:0;
padding:0;
background:#FF9;
}

#wrapper {
margin:0 auto;
background:#060;
width:1170px;
}

#header {
height:100px;
background:#09C;
}

#main {
float:left;
width:700px;
height:200px;
background:#F33;
}

#sidebar {
float:left;
width:470px;
height:200px;
background:#396;
}

#footer {
height:100px;
background:#930;
clear:both;
}

@media screen and (min-width:1024px) and (max-width:1260px) {
#wrapper {
width:960px;
}

#main {
width:600px;
}

#sidebar {
width:360px;
}
}

@media screen and (min-width:768px) and (max-width:1023px) {
#wrapper {
width:700px;
}

#main {
width:440px;
}

#sidebar {
width:260px;
}
}

@media screen and (min-width:460px) and (max-width:767px) {
#wrapper {
width:420px;
}

#main {
float:none;
width:100%;
}

#sidebar {
float:none;
width:100%;
}
}

@media screen and (max-width:459px) {
#wrapper {
width:90%;
}

#main {
float:none;
width:100%;
}

#sidebar {
float:none;
width:100%;
}
}


Ovo ti je konpletan CSS za responsive dizajn samo css , za osnovnu postavku strane . I u HTML -u I u CSS-u treba dodati ostale elemente (sadrzaj.....) ! Nadam se da ce ti ovo pomoci .

 

[braca07]

nisam rekao , u html-u , osim povezivanja sa css folderom , sve je normalno , hocu da kazem ne postoji nista sto bi se nazvalo responziv html .
OK , ako hoces CSS na strani (inlajn) , ali svako ko je iole ozbiljan izbeci ce to . Prvi i osnovni razlog , stranice se ucitavaju sa HTM - la , pa mnogo sadrzaja sporo ucitavanje . Peporucuje se smestanje svih sadryaja i dizajna stranice u posebne foldere .
Sve se smesta zajedno sa html - om u jedan folder , a ostali folderi vezuju se linkom sa html-om. Cak i JQUERy se smesta u folder , posto link sa jquery resursima (ili nekim driugim , koji su sastavni deo strane) moze i da iz nekog razloga ne radi .

 

[braca07]

background: #fffced url(../images/bg2a.jpg) center 0 no-repeat fixed;

Kroz sccs postavis taj BACKGROUND . postavlja se i boja (#ffffff) , pa url?(). U folder sa slikama smestis fotografiju i povezas je kroz url (postavis je na html stranu . Nije potrebno nista u html -u .

Mada moze i na html strani , ali opet ne znam zasto . Sve sto ne mora ne pises na HTML .