http___www.ucionica.net_trikovi_horizontalno-centriranje-elemenata-css-om-1308__1.xml
1.1 2.1 3.1 3.2 4.1 4.2 4.3 4.4 5.1 6.1 6.2 7.1 8.1 9.1 9.2 12.1 13.1 14.1 15.1 18.1 19.1 19.2 20.1 21.1 23.1 24.1 25.1 26.1 28.1 29.1 30.1 31.1 32.1 33.1 34.1 36.1 38.1 39.1 40.1 41.1 42.1 43.1 44.1 47.1 48.1 49.1 50.1 51.1 53.1 54.1 56.1 57.1 58.1 60.1 61.1 62.1 63.1 64.1 66.1 67.1 67.2 68.1 69.1 69.2 70.1 71.1 71.2 71.3 72.1 73.1 73.2 74.1 75.1 76.1 76.2 77.1 77.2 78.1 79.1 80.1 81.1 81.2 81.3 81.4 82.1 83.1 83.2 84.1 85.1 86.1 87.1 87.2 87.3 88.1 89.1 89.2 89.3 90.1 91.1 92.1 93.1 94.1 94.2 94.3 95.1 96.1 97.1 98.1 98.2 98.3 98.4 99.1 100.1 100.2 101.1 102.1 103.1 104.1 105.1 106.1 107.1 108.1 109.1 110.1 111.1 112.1 113.1 114.1 115.1 115.2 116.1 117.1 118.1 119.1 119.2
Horizontally Centered Menus with no CSS hacks by Matthew James Taylor on 27 July 2008 A lot of people want centered menus on their website but for the CSS novice this task seems impossible. If you do a search online you will find a few centering methods but most of these rely on CSS hacks, JavaScript or non-standard CSS rules that are not supported by all browsers ( display:inline-block; is an example). In this post I'm going to show you my secret method of achieving centered tabs that does not use any CSS hacks and will work in all the common web browsers. It is also compatible with my perfect liquid layouts. Let's start with a basic example then I'll explain how it works. Centered Menu Basic Example Below you should see four horizontally centered tabs in this column of text, the second tab is set as active. Try resizing your browser window and change the size of the page text to see how the menus always remain centered and clickable. See some more advanced centered CSS menu examples Centered Menu HTML The HTML used for centered menus is semantically structured and very basic. The structure is simply a list of links in a single div. Tab one Tab two Tab three Tab four Centered Menu CSS Below is the CSS used to center the tabs across the page. See below for an explanation of how this works. #centeredmenu { float:left; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; #centeredmenu ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; text-align:center; #centeredmenu ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; #centeredmenu ul li a { display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; text-decoration:none; line-height:1.3em; #centeredmenu ul li a:hover { background:#369; color:#fff; #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover { color:#fff; background:#000; font-weight:bold; How the centering method works The trick to my centering method is how the floated elements are relatively positioned within one another. To explain this properly let me first describe how an element can change its dimensions when floated. Non-floated div Here is a div (a block level element) that is not floated. Notice how it stretches to 100% of the width of it's containing element, in this case that's the whole page. Left floated div If we now float the div to the left it will automatically shrink to match the width of the content inside itself. It is now only as wide as the text "Div". This shrinking is the key to the centering process, it helps us move our menu the right amount into the center. Standard left aligned menu Let's use a traditional left aligned menu and move the tabs into the centre step by step. I have coloured each element in a different colour so it is easy to see how they are all nested together. Please note the following. - The 'centeredmenu' div (blue box) is floated to the left but we give it a width of 100% so it remains stretched across the whole page. - The ul element (pink box) is inside the 'centeredmenu' div and is floated to the left. This means that the ul will shrink to the width of its content, this just so happens to be the width of all the tabs. - All li elements (green boxes) are inside the ul and each is floated to the left. This causes them to shrink around the link inside themselves and they all line up in a horizontal row. - Inside each link (orange box) is the text that appears on the tab; Tab 1, Tab 2, etc. Shifting the position of the unordered list Next we shift the ul element to the right by 50% by using position:relative;. When moving an element to the side by a percentage in this way it is important to note that it will move a percentage of its containing element's width not it's own width. So in this instance the ul element will move to the right by 50% of the 'centeredmenu' div width - this is half of the browser window. The end result is our menus start from the middle of the screen and partly run off the page to the right, but don't worry, in one more step we will have them in the centre. Shifting the position of all line items The last step is to shift all of the li elements back to the left by 50%. This is 50% of the width of the ul element (their containing element) and it will put the tabs exactly in the centre of the window. Some important notes This method of centering menus is rock solid but there are a few things you must be aware of. - Because the ul element sits partly off the page your browser window will scroll sideways unless you include an overflow:hidden;rule on the 'centeredmenu' div. This will chop off the overhanging div. If you don't want to use the overflow:hidden;rule then see my centered dropdown menu article that explains how to remove it. - Because the ul element is not aligned with the tabs you cannot add any visible styling to it. Leave the ul element without a background colour and with no border so it will be completely invisible. Do all of your tab styling on the li and a elements only. - If you need to style the first or last tab differently to the others, add a class to the first and last li element so they can be targeted individually. The main features So, here are the main features of the pure CSS centered menus. No CSS hacks The CSS used for these centered menus is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design uses clever relative positioning. Valid XHTML strict markup The HTML in these centered menus validates as XHTML 1.0 strict. Resizable text compatible These centered tabs are fully compatible with resizable text. Resizable text is important for web accessibility. People who are vision impaired can make the text larger so it's easier for them to read. It is becoming increasingly more important to make your website resizable text compatible because people are expecting higher levels of web accessibility. No JavaScript JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here. Full cross-browser compatible The pure CSS centered menus has been tested on the following browsers. iPhone & iPod Touch - Safari Mac - Safari - Firefox 2 & 3 - Opera Windows - Firefox 2 & 3 - Safari - Opera - Google Chrome - Internet Explorer 5.5, 6 & 7 Don't forget to view the more advanced centered tab examples to see what can be done. Plus, feel free to contact me if you want to show off any sparkling new tabs you have designed that use this centering method, I would love to see them! Follow me on Twitter @mattjamestaylor Tagged: Enjoy this article? If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting!
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.