21st November 2004, lunch time | Comments (42)
Note: I’ve found out how to do two new CSS-things, but I don’t have time to write up detailed explanations of them. Instead I’m going to point you to two sets of demos, briefly describe what’s going on, and then let you folks figure out the rest.
I recently had the pleasure of working with the mozilla-europe.org team, helping them swap from their old, red look, to the nice mozilla.org look that the lads at Silver Orange knocked up.
One of the more interesting aspects of the project was that with the exception of each page’s header and footer, I wasn’t allowed to alter any of the XHTML on the site. CSS-advocates are always saying how easy it is to change the look of a site without touching the structural or semantic markup, but I must admit I’ve never actually had to do it: this was to be my first attempt.
So, how did it go? Well, as it turns out, it wasn’t too bad. I had a couple of sticky moments where I felt sure I’d have to compromise the design, or force Mozilla Europe to change their mark-up, but in both cases I found some interesting solutions to the problems. The final product was, I think, really rather good.
Let’s take a look at what I came up with…
On mozilla.org the <ul>
containing the navigation is marked-up inside the header <div>
(div#header
) at the top of the document. On mozilla-europe.org the navigation <ul>
was marked-up outside the header <div>
and appeared near the end of the document. How could I visually place the navigation, with pixel-precision, inside the header <div>
and still ensure the design worked with variable font sizes?
http://demo.1976design.com/bottom-nav/
I’m pretty chuffed with this. I managed to use CSS to move the navigation <ul>
from the end of the document (just above the footer) to the top of the document, and insert it precisely into the blue header <div>
. That’s not clever in itself, but what is sweet is the fact that it copes perfectly with increases or decreases in font size, which, when you think about it, is pretty darn cool.
Things to note 1: the first reason this works is because as the text size changes, the header (div#header
) and content (div#container-inner
) <div>
s move up and down the page. Because the navigation is positioned relative to its parent (div#container-inner
) it also moves up and down by the same amount.
That’s nice, but it’s not enough. When positioning using position: absolute; top: ##px;
we specify a Y co-ordinate for the top-left corner of a box. What I needed to do was position the bottom-left corner of the <ul>
box so the list-items sat perfectly along the bottom edge of the blue header.
Let me say that once again for clarity: somehow I needed to make position: absolute; top: ##px;
target the bottom-left corner of the <ul>
box… but that’s not possible, is it?…
Things to note 2: the second reason this works is because the contents of the navigation <ul>
are all floated right, causing the <ul>
to collapse down to 0px
in height, and allowing its content to stick up, out the top. When I absolutely positioned the navigation <ul>
I actually positioned its top-left corner, but since it’s 0px
high, its top-left corner is, to all intents and purposes, the same as its bottom-left corner. This allowed me to precisely position the bottom edge of the <li>
items, something I normally couldn’t do.
Groovy, eh?
I think this is something which has a lot of potential for layouts.
When the chaps at Silver Orange created mozilla.org they did what we all do: they figured out the visual style of certain elements, and then added in a series of <div>
s (with IDs and classes) around those elements on which to ‘hook’ their styles.
I wasn’t allowed to alter the XHTML code of mozilla-europe.org, and yet I somehow had to copy the visual styling of mozilla.org. How could I do that when mozilla-europe.org had no such <div>
s? On what could I hang my styles?
One section in particular proved troublesome. Silver Orange had styled it up using a div called ‘key-point
’, to create a blue box with curved edges. It looked like this:
Unfortunately the Mozilla Europe XHTML had no such encompassing <div>
around those four elements, so how could I make it work?…
http://demo.1976design.com/boxless-boxes/
I solved this problem by using some non-IE CSS selectors and a liberal dose of :before
and :after
. It’s quite specific to the XHTML on the Products page, but since the Mozilla Europe webmaster is in charge of both the CSS and the content, that’s not a problem.
The key thing to look out for here is this section of CSS:
/* before the final paragraph */
body h2.prod+p+p.download+p:before {
/* create a blank space */
content: " ";
/* clear it left, so it clears the floated <p class="download"> */
clear: left;
/* display block */
display: block;
/*set a small height */
height: .5em;
}
That’s what finally enables the whole thing to come together.
Sorry for the rushed post, but I hope I’ve explained things sufficiently for those two techniques to be useful for someone. They’re certainly ideas I’ll be using again in the future.
Jump up to the start of the post ↑
A collection of miscellaneous links that don't merit a main blog posting, but which are interesting none-the-less.
Our enemies are innovative and resourceful, and so are we. They never stop thinking about new ways to harm our country and our people, and neither do we.— George W Bush (9)
Stuff from the intersection of design, culture and technology.(3)
A selection of blogs I read on a regular basis.