Problem sa horizontalnim scrollbarom

[ ningpa @ 27.06.2011. 15:44 ] @

Zdravo svima,

imam problem sa definisanjem strukture stranice. Malo je komplikovano, pa sam zakacio sliku da bi bilo jasnije.

Zahtev je sledeci:
- scrollbar sme da se pojavi samo kada je sirina stranice manja od 960px (odnosno kada je viewport manji od sirine sadrzaja)
- baneri sa strane moraju da budu 'klikabilni'
- u headeru i footeru se nalazi grafika koja se pruza 'celom' sirinom (od 1200px)
- ljubicasti i sivi pravouganik takodje imaju sadrzaj (koji nije siri od 960px)

Pokusao sam ovo da resim na vise nacina, uz par nesporazuma (u pocetku nigde nije bilo naznaceno da strana treba ovako da se ponasa), ali nisam uspeo.

Bio bih veoma zahvalan ako neko ima predlog u kom pravcu da potrazim resenje.

Hvala unapred.

[ Aleksandar Ružičić @ 27.06.2011. 22:57 ] @

jel onaj deo sirine 1220px fixiran na tu velicinu ili se siri u zavisnosti od rezolucije?

[ ningpa @ 28.06.2011. 08:18 ] @

Fiksiran.

Jedno od resenja, kome cu mozda pribeci, jeste da postavim

Code:

body{
overflow-x: hidden;
}

cime bih ukinuo scroll potpuno.

Drugo resenje, koje bih u kranjem slucaju primenio, jeste da pomocu javascripta ispitam veclicinu prozora prilikom ucitavanja stranice i svakog resizea i u zavisnosti od toga togglejem overflow-x: hidden;.

[ operativac_ @ 28.06.2011. 08:51 ] @

Code:

html {overflow:scroll;}

ovo ih pokazuje stalno, sto je mnogo bolje

a kao sto vidis po slici, i nije ti pametno da pravis sire sajtove od 980px, zato sto ce se lose prikazati svakom 3 posetiocu...

[ ningpa @ 28.06.2011. 09:14 ] @

znam za to, stalno ih i pravim u 980px, ipak hvala na sugestiji :)

jednostavno to je eksplicitan zahtev poslodavca (zbog toga je i bilo nesporazuma), sirina da bude 1220px i da nema scrolla za ekran >= 1024px sirine.

za sada sam resio to na sledeci nacin:

Code:

$(document).ready(function() {

if( $(window).width() < 980 )
     $(document.body).css('overflow-x', 'visible');

$(window).resize(function() {
     if( $(window).width() < 980 )
     $(document.body).css('overflow-x', 'visible');
});

});

[ Br@nkoR @ 28.06.2011. 12:20 ] @

Možeš da probaš i sa CSS3 Media Queries kod modernijih browser-a, nešto kao:

Code:

@media screen and (min-width: 960px) and (max-width: 1220px) {
  body {
    overflow-x: hidden;
  }
}

[ ningpa @ 28.06.2011. 12:44 ] @

onda bih morao da radim browser proveru?

[ Aleksandar Ružičić @ 30.06.2011. 21:52 ] @

Nestigoh ranije da ti odgovorim.. Elem, ukoliko su ti margine u kombinaciji sa relativnim pozicioniranjem prihvatljive mogao bi nesto tako da uradis na ovaj nacin (view source). Istina, ovaj pristup ima mana i komplikuje i markup i css dodatno ali je po meni ipak bolje od js resenja (jer nemaju svi js).

sto se banera tice oni bi trebali bolje da se odrade, ja sam samo naveo najprostiji primer.

[ ningpa @ 04.07.2011. 09:00 ] @

hvala :)

nesto slicno (sa negativnim marginama) sam uradio i dobio sam uzasan markup.

pokusacu da primenim tvoje resenje, bar da js izbacim.

hvala jos jednom.