Tag Archives: css

Bibbidi-Bobbidi-Boo with CSS

bibbidibobbidiboo
For this post, I’m doing something a little different–I’m going to show, rather than tell. CSS is a magic wand for your HTML structure, but rather than go into the realm of technical details, most of which I’m not totally familiar with (LOL), I’ll illustrate just what CSS can do for your pages.

Without CSS: A Sad, Sad Layout Indeed


Click to view “Layout Without CSS” (in new window)

See what’s missing? The color, the organization–pretty much everything that makes a layout is not present, even though the divided layers are still there. Without CSS to direct how the divs appear and how they line up on the page, it’s just a linear, one-after-the-other presentation, along with the horrid default color scheme. The sight of bright blue links that turn purple when you click on them…ooh, it gives me the creeps. LOL

With CSS: It’s HTML, Now With Less Fail!

Now, see what happens when just a few touches of CSS are applied to the SAME EXACT layout!


Click to view “Layout With CSS” (in new window)

Look at all that has been added! A background image is present, as is a header image (like we talked about in last week’s web design article); the navigation links are styled more boldly and stand out when hovered over. Not to mention that the welcome and the “about this page” section are now placed side-by-side, taking up less vertical space. Most of all, the layout is pulled together with a tone-on-tone color scheme, blending with the header and background image to make a basic (but pretty) design. (Now, CSS can’t make your images for you, but it can sure position them and make them repeat! :D)

Seeing this drastic change is quite like watching your own Code Fairy Godmother wave her wand and transform your ragged HTML structure into a sparkling CSS layout. Now you, too, can go to the webdesigners’ ball!

I love display: block!

ilovedisplayblock
Since being introduced to the CSS property display: block by a dear online friend, I have used it to great effect in several layouts, mainly for navigational purposes.

How display:block Looks and Works

This is how I generally use this CSS style in my layouts, because I’m making only the links in my navigation display in a block format:

#nav a {display: block;}

Here’s an example of what display:block can do, from one of my domain’s previous layouts:

I love how clean it makes the navigation look; I actually like it so well that I’ve used display: block-style navigation on a lot of my websites. (I guess I’m a proponent of the saying “if it ain’t broke, don’t fix it.” :D)

A Few Padding and Margin Tricks with Display:Block

There are ways that you can space the links out or crunch them together to create any effect you desire, just using widths and heights specified in your CSS:

  • For 10px of space all around each link: #nav a {display: block; padding: 10px;}
  • For 10px of vertical space between links: #nav a {display: block; margin: 0px 10px 0px 10px;}
  • For 10px of horizontal space between links: #nav a {display: block; padding: 0px 10px 0px 0px;}

(Note: when you do padding or margins with 4 numbers like I just did, the first number corresponds with the top part of the link block, the second number corresponds with the left side, and so on, clockwise around.) And this is just for demonstration; there are lots of ways you can innovate with padding and margins when it comes to using display: block! Try different pixel widths and heights, and see what works best for your site.

Using a Background Image with Display: Block

Secondly, I like that you can decorate the link “blocks” with background images, like a simple gradient or a pattern, especially for an a:hover link pseudoclass. Having a navigation link highlighted by a pretty pattern in the background when you hover over the link can be just the right touch of detail for a design. Doing something like this would involve your own version of the following code:

#nav a:hover {display:block; background-image: url(‘your_image_name.gif’);}

That code is basically just what I did for my main domain’s 11th layout, seen again here:


See the faint blue gradient over the first part of the word “domain?” That’s the background image hover–no Javascript needed!

Other Beautiful Things about Display: Block

Lastly, I like that you don’t need a “<br>” between each navigation link. It’s one less thing you have to type, which is always good for a web designer, since we’re usually typing large amounts of semi-intelligible code at a time. And it’s amazing how a missing <br> tag can quickly bungle up a layout! (Believe me, one little bit of unnecessary code can make quite a headache!)

In short, display:block can give you a CSS-only way to do something that looks as neat as a table without the clunky borders or endless <td> tags in your code. I love it!