http___www.ucionica.net_trikovi_horizontalno-centriranje-elemenata-css-om-1308__1.xml
1.1 2.1 3.1 3.2 3.3 4.1 4.2 5.1 6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 6.9 6.10 7.1 8.1 8.2 8.3 8.4 8.5 9.1 10.1 10.2 10.3 10.4 11.1 12.1 14.1 15.1 16.1 18.1 19.1 20.1 21.1 25.1 27.1 30.1 32.1 35.1 37.1 39.1 39.2 39.3 39.4 39.5 40.1 41.1 41.2 41.3 41.4 42.1 43.1 47.1 48.1 49.1 53.1 54.1 54.2 55.1 56.1 58.1 60.1 61.1 63.1 65.1 66.1 68.1 71.1 75.1 79.1 82.1 83.1 83.2 83.3 83.4 84.1 85.1 86.1 87.1 89.1 91.1 92.1 94.1 95.1 98.1 99.1 101.1 102.1 106.1 110.1 114.1 117.1 118.1 118.2 119.1 120.1 121.1 122.1 122.2 123.1 124.1 125.1 126.1 128.1 129.1 130.1 132.1 133.1 135.1 136.1 139.1 140.1 142.1 143.1 147.1 149.1 153.1 155.1 159.1 161.1 164.1 165.1 165.2 165.3 165.4 165.5 165.6 166.1 166.2 166.3 166.4 167.1 168.1 169.1 169.2 169.3 169.4 170.1 171.1 173.1 174.1 175.1 177.1 178.1 180.1 181.1 184.1 185.1 187.1 188.1 192.1 194.1 196.1 199.1 201.1 203.1 206.1 208.1 210.1 212.1 212.2 212.3 212.4 213.1 214.1 215.1 216.1 217.1 217.2
Equal Height Columns with Cross-Browser CSS by Matthew James Taylor on 18 October 2008 Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites. For those who want some action immediately check out my demo pages: 2 column, 3 column, 4 column and 5 column. Also see my Perfect multi-column CSS liquid layouts - these use the same equal height column CSS principles as discussed below. The problem with equal height columns In the example above we have three columns each with a different amount of content. You will notice that the problem is the column background colours stretch only as far down as the height of the content they contain. This is the problem we are trying to solve. How can we make all columns the same height? Or more specifically, how can we make all columns the same height as the tallest column? This is a tricky thing to do because we will never know exactly how high each column will be or which one will be the longest. We can't simply give all columns an arbitrary height either as this will cause big spaces at the end of the page if there is only minimal content, and if there is too much content then the columns will end before the text does. Neither of these situations are desirable. The fact is, content length is dynamic so the heights of each column must also be dynamic. We must remember that nothing is 'fixed' on the web, people have different screen resolutions and the text in their browsers can be set to any size, all of these things can affect the height of content. Separating the column content from it's background colour The first step to solving the equal height problem is to break it into smaller pieces that can be solved separately. The way we do this is to use two divs for each column instead of one. The first div will be used to hold the content and the other will be used as the background colour. This separation gives us individual control over these elements plus we can put them together in a more useful way. This will all become clear shortly. A floated container div will always be the height of it's floated contents This is the central principle behind this equal column height method. The only way to make the height of a div equal to the tallest column is if that div contains all the columns. So to explain this another way, by placing the columns inside a container we cause the container to be the height of the tallest column. This is a very useful structure. Three column HTML div structure In the example above the three content columns are inside a container div. Column 1 Column 2 Column 3 Three column CSS And here is the CSS that forces the container div to the height of the longest column. #container1 { float:left; float:left; background:red; float:left; background:yellow; float:left; background:green; For this structure to work correctly in all browsers the container div must be floated (left or right) plus each of the column content divs must also be floated, it does not matter which way. The process of floating the content divs makes them line up horizontally across the page. Floating the container makes it stretch down to the height of the tallest column inside. If we don't float the container then the content divs will stick out of the container at the bottom and the container won't have the correct height. Actually in this example the container will end up with a height of zero if it is not floated. Adding extra nested containers The next step to equal height columns is to add extra containers so they are nested inside each other. We need the same number of containers as we do columns - three. These three containers are going to be the backgrounds of each column. Notice that we have removed the background colours from the original columns and added them to the containers. Three column HTML div structure The two extra containers have been added to the HTML below. Column 1 Column 2 Column 3 Three column CSS All the elements are floated to the left and the containers have a width set to 100% so they stay the full width of the page. The background colours have been removed from the content divs and added to the containers. #container3 { float:left; background:green; #container2 { float:left; background:yellow; #container1 { float:left; background:red; float:left; float:left; float:left; Moving the containers into place with relative positioning Using relative positioning we now move the containers to their new locations. When each container is moved the divs become visible below. It is the layering and position of the coloured containers that create the background of the equal height columns. The container2 div is moved to the left by 30% to reveal the green right-hand column and the container1 div is moved to the left 40% to reveal the yellow center column and at the same time the red section that is still visible becomes the left-hand column. The CSS relative positioning rules Here is the CSS showing the the addition of relative positioning. #container3 { float:left; background:green; #container2 { float:left; background:yellow; position:relative; #container1 { float:left; background:red; position:relative; float:left; float:left; float:left; Moving the content back into each column The next thing to do is to move the content of each column back onto the page so that it aligns with the column background colour underneath. Again this is done with simple relative positioning. And then finally we chop off the overhanging containers by adding an overflow:hidden; rule on the outermost container - container3. The CSS relative positioning rules Here is the CSS showing the the addition of relative positioning and the overflow rule. Notice the extra position:relative; on container3, this is to solve an Internet Explorer bug that stops the overflow:hidden; from working. #container3 { float:left; background:green; overflow:hidden; position:relative; #container2 { float:left; background:yellow; position:relative; #container1 { float:left; background:red; position:relative; float:left; position:relative; float:left; position:relative; float:left; position:relative; Adding padding to the columns The last thing to do is add padding to the columns so the text is not squashed right up against the edge of each column. If we were to add a CSS padding rule to the columns this might work in some browsers but unfortunately not all. Internet Explorer get's the box model wrong and so it calculates the width of elements with padding differently. A box 200 pixels wide with 20 pixels padding will be a total of 200 pixels wide in Internet Explorer but in all other browsers it will be a correct 240 pixels wide. Padding, you see, should be 'added' to the width of an element, not taken away. CURSE MICROSOFT! But don't worry... we can solve this problem in a completely different way that does not rely on a padding rule. Instead we just make our columns narrower (the column width minus padding on both sides) and then just move them into the correct position with relative positioning. In our example we will use 2% padding so a column that is 30% wide will be reduced to 26% and a 40% wide column is reduced to 36%. When we move the columns back into place with relative positioning we need to remember that the columns are now narrower so when they are initially all floated together to the left, each one has progressively further to move into place than the one before. The completed CSS To keep the layout together at small widths I have also added an overflow:hidden; rule to each content column. This will chop off any content that is too wide for the column and stop it interfering with the rest of the layout. Again, this is only really a problem with Internet explorer, all other browsers will maintain the correct layout no matter what is in the columns. If you really want to, try exposing this rule only to IE with IE conditional comments. #container3 { float:left; background:green; overflow:hidden; position:relative; #container2 { float:left; background:yellow; position:relative; #container1 { float:left; background:red; position:relative; float:left; position:relative; overflow:hidden; float:left; position:relative; overflow:hidden; float:left; position:relative; overflow:hidden; Well, that's it. I hope you found this article useful. Have a play with the CSS and see how it works for yourself. You can have as many columns as you want as long as there are the same amount of containers as content columns. Don't forget to check out my demo pages: 2 column, 3 column, 4 column and 5 column. 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.