Prilagodjavanje sajta rezoluciji svih ekrana

[Milos Master]

Pozdrav,
Ja sam Milos i nov sam na forumu :rolleyes: .Trebalo bi da sam pogodio mjesto za temu.Sto se tice web razvoja za sad znam samo HTML i po nesto CSS-a.Uglavnom,poceo sam da pravim HTML sajt i dobro mi ide.Medjutim,znao sam da nece sve proci kako treba.Dizajn sajta izgleda ovako (http://displej.host56.com/).Ono sto najvise sadrzi moj sajt su "layer block-ovi",nesto slicno div-u.Dakle,plavi dio sajta,gdje se nalaze neke slike (koje nisu dostupne),zatim footer gdje pise "desktop" i sa lijeve strane gdje se nalaze bijeli pravougaonici,to sam sve napravio pomocu tih block-ova.Sta je moj problem? Ako koristite desktop racunar,sigurno imate veci monitor nego sto je moj sajt :a_whistli . Kad sam pravio sajt,napravio sam ga da bude duzine kao moj ekran,nisam mislio o tome da ce uci neko sa vecim monitorom i da ce mu veci dio ekrana biti prazan.

Ako pogledate kod sajta,mocicete da primjetite vise block-ova,medju kojima je #mainblock i #footerblock.Mainblock je blok gdje stoji 'Baner 1' a Footerblock je blok na dbu stranice gde pise 'Desktop'.E sad,ti blokovi moraju da se razvlace i da budu duzine kao i Vas ekran.To se radi kad na duzinu (width) stavim procente (%) umjesto piksela (px).Ja sam sad #mainblock stavio na width: 100% i sad bi trebalo da je on razvucen preko Vaseg ekrana.Ali,kad to pokusam da uradim sa #footerblock-om,on se samo pomjeri u lijevo i bude poravnat sa menijem sa desne strane.Dakle,treba da izgleda ovako:

http://s11.postimg.org/5yb7clmqr/footer1.png

ali izgleda ovako:

http://s17.postimg.org/5chtow8lr/footer2.png

Pa mi treba savjet,kako mogu to da regulisem,ako iko moze da mi pomogne bio bih mu zahvalan.Pozdrav :ciao:

P.S
Izvinjavam se zbog velicine slika,nisam umio drugacije.

[GojaS]

Izbaci footer iz font taga... Mada ima ovde podosta gresaka koliko vidim :/
Pretrazi Bootstrap CSS Framework na google-u i pogledaj grid system.. Nauci takodje html5 tagove.. i zapravo ceo koncept izgrade basic template-a :)

I pogledaj ovaj kurs Jeffrey Way-a... Prilicno lepo objasnjava.. :)
http://freecourses.tutsplus.com/30-days-to-learn-html-and-css/

[Milos Master]

Izbaci footer iz font taga...

Gdje si vidio taj footer u font tagu? :D

[Dekip]

Рецимо...


<link id="pagestyle" rel="stylesheet" type="text/css" href="large.css">
<script type="text/javascript">
function layoutHandler(){
var styleLink = document.getElementById("pagestyle");
if(window.innerWidth < 900){
styleLink.setAttribute("href", "mobile.css");
} else if(window.innerWidth < 1200){
styleLink.setAttribute("href", "medium.css");
} else {
styleLink.setAttribute("href", "large.css");
}
}
window.onresize = layoutHandler;
layoutHandler();
</script>



Ово је js а исто може и php.

[GojaS]

Gdje si vidio taj footer u font tagu? :D

Nzm, tako mi pise u konzoli :)
Kazem ti, to sto pitas su bas osnove. Zato ti i preporucujem neki tutorijal :)

[Milos Master]

Jel' imate neko konkretno resenje,ja ucim te ucim,samo mi treba ovo sad da rijesim da bih mogao da hostujem sajt,a da bude normalan.Da li neko vidi gresku u kodu?

[Milos Master]

Рецимо...


<link id="pagestyle" rel="stylesheet" type="text/css" href="large.css">
<script type="text/javascript">
function layoutHandler(){
var styleLink = document.getElementById("pagestyle");
if(window.innerWidth < 900){
styleLink.setAttribute("href", "mobile.css");
} else if(window.innerWidth < 1200){
styleLink.setAttribute("href", "medium.css");
} else {
styleLink.setAttribute("href", "large.css");
}
}
window.onresize = layoutHandler;
layoutHandler();
</script>



Ово је js а исто може и php.

A gdje ovo da ubacim,jel moze pomoc u vezi ovog?

[Dekip]

Па у HEAD. Направи само css фајлове, дај им одговарајуће називе и линкуј их.

[Milos Master]

A ako ovo stavim u HEAD,sta cu da stavim u te CSS fajlove?

[Dekip]

Преко ЈЅ видиш коју резолуцију користи посетилац и сервираш му СЅЅ фајл прилагођен његовом уређају. Не знам шта ти није јасно.