CSS-Tricks

Double Background Effect with CSS

Soh Tanaka tackles a CSS layout problem that probably many have you have run into. The idea is double backgrounds, that is, having a centered design where the left side has a repeating design and the right site has a different repeating design.

New Wufoo Features

Most of you probably know I’m a big fan of Wufoo, the web service for building forms. (If you don’t, I have an intro video here). In the last few weeks they have rolled out a bunch of new awesome features. They’ve added Likerts (you know, “Strongly Agree, No Opinion, Mildly Disagree…”). They’ve made it easy to add fill-in-the-blank “Other” fields to multiple choice questions, and they’ve seriously upgraded their hardware. Go Wufoo!

Lorem2

Lorem2 is “an all-around better Lorem experience.” Just what is always needed: short paragraphs, long paragraphs, short list items, and long list items.

The CSS Gallery List

I once did a CSS Gallery Roundup, but I’m not even going to link to it because it sucks compared to The CSS Gallery List. Not only is this a great list of all the zillion galleries out there, but there are quick links to the submission pages as well as an innovative and really cool system for auto-submitting your page to a wide variety of them automatically ($3).

Read Article / Comment »

When creating navigational tabs that use real web text, some positioning issues may arise when that text is resized. The natural flow of a web page when text is resized is to push down. This can push your main content area down and/or force the tabs into that area. Using some smart CSS, we can fix this issue by creating tabs that grow upward when text is resized.

Bad Example

View Bad Example

In this example of bad tab behavior, when text is resized the tabs grow downward and push into the main content area.

One solution could be to have the tabs push down the main content area as they grow. In this example that may be fine, but that may be unacceptable for a more image-based design or for folks nervous about losing content below the “fold”.

Good Example

View Good Example

In our good example, the main content area stays put. The tabs grow upward and the rest of the text grows downward as usual.

The Trick

The meat of the trick is using two nested block level elements. The outside block controls the positioning. We need to lock to the top of the main content, so the outside block needs top: 0;. The inside block then sticks to the bottom of the outside block with absolute positioning. By setting a fixed bottom value, bottom: 0;, the menu items have no where to grow but up.

Menu markup:

<div id="nav">
	<ul>
		<li><a href="#">Tab 4</a></li>
		<li><a href="#">Tab 3</a></li>
		<li><a href="#">Tab 2</a></li>
		<li><a href="#">Tab 1</a></li>
	</ul>
</div>

Code purists will notice right away the common folly of wrapping an unordered list in a div unnecessarily. In our case though, it is very necessary, and we need both of those block level elements for our trick.

CSS for the two blocks:

#nav	 {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 0;
}
#nav ul {
   position: absolute;
   bottom: 0;
   right: 0;
}

Here is a visual:

Note

This is becoming less and less of an issue as more browsers are using full zoom instead of straight text resizing. But still, it’s just good responsible design at this time.

The iPhone has a funny way of bumping up the text size on websites when viewing them fairly far “zoomed out”. This can be wonderful, as it can help the text be readable while seeing more of the website. It can also be unexpected, undesirable, and break otherwise perfect layouts.

To prevent this on your site, you can use this:

-webkit-text-size-adjust: none;

Apply it selectively, or directly to the body to prevent resizing everywhere.

Thanks to Ed Brandt for sending in this trick. It fixed a problem on Ed’s site of some text wrapping in the footer when it shouldn’t.

It’s WordPress Week here at CSS-Tricks, so I wanted to so a WordPress-themed screencast and cover a lot of mini-tips that haven’t made it into previous WordPress screencasts. See the post page for a complete list of tips covered.

Happy Thanksgiving everyone!

So you have WordPress installed! Congratulations! Now what? I find myself installing WordPress quite often, so I’ll share with you my “first steps” after a fresh install to get WordPress set up to my liking. This involves changing settings, resetting the theme, and some universally useful plugins.

At the time of this writing, WordPress 2.6.5 was just released. You know, “for future reference”.

Read Article / Comment »