Positioning: The Final Frontier
Now that we can make our div containers into any shape we want, the next step is to arrange those shapes around the page. We do that by positioning. Here are the CSS properties you’ll need to know:
|position||Type of positioning|
eg. position: absolute;
|left||Set the element’s left edge position|
eg. left: 10px;
|top||Set the element’s top edge position|
eg. top: 10px;
|right||Set the element’s right edge position|
eg. right: 10px;
|bottom||Set the element’s bottom position|
eg. bottom: 10px;
|z-index||Set the element’s stack position:|
In case two elements overlap in the wrong way, simply set the z-index of the hidden element to a higher number until it appears OVER the other element.
eg. z-index: 10;
One last thing: /*Comments*/
Sometimes you need a way to leave yourself and others helpful “comments” in your CSS file. Anything “commented out” is invisible as CSS. All you have to do is sandwich whatever you don’t want seen in between /* and */.
this line will be seen
/* this line will be commented out.
So will this line.
Nope, won’t see this line either */
and we’re back.
Exercise: The standard webpage layout
Ok, we’ve dumped a lot of theory on you, so it’s finally time to see some action! We are now going to replicate the modern standard page layout: a header for our logo and navigation, sidebar for our links, and place for our primary content. 99% of your future pages will probably use some version of this page as its template. By the way, when creating a new page layout, we encourage sketching your page on paper first just to help visualize how all the DIVs should be laid out. Here is our sketch of the layout we want to create:
- Since DIVs are usually invisible, we’re going to set their background colors just so we can see them.
- The DIV id names “header”, “content” and “sidebar” are completely arbitrary names. You could name them “spaghetti”, “cheese” and “meatballs”, and they’d work just as well.
- Usually we would make these DIVs butt right up against each other, but for this tutorial, we’re going to make them separate islands.
Our first step is to adjust our html. Simply make sure you add the lines highlighted below to your main index.html file.
<link rel="stylesheet" type="text/css" href="style.css" />
<div id="header">I’m a header!</div>
<div id="content">Put your content here!</div>
<div id="sidebar">Side up to the bar!</div>
Here’s where the magic happens. Replace anything in your style.css file with these lines. All we are doing here is setting the dimensions and positions of our three container divs.
background-color: #189A98; /* aqua */
the header should already be in the right spot
(at the very top) so we can skip manually
background-color: #8080FF; /* violet */
background-color: #F8BF24; /* yellow */
- Notice how both the single and multi line comment styles are used. That makes the affected lines ”CSS invisible”. If you are using a css editor like notepad++, they should instantly change color to help remind you.
- For this tutorial, we’re going to use percentages for simplicity. The advantage to using percentages is that the text flows to fill the window no matter how you reshape it. The downside is that all that stretching can make your layout pretty ugly. In the next exercise, we’ll switch to fixed layouts.
- The sidebar and content divs are absolutely positioned. This means that whatever coordinates you give will be in relation to the containing element. In both these cases, the containing element is the the body tag, aka the entire window.
- The sidebar is positioned at right 0px and top 210px; This translates to “the Sidebar’s right edge is 0 pixels away from its container’s right edge, and its top edge is 210 pixels away from its container’s top edge.”
If you’ve followed all the instructions, you should now have a page that looks quite similar to the initial sketch we did above. Congratulations! You’ve reached the end of this lesson!