http___mi3dot.org_tutorials_comments_65__1.xml
1.1 2.1 3.1 4.1 5.1 5.2 5.3 5.4 6.1 7.1 7.2 7.3 9.1 10.1 11.1 12.1 13.1 14.1 15.1 16.1 18.1 20.1 21.1 22.1 22.2 23.1 23.2 24.1 24.2 24.3 25.1 26.1 26.2 27.1 28.1 28.2 28.3 29.1 30.1 31.1 31.2 31.3 32.1 33.1 34.1 35.1 36.1 37.1 38.1 39.1 40.1 41.1 42.1 42.2 43.1 43.2 44.1 45.1 46.1 46.2 47.1 48.1 48.2 49.1 49.2 49.3 50.1 51.1 52.1 53.1 54.1 55.1 55.2 56.1 56.2 57.1 57.2 57.3 58.1 59.1 60.1 61.1 62.1 63.1 63.2 63.3 63.4 64.1 65.1 65.2 65.3 66.1 66.2 67.1 67.2 67.3 67.4 68.1 68.2 68.3 69.1 69.2 69.3 70.1 71.1 72.1 72.2 72.3 72.4 72.5 73.1 73.2 73.3 74.1
Advanced Codes To use these codes, copy (Ctrl + C) and paste (Ctrl + V) whatever you want onto your page in whatever category you want it in! | Using CSS Stylesheets to make life easier! | Positioning Divs | Stylesheets are amazing things, they're so handy to have! They also do things to your homepages that can make it better. For instance, instead of having your background repeating constantly over your page - you can have it in the center..or on the left hand side, whatever! I hope this guide helps you, if not - please visit the imvustylez group and ask for help. Example stylesheet: The things that are underlined and italic on the example stylesheet are things that I will explain after the example. Just sit tight! The example is to show you what can happen. body {background-color:#E8FF8C; background-image:url('http://www.fileden.com/files/2006/8/5/155775/zipbckdiv.jpg'); background-position:bottom center; background-attachment:fixed; background-repeat:no-repeat; color:#000000;} img {border:0px;} a:link, a:visited, a:active {color:#000000; text-decoration:none;} text-decoration:underline overline} What each of these things mean! body This part changes (or defines) what your whole homepage will look like. It defines what your text will look like, what background you'll use, etc. background-color: if you don't use a picture for your background, or you don't tile your background picture - then this is what color your background will be. Use the colors I taught you in the Basic Codes or the HEX Codes sections. background-image: the background image that you use. You don't HAVE to use one, but if you do - then change it here. You MUST enter it like this: background-image:url('enter your image url that you want to use here'); background-attachment: if you use this, then add the word fixed. What it does is if you scroll down on the page, the background will stay put where it is. background-attachment: fixed; background-repeat: this is saying if you want your background to repeat, or not. you either put repeat or no-repeat to say it. Choose one of the following: background-repeat: no-repeat; background-repeat: repeat; background-position: this is to position your background. You can position it using these words (top left), (top center), (top right), (center left), (center), (center right), (bottom left), (bottom center), (bottom right). Choose one of the following: background-position: top left; background-position: top center; background-position: top left; background-position: center left; background-position: center; background-position: center right; background-position: bottom left; background-position: bottom center; background-position: bottom right; img This changes how you want ALL your images to look. Usually it's best to make all your images not have borders, but it's up to you. border: This defines whether you want a border around your images or not. Again, I suggest making all your images have no borders. border:0px; a:link, a:visited, a:active, a:hover This is how you want ALL your links to look like. This also helps you take out those nasty underlines on your links. a:link, a:visited, a:active is how your links will look like without your mouse hovering over it. color: this changes the color of all your links. use the hex code or named colors featured in the Basic codes or HEX codes page. text-decoration: this changes whether your links will have be underlined, or what-not. Add things like (underline), (overline), (underline overline), (line-through), (none) to it. You can combine if you want. text-decoration: underline; text-decoration: overline; text-decoration: underline overline; text-decoration: line-through; text-decoration:none; a:hover is how your links will look like when you hover your mouse over it. You don't have to use this, but if you want to - here it is. color: this changes the color of all your links. use the hex code or named colors featured in the Basic codes or HEX codes page. text-decoration: this changes whether your links will have be underlined, or what-not. Add things like (underline), (overline), (underline overline), (line-through), (none) to it. You can combine if you want. text-decoration: underline; text-decoration: overline; text-decoration: underline overline; text-decoration: line-through; text-decoration:none; Please look at my example if you're confused on how it should look! I had trouble explaining this, I really did. If you think you can explain it better - please let me know! Also, you CAN go to the imvustylez group for help! | Back to Top | I had explained Div's in the Basic Codes section. I just didn't want to put the whole thing about positioning in there, it's complicated and I didn't want anybody confused unless they wanted to be lol. I'll try to explain this the best way that I can. Positioning makes anything you want (whether it's images/div's, whatever) in a position you want it to be! I'll explain positioning div's, but it goes for anything. Anyway, positioning works differently in different browsers. I use Firefox. But people who use Internet Explorer will see things maybe alittle differently. I'm just warning you *smile* Please tell me I haven't confused you yet. If I have, you can contact me. I'll try to take you step-by-step in regarding your confusion. Alright, so positioning. It's all about experimentation really. You just keep checking until it's right. Anyway, here's an example code so you can see HOW to do it. Your Content See position:absolute; left:0px; top:0px; in the code? That's positioning right there. You need to put position:absolute; first, and then put in left:0px; top:0px; The left part means, whatever pixels farther from the left. For example, 10px is closer to the left than 100px. This goes for the top as well. Alright, so anyway - this was hard to explain (just like the css). I hope I did okay in explaining, if not - I'm always ready for questions. I have my bottle of tylenol ready, so go ahead - ask away! | Back to Top |
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