Hello, again! It’s been more than a few months since my last post here at glassdog, and I’m starting up again with a new/old direction; Web site design. Perhaps some of you remember many years ago when you could come visit glassdog and dig through Design-O-Rama and get some tips and tricks in the early days of HTML and tables and transparent GIFs and CSS when all it could really do well is help you define your typographic elements.
Times have changed greatly, and I’ve been trying to catch up and make sense of it all, and as I do I’m going to pass on what I’ve learned, as usual, in hopes that you’ll glom onto some of it and go out and make more cool stuff.
So… onward to the hows and whys of the completely weird and somewhat silly and awfully time-consuming navigation element at the top of this screen. It’s still got some bugs in it, and it’s not performing precisely as I would wish it to, particularly on Safari, but I’m also asking it to do an awful lot of little things all together at one time, so while it’s not necessarily professional grade and I probably wouldn’t offer it to a client, it’s another in a long series of “How can I do that?” experiments that I want to continue to use glassdog for.
If you’ve already tried it out, you’ll see that there’s a little sliding tray that appears when you click on the arrows (or anywhere on that bar, really) and within the tray there are three distinct sections. The first section lists posts and also provides a floating pop-up Bubbletip with a 25-word excerpt for each title. The categories show off just that, and in the last section you can start a search query on the site, adjust the text size as you may wish, grab the RSS feed or Email me. I’m sure I could make that section a little more interactive, but for the time being I’m just going to be talking about positioning.
I’ve been playing with CSS and HTML for a few months as I try to re-enter the life of a freelance web developer, and the biggest hurdle I’ve faced is getting my head around positioning. I read a few books, I looked at code, I wandered through the usual web sites devoted to design and coding and I still couldn’t grasp exactly how it worked. Specifically, I had a hard time understanding the spatial interaction between differently positioned elements, and how to get the pieces that I wanted precisely where I wanted them.
Which is, of course, what ‘positioning’ means.
If you’re an expert, this isn’t for you. If you have no interest in designing web pages from scratch by hand, ditto. But if you’re like me and you get a lot of satisfaction from bringing together pixels and words in a sort of precision, then I hope you’ll learn something.
Layers and Stacks? Absolutely!
First thing I had to do was understand that a Web page is no longer a flat plain made for laying out table cells, I can also stack tables on top of each other. This was a key epiphany for me and it was probably spelled out somewhere but I just didn’t get it until I also understood the relationship between Relatively and Absolutely positioned elements.
In the olden days, a web page started at the top and went to the bottom exactly as you see it on a screen. Everything that was laid out in the HTML proceeded in the order it was coded. You could move elements around slightly using tables with rowspans and col(umn)spans, and maybe replace one image with another on a MouseOver, but by and large a web page was a flat thing.
What positioning provides is stacking on top of that real estate using positioned elements, specifically using Absolutely positioned elements.
The browser document object model (DOM), in the simplest terms, is a series of parent and child relationships, and how one thing relates to another in the scheme of the page. The
body of the document is the main parent of everything inside it. If everything is Relatively positioned (heh, relatives!) than everything is a child of the
body tag. Since everything is a child, whatever comes first take precedence. It all falls in place in order. If you don’t position anything, it’s actually not Relatively positioned, it’s Static. Unchanged. Uniform.
An Absolutely positioned element doesn’t want to fall in line, it wants to be its own person. If you Absolutely position an element, it will ignore everything else on the page and float to the top of the browser window as if it is the first thing. More than that, it allows everything else to exist normally, so although it positions itself at the top of the page visually, anything else that is coded on the page after it will still appear stacked on top of it. So if you think about those stacks, an Absolutely positioned element at the top of an HTML page will have everything else stack on top of it, but it will all start at the top left corner. If you take that element and move it to the bottom of your HTML page it will still appear at the top left corner, because it will still ignore everything else on the page, but now it will be stacked on top of everything else.
You position an element using ‘top’, ‘left’, ‘bottom’ and ‘right’, but only one of each opposite is needed. So telling an Absolutely positioned element:
top: 20px; left: 20px; will make it appear 20 pixels from the top and 20 pixels from the left (to the right) of the top-left corner of its parent element. Similarly, telling it:
bottom: 20px; right: 20px; will make it float 20 pixels above and 20 pixels from the right (to the left) of its bottom-right corner.
I know that may sound confusing, so just remember that you’re telling it where to start from (bottom) and how far to go (20px). You can also use negative numbers if you want the Absolutely positioned element to move beyond the borders of its parent. Remember: an Absolutely positioned element only obeys itself. It will do whatever you tell it to do in relation to its parent, but it won’t obey any other orders.
Remember that an Absolutely positioned element acts on its own according to the rules you provide for it. If you don’t tell it how big it should be, it won’t have dimensions until you stick something else inside it, and even in that case the element itself doesn’t grow any bigger, but all its contents do. It isn’t part of the square puzzle pieces on the map of the document, it sits on top of the puzzle and can create, in essence, another puzzle overlaying the original. One reason to provide it with some dimensions is to use it to position other stuff where it needs to be on top of the page or other elements, because when you start stacking things on top of each other, some predictable though annoying things start to happen.
For one thing, You can stack a transparent Absolutely positioned element on top of a page and see through it to the contents below, but your mouse can no longer act on those contents. Links stop working. MouseOvers, onClicks, the whole shebang shuts down. It’s like plastic wrap, you can still see what’s underneath but you can’t directly touch it.
For example, say you want to stack an image on top of the content. You wouldn’t have to worry about placing it within the layout of the page if you Absolutely positioned a
<div> accordingly and put the image inside it. Using a GIF or PNG with transparency means you’ll be able to see through the edges and no longer have to worry about those square corners. All well and good, until you discover than any links underlying the
<div> no longer work. So you have to plan your stacks carefully.
So what does Relative positioning do?
Well, a couple of things. Like Absolute positioning, you can use ‘top’, ‘left’, ‘bottom’ and ‘right’ to move the element from its normal place in the document. It stays where it is in the normal flow, but the contents can be moved around and its dimensions can grow and shrink according to the height and width you assign to it. Think of Relative positioning as being one step up from Static positioning. Something that’s Static is unchangeable. If you need to move something relative to its starting point, use Relative positioning.
Relative positioning also bestows a special quality on an element, as if it’s now an honor student. It stands out, but it still falls in line. What Relative positioning does that you want to know about is that if you Relatively position something, and then put an Absolutely positioned element inside it, the Absolute element will stick to it rather than stick to the body or any other parent element in your code. This is how you get more control over your layout.
Fixing some Z’s
So now that you have a rudimentary understanding of Relative and Absolute positioning, let me throw one more at you:
Fixed. Something that’s been given Fixed positioning works like an Absolutely positioned element but with one big exception; not only does it ignore all the other elements on the page, it also ignores the scrollbar. One big caveat to using Fixed positioning; only the latest version of Microsoft Internet Explorer (IE7) recognizes Fixed positioning as being something different from Absolute positioning. It won’t fix it where you want it fixed. Since lots of people are still using IE6, it’s far from 100% reliable, so keep that in mind if you want to start using it.
However, if you’re using Firefox, Safari, Opera or IE7, that’s how that overlarge navigational and branding element stays put at the top of the page as the content scrolls. Given everything I’ve explained to you so far, you should be able to understand that although the element appears at the top of the page in the browser window, the code for all of it appears at the bottom of the HTML document. That’s because I need it to stack on top of everything else, so it has to fall after the other content and then be Absolutely positioned according to the Body, ignoring everything else that’s come before it.
You might, if you’ve used CSS before, be wondering why I just don’t use the Z-Index property of style sheets to tell the various pieces how they should stack which is exactly what Z-Index does. If you provide a Z-Index value to positioned elements, you’re telling them in what order to stack, lowest value first up to highest value, starting at zero. But Z-Index only works on the children within one parent element.
In other words, if you started to Relatively position things on a page, and moved around their positions and expanded their dimensions so they started to overlap, you could provide them all with Z-Index values and they’d know not only where they should position on the layout, but also how they should stack (assuming you don’t want subsequent elements to always stack on top of previous ones, as is their wont). That’s assuming that they all share the same parent.
But when you want to Absolutely position something inside a Relatively positioned element, you just changed its parent. Different elements positioned Absolutely within different Relatively positioned elements all take on new stacking orders. Assuming you haven’t positioned one Relative element within another Relative element (also reassigning its parent) than you can still assign Z-Index values to the Relative elements rather than to their Absolute children and they’ll line up accordingly, but here’s where things start to get messy.
Positioning works really well if you’re not trying to center things on the screen. Remember, everything keys off the top-left corner of the parent element, or off the top-left corner of its position in the document flow. When you want to float things center screen, you’re moving the top-left corner away from the top-left.
Don’t get scared, just re-adjust your point of view to a new parent. If you Relatively position an element that’s floating in the center of the screen, it can become the new dominant parent element from which everything else flows. You’re positioning it Realtive to the body (which you’ve told in its CSS instructions to place
text-align: center;) and then you’re positioning everything else Reletive to it. Stuff inside that you don’t assign a Relative or Absolute position will now fall within its Parental power, and as long as you don’t close it off before assigning another Relative element, that element also obeys it as a parent.
But if I don’t want my navigation to float mid-screen, I can’t place it within that element. If I also want it to stack on top of it, it has to follow it in the code since it’s not going to obey the Z-Indexing I would otherwise assign it. So by Absolutely positioning an element that appears after the centered content on the HTML page, but uses the same parent element (the
<body>) it uses the same top-left corner and flies to the top of the page depending on my use of top and left positioning.
I think that’s a lot of stuff to digest before we get into the actual code of the Navigation and how the four distinct pieces interact with each other, so that’ll be it for this piece. Next, we tackle the set up for making the navigation assemble itself.