Sidebar Revamp
After exchanging a few design words with Mike Rundle, jet-setter and 9rules designer extraordinaire, I’ve spent most of the evening tweaking my sidebar. Since the recent realignment, I had always felt uneasy about the composure and structure of the sidebar area. Mike assured me that text-align:right; was not working. In addition to aligning text to the left, I split up the main menu into 2 columns and created a graphic from a picture (currently, the same one on my about page).
If you want to put any list on your site into columns, take a look at the basic CSS below.
float: left;
width: 50%;
}
.your-div ul {
height: auto;
overflow: auto;
width: 210px; /*in this case each column will be 210px * the width above (50%) = 105px*/
}
The height and overflow attributes for the unordered list are rather important and ensure that everything clears properly, as each list item is a floated element. Without these, things below your columns would try to sneak up and overlap.
I like the new look logo :)
I rather like the 2column idea, and seems quite innovative until all the agents support CSS3. When carefully used, columns will be very helpful.
Thanks for sharing the code!
I’m not so sure about the search box, I would either make the text stand out a bit more, or stick with the white background. Its kinda hard to see. I only noticed it because Glenn mentioned the logo
The search box seems rather difficult to locate. Like all the modifications to the sidebar except that one, as it is not intuitive at all.
Maybe if you just put some text, like “Search”, into the box it would be easier to see.
I agree wholeheartedly with Scott.
it seems everyone has the same thoughts on the search thing
Yeah, it’s very difficult to make out the text while it’s overlapping that photo. Otherwise it’s solid. x)
For the search box, I would have a semi-transparent white background in the box until someone types in that. That should give it just enough to make it stand out a little more.
yeah i was just playing around with search box backgrounds. Firefox is cool with them, but safari is not. So I had to pick a color they both can show but when the text area is focused have the colors change.
I liked the older design more. Seeing this latest design, I was confused and thought I had disabled images on my browser.
Anyways, your site loads a lot faster now :-)
Despite everyone’s issues with the logo, the site redesign is good and more accessible. It is eaasier to get straight to the content, which is, of course, most important. Bravo.
Oh, so you listen to Mike but not me? Understood :)