Mala pomoc oko CSS-a (web CSS :) )

[gx-x]

Pozdrav, zelim da napravim nesto poput ovog menija (velika slika pa siva slajfna sa par meni stavki odmah ispod nje).

ovaj tutorijal mi je manje vise sve objasnio samo sto ja ne zelim da mi se smenjuju slicice sa tekstom u njima vec zelim da se smenjuju slicice bez teksta, dakle samo pozadine, a da ja mogu da tekst iznad pozadine menjam, kao sto bih mogao bilo koji drugi u HTML-u. Prosto, zelim da menjam up/down pozadine i da preko pozadina mogu da stavim tekst (sa linkom ofc, ali to znam da uradim) koji zelim i eventualno da i njemu menjam boju po potrebi na a:hover vistited i ostalo.

Cilj je da napravim meni kojem cu moci da dodajem/oduzimam stavke kontrolisuci "li" listu, a pozdine bi bile neke tipa jedan piksel sirine i visine po potrebi, one se ponavljaju po repeat-x i to je to, minimalno koriscenje slika, a lepo izgleda.

ako je neko voljan da napravi/prepravi ono tamo i okaci ovde, dakle u sustini, treba mi (ne vizuelno vec funkcionalno) bas onako kako je na onom sajtu sto sam prvo linkovao, stim sto mi treba po vertikali, kao sto je u tutorijalu na sajtu kojeg sam drugog linkovao. Ako mi bude trebalo po horizontali - snaci cu se
Prosto, ne umem da provalim koje komande da koristim da pozadina ostane ispod teksta i da imam teksti znad pozadine i da se to menja kad prelazis misem (i slika iz pozadine i eventualno boja teksta), a ne bih da pravim slicicu za svaku stavku ako ne moram.

Imam neki javascript ali ne volem JS, a i ne mogu (bar ne umem) da ga ugradim u ovaj sistem sa <ul class stavkama i li (ili sa div class umesti ul class, svejedno, meni to sve isto )

hvala unapred

 

[gx-x]

jel bi ove funkcije odradile posao:

#list-menu a:link, #list-menu a:active, #list-menu a:visited {
background: #333333; url(slika_dn.png);  /* cemu sluzi #3333333 ako stavljam sliku?/
color: #000000;
}

#list-menu a:hover {
border: 1px solid #000000; /* ovo mi je nebitno, kopirao sam vecinu koda sa nekog levog mesta/
background: #333333; url(slika_up.png);  /* cemu sluzi #3333333 ako stavljam sliku?/
color: #ffffff;
}

zanemarimo #list-menu, to je class...
i btw, ako je ovo to sto mi treba, jel mogu negde da umetnem za tu background url sliku repeat-x ili repeat funkciju generalno?
Ovako mozda?

background: #333333; url(slika_up.png); background-repeat: repeat-x;

jel to to? Pretpostavljam da #333333 mogu i da izbacim sobzirom da mi slika pravi boju pozadine...

 

[ThePocetnik]

Ako ti je slika iste velicine kao sto je i taj prozor gde ce ona da stoji onda bi mogao da izbacis pozadinsku boju, a ako je velicina tog prozora definisana u % onda je po mojem misljenju lepse da se postavi da slika bude centrirana, a da i dalje stoji pozadinska boja nego da se slika ponavlja po X osi.

Takodje ako ti je visina prozora nesto veca od visine slike onda bi trebalo, ako bas zelis sliku da stavis i ponavljanje po Y osi.

p.s.Amater sam u ovoj oblasti, pa tako samo logicki razmisljam.Ne mora da znaci da je ovo predlozeno i najbolje resenje isl.

 

[gx-x]

hvala. Mene samo interesuje kako CSS kod treba da izgleda, izgled cele stvari (dizajn) nije bitan za ovu pricu. U praksi to ce biti pozadina za a:link i ostale varijante kad mis nije na "dugmetu" i druga pozadina kad je mis na "dugmetu". Pozdina je tipa 1px width i visine kolko je i svako polje visoko, a svako ce polje biti podjednako visoko, otud samo repeat-x, repeat-y ne dolazi u obzir u ovom slucaju, mora da pasuje height, al to nije nikakav problem.

kao sto rekoh, svrha cele stvari je da napravim meni sa tim pseudo rolloverima i da sa lakocom mogu da dodam ili izbacim neku stavku, da ne moram za svaku novu stavku da pravim rollover sliku sa sve tekstom u photoshopu.

PS. Jel ovo sve moze da se umetne u jedan table cell?! (pretpostavljam da moze ali pitam za svaki slucaj )