http___www.ucionica.net_trikovi_horizontalno-centriranje-elemenata-css-om-1308__1.xml
1.1 2.1 2.2 2.3 3.1 6.1 7.1 8.1 9.1 10.1 13.1 13.2 13.3 13.4 14.1 15.1 15.2 15.3 16.1 17.1 19.1 20.1 22.1 23.1 25.1 26.1 27.1 28.1 29.1 30.1 31.1 33.1 34.1 35.1 36.1 38.1 40.1 41.1 42.1 43.1 44.1 45.1 46.1 48.1 49.1 51.1 52.1 53.1 54.1 55.1 56.1 57.1 58.1 60.1 60.2 61.1 61.2 62.1 63.1 64.1 65.1 66.1 67.1 68.1 69.1 70.1 72.1 73.1 74.1 75.1 77.1 78.1 79.1 80.1 81.1 82.1 83.1 84.1 85.1 87.1 88.1 89.1 90.1 91.1 92.1 93.1 94.1 95.1 96.1 98.1 99.1 100.1 101.1 102.1 103.1 104.1 105.1 106.1 107.1 108.1 108.2 109.1 109.2 110.1
To help with speed of download, search engine friendliness and accessibility CSS navigation is no doubt the best solution. So where do you start? The best thing to do is lay out your navigational links using an unordered list. You can then style this list any way you want using a linked CSS style sheet. Here's the basic XHTML code for our navigation: Home Photography Gallery Site Map Contact To distinguish these links from any other navigation links on the page (e.g. in a footer or side navigation) an id of nav and nav_a suitable name have been added to the items in the list to make this set of links unique and also to help with CSS styling. An ID has also been added to the Body Tag to assist with CSS styling. This body tag will be different on each separate page and will provide visible proof of what page the visitor is currently viewing. So, for example, to highlight the Gallery page you should set the Body tag to See the un styled navigation list. The CSS markup below produces a basic vertical navigation block that works as expected in Firefox but not in Internet Explorer. To fix this Explorer bug a well know workaround is to float all the list items. That is why a float has been added to #nav; and to #nav li both a float and a 100% width. To begin, open a blank page and save it as vertical.css Now type (or copy and paste) the following into your stylesheet: html { font-family: Tahoma, Lucida Grande, Arial, Helvetica, sans-serif; body { font-size: 85%; #nav { margin: 0; padding: 0; list-style-type: none; background: #6699FF; width: 180px; float: left; #nav li { margin: 0; padding: 0; float: left; border-bottom: 1px solid #FFFFFF; #nav a { display: block; color: #FFFFFF; text-decoration: none; padding: 0 15px; line-height: 2.5; border-left: 10px solid #666699; #nav a:hover { background: #666699; #body_home #nav_home a, #body_photo #nav_photo a, #body_gallery #nav_gallery a, #body_smap #nav_smap a, #body_contact #nav_contact a { background: #666699 ; color:#F5F5F5; font-weight: bold; What if you want to have horizontal navigation, what changes are needed? Not as many as you might think. Because we have created an unordered list there will be no change to the HTML markup. There are only a few changes needed to the CSS to turn the vertical navigation into horizontal navigation. The #nav changes like this: /********Horizontal Navigation*********/ #nav { margin: 0; padding: 0; list-style-type: none; background: #6699FF; float: left; width: 505px; #nav li { margin: 0; padding: 0; float: left; The #nav a changes like this: #nav a { color: #FFFFFF; text-decoration: none; line-height: 2.5; float: left; width: 100px; text-align:center; border-right: 1px solid #FFFFFF; See the results of just a few changes. A very simple enhancement is to add a thick line to the right of the vertical nav and underneath the horizontal nav This is achieved just by making a simple change to #nav a. #nav a { display: block; color: #FFFFFF; text-decoration: none; padding: 0 15px; line-height: 2.5; border-left: 10px solid #666699; #nav a { color: #FFFFFF; text-decoration: none; line-height: 2.5; float: left; width: 100px; text-align:center; border-right: 1px solid #FFFFFF; border-bottom: 10px solid #666699; You can easily change the colours of these CSS based navigation links, just by checking the CSS code for font colours e.g. #FFFFFF (white) and changing the values. From the CSS articles published by QBS PC Help it's plain to see that we do not believe in using tables for web page design. We do however use tables for what they were really designed for - laying out tabular information. And tables can be styled using CSS. Here are a couple of pages where we have done just this: Its possible to take table styling much further than this, but this is the subject of our next article - How to use CSS to style a table.
1.1 1.2 2.1 2.2 3.1 4.1 8.1 9.1 10.1 11.1 15.1 17.1 18.1 20.1 21.1 23.1 24.1 27.1 30.1 31.1 33.1 34.1 35.1 36.1 38.1 39.1 40.1 43.1 44.1 45.1 46.1 47.1 49.1 50.1 52.1 53.1 54.1 55.1 56.1 58.1 59.1 60.1 62.1 63.1 64.1 65.1 65.2 65.3 65.4 65.5 66.1 67.1 68.1 69.1 70.1 71.1 72.1 73.1 73.2
Svi koji se bave razvojem weba vjerojatno su ponekad imali potrebu horizontalno centrirati block elemente koji nemaju fiksnu širinu. U ovom vodiču učimo Vas kako to najelegantnije izvesti. Postoji nekoliko metoda za izvesti identičnu stvar međutim ova ne zahtjeva CSS hackove ni Javascriptove, a podržana je u svim browserima, pa čak i Internet Exploreru 6. Uz ovaj CSS trik, vaš kôd ostati će validan. Stvari naučene u ovom naprednijem vodiču često možemo primjeniti na elemente poput navigacije, paginacije i slično. Naš (x)HTML kôd između body tagova izgledati će ovako: Početna O nama Usluge Kontakt Naš CSS kôd izgledati će ovako: padding: 0; margin: 0; body { font-family: Georgia, "Times New Roman", Times, serif; a, a:visited { text-decoration: none; a:focus, a:hover { #container { margin: 30px; #nav { overflow: hidden; position: relative; background: #EFEFEE; #nav ul { float: left; position: relative; #nav li { display: block; float: left; list-style: none none outside; position: relative; font-size: 18px; margin-left: 1px; #nav a { display: block; padding: 6px 12px; background: #DDDDDD; line-height: 25px; #nav a.selected { color: #FFFFFF; background: #333333; Objašnjenje metode Možda se neki CSS property-i koji nisu vezani uz veličine i boje čine suvišni, ali ukoliko izostavite koji stvar vjerojatno neće fukcionirati. Prije svega, bitno je utvrditi kako floatani elementi bez property-a width imaju širinu koliko je širok sadržaj tog elementa. Omotač navigacije sa id-om nav ima property overflow budući da je sadržaj unutar njega floatan i bez ove ili neke druge metode za čišćenje visina tog diva iznosila bi 0. Ovakav način čišćenja ne radi u Internet exploreru 6. Druga stvar zbog koje nam je potreban properyty overflow je kako ul element ne bi stvorio dodatnu horizontalnu navigaciju. Također je bitno napomenuti da ukoliko koristite padajuće izbornike overflow hidden bi ih prekrio. Upute za čišćenje nakon float elemenata moći ćete pročitati u jednom od sljedećih vodiča. Metoda za centriranje funkcionira tako da prvo ul floatamo kako bi se prilagodio sadržaju, a zatim smo ga pomaknuli u desno za 50% širine njegovog roditelja (eng. parent), u ovom slučaju div-a sa id-om nav. Elemente li također smo prvo floatali kako bi se prilagodili sadržaju, a zatim svakog od njih pomičemo u lijevo za 50% nakon čega bi stvar trebala biti centrirana. Rezultat Ukoliko ste sve pažljivo slijedili, tada biste trebali dobiti nešto nalik na sliku ispod: Pokušajte resizeati browser kako biste utvrdili da je Vaša navigacija uvijek na sredini. Resursi HTML dokument ovog vodiča sa uključenim CSS-om preuzmite ovdje. Nadamo se da je ovaj vodič koristio! Za sva pitanja slobodno se obratite na mail igor@ucionica.net.