Empfohlen
Weitere ähnliche Inhalte
Mehr von zubeditufail
Mehr von zubeditufail (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Introduction to css positioning
- 1. Introduction: This tutorial is on how to position elements properly in CSS. Template: Here is the default HTML template containing our head and body for our page... 1. <html> 2. <head> 3. 4. </head> 5. <body> 6. 7. </body> 8. </html> Linking CSS: Next, if we were going to be using an external (from the editing HTML/PHP file) CSS file, we would want to link our CSS file in the head tags, like so... 1. <link rel='stylesheet' href='style.css' type='text/css' /> I'm going to be using inline styling in order for it to be easier to read and understand for you, the reader. Elements: So now we want to create some test elements. I will create, a header div, a footer div, a content div, and a sidebar div... 1. <div class='header'> 2. </div> 3. <div class='content'> 4. </div> 5. <div class='sidebar'> 6. </div> 7. <div class='footer'> 8. </div> We want our head to cover the full width of our content page, at the top. Footer is the same as the header but at the bottom. Content will be the majority of the middle (vertically) on the left hand side, while we our sidebar will fill the right side of the page. Background: So we can easily tell our divs apart, we are first going to add a background colour to each of them... 1. style='background-color: black;' My colours; Header; Blue Content; Pink Sidebar; Orange Footer; Black Width & Height: If you test your page, you will get nothing. That is because although our div's are there (check the page
- 2. source code), they only have dimensions of 0 x 0 due to not having any content inside of them. We are going to set the heights and widths appropriately. We want our header to be full width, followed by, let's say 120pixels (px) height... 1. width: 100%; height: 120px; Content is not the full width due to the sidebar, we'll put 75% leaving 25%. Height will be 600pixels... 1. width: 75%; height: 600px; Sidebar is not the full width due to the content, we have 25% left, so we'll use 20% of it leaving 5% as space, etc. We'll use the same height as the content, therefore keeping the page as a grid layout. 1. width: 20%; height: 600px; The footer will be the same as the header... 1. width: 100%; height: 120px; Now test your page. You can see that it's all fine, except our sidebar is under our content div. Not a very good sidebar, is it? Siding...? To make our sidebar 'float' to the right hand side of our page, we'll use the convinient float property, set it to 'right'... 1. float: right; We also need our content to be floating left in order to make room for our sidebar floating to the right side of the page... 1. float: left; Problems... Perfect... No? Our header has gone behind our floating divs, and is now directly below the header. Add 'clear:both' to the footer to fix this, so it goes under all floating divs. 1. clear: both; Finished!