http___mi3dot.org_tutorials_comments_65__1.xml
2.1 3.1 4.1 5.1 6.1 7.1 7.2 7.3 8.1 9.1 9.2 10.1 11.1 11.2 12.1 13.1 14.1 16.1 16.2 16.3 16.4 17.1 17.2 18.1 19.1 20.1 22.1 23.1 24.1 25.1 25.2 26.1 27.1 28.1
I have made blockquote css, and made some background-image property. blockquote { font: 14px/18px normal "Courier New", sans-serif; padding-left:10px; padding-top: 2px; padding-bottom: 2px; background-color: #000; color: white; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 5px; background-image: url(/images/justicia2.jpg); background-position: top; background-repeat: no-repeat; text-indent: 10px; } then I made a change in background-image property like this background-image: url(/images/precedents2.png); But it doesn't work! Well. I recognize this problem when I first employ mobile diplay. I made separate css file for desktop and mobile version. But mobile css blockquote doesn't work! So I try hundred of time. then i realize that even desktop css doesn't work. Why this thing happen? p.s> ckEditor's css style change is working. So why Site contents css doesn't work? All-Star 40430 Points Feb 19, 2016 08:13 AM|PatriceSc|LINK Use F12, Network in your browser to check what happens for the http request for this image (404 not found ?). Is this png rather than jpg? For now I assume that no image is shown? You can also inpect the style wiht the same tool etc... Also it is always best to tell what happens rather than that "it doesn't work". For example it could be that : - no image at all is shown - the old image is still shown (F5, make sure the CSS file is refreshed, you can also use F12 to see if the new style is really supposed to be applied) So depending on "how" it doesn't work, you'll search in a different direction... Due to your advice.. I finally got it! Press F12 is very good! well.. It's my foolishness. I had forgotten that I wrote another css file... Now I solve it! very very Thank you!!
1.1 2.1 3.1 4.1 5.1 6.1 6.2 7.1 8.1 9.1 10.1 10.2 10.3 11.1 12.1 13.1 14.1 15.1 15.2 16.1 17.1 18.1 19.1 20.1 21.1 22.1 23.1 24.1 25.1 27.1 28.1 29.1 30.1 31.1 32.1 33.1 34.1 34.2 35.1 36.1 37.1 38.1 39.1 40.1 41.1 42.1 43.1 45.1 46.1 47.1 48.1 49.1 50.1 51.1 52.1 53.1 54.1 55.1 56.1 56.2 56.3 56.4 57.1
CSS image hover efekt Prije hovera — IR (image replacement) U tutorialu Poboljšanje sitea uz pomoć CSS-a (autor retro_one) uredno je opisana dobro strukturirana navigacija i pokazano je kako je urediti u CSS-u. No ponekad obični fontovi i ograničenje samo na boje pozadina i 'bordera' elemenata ozbiljnom dizajneru nisu dovoljne za ostvarenje zamišljenog izgleda. Metode za IR (image replacement) u CSS-u već su dugo s nama, neke bolje a neke lošije, primarno zbog potrebe da ljudi na web stranici vide fontove koje je dizajner i namijenio. Idealni IR bi bio takav da zamijeni tekst iz nekog HTML elementa sa slikom — CSS background-image — bez korištenja dodanih tagova (u većini slučajeva nested span elementa), a da očuva tekst tako da ih screen readeri čitaju. Jedan takav blizu idealnog je Accessible Image Replacement (Mike Rundle). Njegovu metodu koristim u ovom tutorialu. Dva background-image property-a Sada, kad smo napravili IR, hover pseudoselektorom možemo mijenjati taj element (obično link) kada se preko njega prijeđe mišem. Na primjer, slika se može promijeniti (kako je to ranije bilo veoma popularno JavaScriptom) tako da napišemo background-image: url(button.gif) za element, a isto to sa drugom slikom (button_hover.gif) za element:hover. #mylink1 { text-indent:-100em; /* image replacement Mike Rundle style */ text-decoration:none; /* potrebno da se skine underline */ display:block; width:207px; height:105px; background: white url(button.gif) no-repeat; #mylink1:hover { background-image: url(button_hover.gif); } link test 1 Problem ove metode još jedan server request, odnosno to što browser zatraži tu 'hover' sliku tek kad se prijeđe mišem preko nje. Ako je slika veća, a veza na internet sporija, osjeti se jedan mali delay prije nego što se 'hover' slika pojavi i ta mala sitnica može biti veoma ružna. Rješenje — background-position Da izbjegnemo naknadni dohvat 'hover' slike možemo koristiti nekakav JS preload, ali postoji elegantno rješenje bez skriptiranja i (najvažnije) bilo kakvih hackova. Već smo napravili IR i time znamo veličinu elementa (linka) — kako znamo veličinu, 'zalijepimo' slike button.gif i button_hover.gif u jednu (prva na lijevoj strani, druga na desnoj) i hover efekt radimo tako da shiftamo taj background lijevo-desno sa background-position propertyem. button_both.gif: #mylink2 { text-indent:-100em; text-decoration:none; /* potrebno da se skine underline */ display:block; width:207px; height:105px; background: white url(button_both.gif) no-repeat; #mylink2:hover { background-position: right; } /* oh yeah */ link test 2 Čija je to dovitljivost ne znam, naučio sam je proučavajući feature list sa Stylegala (tri kućice skroz desno, sredina). Pros: - no delay; - no hacks; - single button — single image; - jednostavan CSS znači podržanost; - ovisno o dizajnu može se postići relativna fleksibilnost veličine elementa. Cons: - Designer mora uložiti dodatan trud da 'slijepi' slike skupa. Ako imate neka nova saznanja o tehnikama opisanim ovdje bit će mi drago da ih čujem. Oho, Red me već prosvijetlio (thnx). Poslao mi je link na ovaj CSS rollover generator na kojem koriste opisanu tehniku i zovu je sliding doors rollover (neš' ti čuda). Barem više nije anonimna :). —Mislav