Posts tagged with 'css'

 

Awesome Fontstacks – Easy way to find free web fonts.

I’ve been using this for a few sites including this one. It walks you through different steps and helps you picking fonts that compliment each other for different elements of the site. Also generates the CSS for you to paste into your own CSS file.

Micro-Optimize your CSS

Some real handy tips on how to clean up and minimize your markup

CSS and Javascript articles roundup

Here’s a quick roundup of interesting CSS and Javascript related articles I’ve come across this week:

Everything You Need to Know About the !important CSS Declaration
If you’ve ever worked on a sizable web project you know how hard it can be to figure out which HTML element is using which CSS selector. And since CSS uses cascading, it can be harder to figure out if a CSS selector is overriding another CSS selector. One way to hack and fix this is to use the !important declaration. Of course, that has its downfalls too. This article does a fine job of telling you how !important works and when it doesn’t.

All About Floats
If you’re new to designing with CSS of if you’ve ever been confused about how Floats work in CSS, this article is just perfect. I’ve always had to decide if I wanted to use floats, or position elements absolutely and relatively before creating a template for a project. The author lists how Floats work, why they could break and most importantly, techniques you could use to fix them.

7 JavaScript Differences Between Firefox & IE
Every web browser does things differently (IE6 is a perfect example). But did you know that there a lot of significant differences in the way you use javascript in different browsers? This article lists 7 interesting examples where you have to use different javascript syntax’s to do the same thing. Of course you could always use jQuery (or another javascript library) and just forget all this, but its good to know how javascript works on the bare-bones level.

TinyBox JavaScript Popup Box
After looking around for a small script that does very basic modal pop-ups, I finally found one that does exactly what its supposed to in less than 4kb. Easy to use and no-nonsense

Fixed-width vs Padding

Something I’ve noticed a lot recently is that some websites use fixed-widths while creating tabs in a navigation system using CSS. Although this would work as a temporary fix, setting fixed-widths can be a hassle when the text in your tabs has to change. Every time you change the text, you will have to change the widths accordingly. And since the widths are fixed, you either have to alter the widths of each tab separately (by setting an ID like #tab-1, #tab-2 etc for each tab) or change the widths of all the tabs globally. Since each tab will have the exact same width when changing globally, some tabs will have more room than the other. The CSS for a menu system that uses the same fixed-width for all tabs would look something like this:

  • #menu li {
  •   border:1px solid #999;
  •   border-bottom:none;
  •   width:120px;
  •   height:24px;
  •   line-height:24px;
  •   text-align:center;
  •   …
  • }

Fixed-width Preview

If you take a closer look, you will notice that since the second tab has more text, all the other tabs have to be as wide as the second tab, otherwise some of the text of the second tab will be hidden. We could fix this by setting a unique ID for each tab(like I said, by setting an ID like #tab-1, #tab-2 etc for each tab) and then setting a width for each tab, but that just seems even more complicated. Also notice how we have to set a ‘line-height’ for the text in the tabs to align in the center vertically, and ‘text-align’ to center it horizontally.

A better way to do this is, is to NOT to use a width at all. Setting a width is like setting a limit to how much text you have inside the tab. The trick is to use paddings. You basically put text inside the tab, and push the tab from the inside from the left and right sides. This way, no matter how many letters each tab has, the tab will keep pushing to the sides to fit the text. So now, our CSS should look like this:

  • #menu li {
  •  border:1px solid #999;
  •  border-bottom:none;
  •  padding:6px 10px 6px 10px;
  •  …
  • }

Padding Preview

This way, no matter how much text you have, the tabs will look fluid and less constrained. An easy fix that will save you a lot of trouble down the road.

close

Photos