Optimizacija sajta za sve velicine ekrana i sve browsere

[MS-Dizajn.com]

Kao sto vecina zna, ali sto se i moze zakljuciti, je da nije potpuno isti pregled nekog sajta na ekranu od npr. 17 inca i nekom od 19 inca... Takodje razliciti browseri ne prikazuju bas potpuno isto (Chrome i Mozzila npr.). Interesuje me, kako se resiti ovog problema? imam jedan sajt, super izgleda na pravougaonom, 19 incha monitoru, ali na kvadratastom - 17 inca monitoru ne izgleda bas isto, tj. ima dole prostora i nesto se malo pomerilo...

 

[Wrong Turn]

Jednostavno, koristis procenat.

ako je width:90%; to ce izgledati isto na svim browserima, jer razmislja procentualno...

 

[Agent7]

podesi rezoluciju na monitor.. ili obrisi pretrazvica sve iz nega pa ponovo instaliraj... ako nece podesi u samom pretrazivacu rezoluciju...

mora da hoce nesto ..pa posle pogledaj sajt dal to to...

 

[Lollol]

A sto ga ne optimizujes za 1024x768, centriras i gotova stvar? Meni je tako najlaksei za sada radi bez problema, ili ako te ne mrzi radi responsive dizajn.

 

[Wrong Turn]

Kao sto vecina zna, ali sto se i moze zakljuciti, je da nije potpuno isti pregled nekog sajta na ekranu od npr. 17 inca i nekom od 19 inca... Takodje razliciti browseri ne prikazuju bas potpuno isto (Chrome i Mozzila npr.). Interesuje me, kako se resiti ovog problema? imam jedan sajt, super izgleda na pravougaonom, 19 incha monitoru, ali na kvadratastom - 17 inca monitoru ne izgleda bas isto, tj. ima dole prostora i nesto se malo pomerilo...

Da, sto se tice rezolucije, namesti na 1024 i bice svuda fino, samo ceo kontejner stavi u "margin:0 auto;"

 

[MS-Dizajn.com]

A sto ga ne optimizujes za 1024x768, centriras i gotova stvar? Meni je tako najlaksei za sada radi bez problema, ili ako te ne mrzi radi responsive dizajn.

kako da ga optimizujem ?

 

[Wrong Turn]

kako da ga optimizujem ?

#container{
margin:0 auto;
width:1024px;
height:768px;
}

 

[Lollol]

#container{
margin:0 auto;
width:1024px;
height:768px;
}

Malo bih izmenio to, ako ne zameras.

#container{
margin:0 auto;
width:1000px;
}

Ovako ovako ga scrollbar nece zezati ako ima vertikalni scroll i praviti mu dodatni horizontalni scroll, ako naleti na nekog ko zaista koristi 1024x768, a takodje nije limitiran da visinu od 768px, jer 95% sajtova imaju vertikalni scroll, mada mozda je i bolje da u pocetku zadrzi limitiranu visinu, a posle da obrise, kako mu je lakse.

 

[Wrong Turn]

Malo bih izmenio to, ako ne zameras.

#container{
margin:0 auto;
width:1000px;
}

Ovako ovako ga scrollbar nece zezati ako ima vertikalni scroll i praviti mu dodatni horizontalni scroll, ako naleti na nekog ko zaista koristi 1024x768, a takodje nije limitiran da visinu od 768px, jer 95% sajtova imaju vertikalni scroll, mada mozda je i bolje da u pocetku zadrzi limitiranu visinu, a posle da obrise, kako mu je lakse.

slazem se.

 

[CrniĐavo]

#container{
margin:0 auto;
width:1024px;
height:768px;
}

A je l' bi moglo ovako?

body {min-width: 1024px;}

 

[Wrong Turn]

A je l' bi moglo ovako?

body {min-width: 1024px;}

Tim definises samo minimalnu sirinu i nece biti centrirano, a i bolje koristiti div kontejner zbog nekih drugih stvari(ako hoces da ti nesto bude izvan kontejnera).

 

[CrniĐavo]

Tim definises samo minimalnu sirinu i nece biti centrirano, a i bolje koristiti div kontejner zbog nekih drugih stvari(ako hoces da ti nesto bude izvan kontejnera).

Ovde nije reč o centriranju, već o tome da web stranica zauzme ceo ekran.
Iko nije pominjao centriranje, možda čovek hoće desno centriranje, možda levo, to ne znamo.

Kada definišeš:
width: 1024px;
fiksirao si širinu stranice, i ako je ekran veći po širini, na primer, veći od 20 inča, stranica neće biti prilagođena širini ekrana, pojaviće se praznina sa desne strane.
Iz tog razloga, glavni kontejner, body, treba podesiti tako da minimalna širina bude na primer, 1024px, pa ako je ekran i veći, nema problema, nije fiksirana kao u slučaju sa width opcijom:

 

[Wrong Turn]

Ovde nije reč o centriranju, već o tome da web stranica zauzme ceo ekran.
Iko nije pominjao centriranje, možda čovek hoće desno centriranje, možda levo, to ne znamo.

Kada definišeš:
width: 1024px;
fiksirao si širinu stranice, i ako je ekran veći po širini, na primer, veći od 20 inča, stranica neće biti prilagođena širini ekrana, pojaviće se praznina sa desne strane.
Iz tog razloga, glavni kontejner, body, treba podesiti tako da minimalna širina bude na primer, 1024px, pa ako je ekran i veći, nema problema, nije fiksirana kao u slučaju sa width opcijom:

Vidis to nisam znao, hvala na info.

 

[MS-Dizajn.com]

Hvala svima! Sada cu da ispobam pa javljam da li je sada sve dobro

 

[MS-Dizajn.com]

Problem...

Kada stavim ovo za containter, on ceo ide nekih 100px u desno, tj. imam prazan prostor sirine 100px na levoj strani....

#container {
margin: 0 auto;
width: 1000px;
}

 

[Wrong Turn]

Problem...

Kada stavim ovo za containter, on ceo ide nekih 100px u desno, tj. imam prazan prostor sirine 100px na levoj strani....

A je l' imas i sa desne strane 100px prazno ili samo s'leve? to mi je cudno

ako si u html-u stavio

<html>
<body>
<div id="container">
<!-- pa sve ostalo -->
</div>
</body>
</html>

mora biti centrirano

 

[MS-Dizajn.com]

A je l' imas i sa desne strane 100px prazno ili samo s'leve? to mi je cudno

ako si u html-u stavio

<html>
<body>
<div id="container">
<!-- pa sve ostalo -->
</div>
</body>
</html>

mora biti centrirano

Samo sa leve. Tako sam stavio. Aj' mi posalji Skype name u inbox da vidis na skajpu sta sam se desava..

 

[Wrong Turn]

Samo sa leve. Tako sam stavio. Aj' mi posalji Skype name u inbox da vidis na skajpu sta sam se desava..

Nemam Skype, ako hoces mozemo se spojiti preko Teamview-era pa da vidim 'de je problem.
Javi se u Inbox

 

[MS-Dizajn.com]

Nemam Skype, ako hoces mozemo se spojiti preko Teamview-era pa da vidim 'de je problem.
Javi se u Inbox

javio sam se

 

[Dirty Kichen Eternity]

Nemoj definisati sirinu u px nego u %.
Probaj ovako:

HTML:

<body>
<div id="wrapper"> </div>
</body>

CSS:

html, body {
margin: 0;
padding: 0;
height: 100%;
}

#wrapper {
height: auto;
min-height: 100%;
height: 100%;
position: relative;
}

 

[CrniĐavo]

Nemoj definisati sirinu u px nego u %.
Probaj ovako:

Ovo...

height: auto;
min-height: 100%;
height: 100%;

...ne znači išta, zato što kada visinu ili širinu sadržaja izražavaš procentualno, to ima smisla samo kada je visina ili širina "roditelja" tog sadržaja izražena eksplicitno.

Pride, kada kažeš min-height: 100% onda nema smisla ponavljati to sa height: 100%.
Niti mešati sve to sa height:auto, jer ne može visina istovremeno imati vrednost na primer 100% i auto, može jedno od ta dva

 

[arnage]

Atribut width je fiksni, a min-width i max-width dinamicki.

Po objasnjenju problema, resenje je max-width : 0000px; pa ce ti sajt izgledati isto na svim monitorima kao i na browseru mobilnog telefona. Markup bi trebalo da bude validan.

 

[CrniĐavo]

Atribut width je fiksni, a min-width i max-width dinamicki.

Po objasnjenju problema, resenje je max-width : 0000px; pa ce ti sajt izgledati isto na svim monitorima kao i na browseru mobilnog telefona. Markup bi trebalo da bude validan.

Koliko bi Ti stavio max-width, imajući u vidu da ljudi koriste i ovakve monitore.

 

[milos87popovic]

U zaglavlju nekog sajta može stajati i sledeće:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=1">
Zna li ko da mi objasni ovo? Znam da ima veze sa "zoomiranjem" na tabletima i mobilnim telefonima, ali ima i neke veze sa prikazom na ekranu.

 

[arnage]

Koliko bi Ti stavio max-width, imajući u vidu da ljudi koriste i ovakve monitore.

Onoliko koliko se uklapa u ideju dizajna sajta, a to moze biti i 1000px i 240px... Imas body sajta i imas background, body se podesava, a ako neces to da radis stavis 100% body ili koristi em velicine jer su one dinamicke, a px je fiksna velicina. Kojom god, najbolje je da ide u max-width att pa ce i na tom sa slike izgledati isto.
I uozbilji se, ko koristi takve monitore za surf po netu, vidis da momci pricaju o nekakvom projektu...