Black is the new black
Inspired by recent Apple interface designs such as Aperture, Safari’s Web Inspector and the MacBookPro website, I’ve re-designed this site. I’ve also re-coded a bit of the backend so it’s a lot easier to maintain. On the front-end there’s some DOM scripting and Ajax to enhance the archives, the search feature and the individual post pages. I’ve got some problems to iron out with IE6 but everything should be hunky dory on modern well-behaved browsers.
As always, your feedback is welcome!
Posted 2 years, 7 months ago on 20th January 2006.
- 10 years of Apple.com
- D50 or 350D?
- Four Things
- Highlighting Labels
- Black is the new black
- Web Inspector
- Invasive iTunes
- MacBook Pro, iWeb and Intel iMac
- @media 2006
Comments
I like. More minimalist than most of the dark layouts but in a good way.
Couple of pointers as always, feel free to ignore as you see fit!
The central column collapses indefinately, which causes problems with the width of the add comment. May some min-width action for those of us with proper broswers?
Gareth Rushgrove · www · 2 years, 7 months ago
Very clean, love the up and down arrows for browsing through the archives over there on the right.
In the comments box, though, it’s hard to see the cursor which makes editing text quite hard (on Safari).
Duncan Gough · www · 2 years, 7 months ago
I liked it with the lights on, and I like it even more now that I’ve turned them off to get some groovy contrast going on.
Very nice work, although you’ve got some scrollbars showing in IE which is annoying in Fullscreen mode since I want it completely black g'dammit!
Steven Woods · www · 2 years, 7 months ago
Oh P.S.
After submitting comments, it says:
"Thanks for commmenting!"
Too many M’s!
Steven Woods · www · 2 years, 7 months ago
Gareth - cheers for the feedback. I’ll look into this. It’s the first time I’ve really done anything with position:absolute. I need to find out how to stop the nav overlapping the main content when the page is resized. I’ve always used floats before, so you may need to bear with me a little!
Duncan - excellent point. I’ve changed the :focus CSS properties on the form fields so it’s easier to edit text.
Steven - well spotted. Typo now corrected! Also, hopefully get IE sorted soon when I get back to work (where the PC’s are!).
Gorgeous.
Garrett Murray · www · 2 years, 7 months ago
Hi Phil!
"I need to find out how to stop the nav overlapping the main content when the page is resized."
I’m very bussy with studying. I’ll give you a more detailed answer and solution to this problem middle of next week.
Now, a note: Separate your three main-divs from each other: Logo, Navigation and Main:
Logo: position:absolute; left: 0; top: 0
Navi: same but left->right
Main-Div: position:absolute; left: 142px; right: 184px
Your Main-Div should contain oldposts, content and whatever you want. Margin right of oldposts to the border of Main-Div and not to the window-border like it’s now.
Talk to you next week.
Bye, Gustav
If you want to write a mail, try this: mr.g.miller and the mail-service from google called gmail.com ;)
Gustav · 2 years, 6 months ago
Hi Gustav, thanks for the pointers. Rather than setting margins on the centre column to allow space either side for the logo and nav I’ve used position:absolute as you suggested. Seems to work better, but I’ve still got some problems when the comments collapse indefinitely. Hmm...
Very nice! I love how clean it is.
Feaverish · www · 2 years, 7 months ago