DevHints

Archive for the ‘CSS’ Category

It’s 2am and I’m up working on a website. It’s fairly typical. And while most people would doubt my productivity at such an hour given that I’m awake all day, I have proof of productivity (and creativity).

I was playing with a layout revision of one of my websites when I got to doing the links. Typically I do something plain-jane like this:

a:link, a:visited { color: #000; text-decoration: none; }
a:hover, a:active { color: #333; text-decoration: underline; }

That makes a neat little link that goes from plain black to a dark gray with an underline when hovered over. Nothing special. Of course, I mix in all sorts of fun colors and I do background color changes too. Tonight was different though.

I decided I wanted to do something to help visitors keep track of where they’d been by styling “visited” links differently. After seeing a few people (most notably Mike Davidson) do the little check boxes, I figured it wasn’t a half bad idea. Mike uses the :after pseudo selector to add the checkbox to visited links. Not a bad idea, but it won’t work in IE and it makes changing it on hover difficult and choppy. I had a better idea.

I used the background property. I had just used the same method for my list bullets, so it was still fresh in my mind. Simplified, we had the following:

a:link, a:visited { color: #000; text-decoration: none; }
a:visited { background: url(‘images/check.png’) right 60% no-repeat; }

I used 60% because it achieved better alignment in my situation than center and it scales better than pixels. Now my little visited links had neat little checkboxes next to them. Awesome. But now my hover style didn’t look quite right since I was changing the background color on hover. This is when I started thinking…what if I could tell the browser to change the background on hover over a visited link? Well, it looks like you can:

a:link, a:visited { color: #000; text-decoration: none; }
a:visited { background: url(‘images/check.png’) right 60% no-repeat; }
a:visited:hover { background-image: url(‘images/check_hover.png’); }

I actually originally had the hover and visited pseudo-selectors swapped the other way around (:hover:visited) but IE didn’t want to cooperate, so I got to thinking what I was really telling it (apply this to anchor tags when they are being hovered over that are visited) and how it made more sense if I flipped it (apply this to anchor tags that have been visited when they are being hovered over). Sure enough, it worked like a charm.

NOTE: While this method does allow for more customization and it works with IE, Mike’s method is better from an accessibility standpoint since it doesn’t use an image.

If you’ve written much CSS, then you probably know that the different implementations of the CSS rules by each rendering engine are really frustrating. Firefox, Opera, IE5, IE6, IE7, Safari, and more all seem to have different interpretations of how your code should look. They make no exception with the use of different rules that allow you to center objects.

Some common ways are to use margin: 0 auto; on a block level element, and using text-align: center; on the parent of an inline element. Well, the auto sides setting on the margin rule doesn’t always act like it should, and you might not want all of your actual text centered. So here’s a better solution, albeit a bit more strict in it’s implementation:

#centerMe {
display: block;
position: absolute;
width: 500px;
left: 50%;
margin-left: -250px;
}

Okay so what’s going on here? With the left rule we’re forcing the left side of the object to be in the exact center of the screen. Since it’s then going to be too far to the right, we use the margin-left rule to bring it back by half of the width of the object. Obviously, this doesn’t work too well with dynamically sized objects, which is why I mentioned that it’s a bit strict; however, I think it’s an excellent way of getting around browser inconsistencies regarding margin: 0 auto;.

There’s a rather unknown property in CSS called text-transform. It allows you to force all the text for a particular element to be transformed to UPPERCASE, Proper Case, or lowercase.

strong {
text-transform: lowercase; /* force text to lowercase */
text-transform: uppercase; /* force text to uppercase */
text-transform: capitalize; /* force text to proper case */
}

It’s quite useful for making your links stand out, or making sure that all the links in your menu bar are uppercase. You can also use it in association with :hover, :active, :visited, and :link to make your links go all uppercase when hovered over.

Did I mention that you can also use this to force text to become Proper Case (so the first letter in each word is capitalized)? That means if you aren’t going to need to store the information differently, you don’t need to bother using a server side language to change text to proper case, you can just set your CSS up right!

Some other cool uses for this include making all the text entered in a CAPTCHA input text field uppercase so the user doesn’t have any question as to whether the CAPTCHA is case sensitive or not (note, this will only affect the display, so data sent to your scripts might not have caps), and showing the active link as uppercase, instead of changing the color or underlining it!

Centering your tables and divs can be confusing since not all browsers play nice with applying the parent element’s text-align attribute to block-level elements. No worries though, there is a quick and easy way to center any block level element.

margin: 5px auto;

As you should already know, when you set margin or padding you can alter all the sides individually like this:

attribute: top left bottom right;
attribute: topandbottom sides;
attribute: top sides bottom;

So in the example above, we set the margin for the top and bottom to 5px and the sides to auto. When you set the sides to auto, the browser will center it in it’s parent element because it makes the margins the same on each side. You could also set the top and bottom separately like this:

margin: 5px auto 10px;

So there you have it: the magic way of centering block-level elements in CSS!

If you’ve ever wondered how you could get a link to be one color and the underline to be another color, you’ve come to the right place. While this isn’t supported in CSS (yet, maybe one day), we can do something that will appear to do the same thing.

Here’s the CSS:

a {
color: #F00;
border-bottom: 1px Solid #00F;
text-decoration: none;
}

It’s extremely simple. Since all elements have a margin and padding, and they are all defined by boxes, we can add a border to one side of the element: the bottom. You can change the element to support your action selectors (hover, visited, link, active) and setup more complex things…like having only the underline color change on hover.

To change the underline color on hover only…

a:link {
color: red;
text-decoration: none;
border-bottom: 1px solid blue;
}

a:hover {
border-bottom-color: green;
}

You could also set the initial border to transparent instead of a color, then give it a color on hover and have the same underline-on-hover behavior as using text-decoration underlines, but with the additional flexibility of using the bottom border without the text shifting on hover.

One of the most common things people do with CSS is change the style of the links in a page. I’d highly recommend it since the default links usually won’t work with your color palette, considering they are bright blue, bright purple, and bright red.

To simply make all links the same color with the default styling, simply add the following line to your CSS file or style tag:

a { color: #FFAACC; }

You’ll want to replace the hex color code with one of your own, though. Lets go a bit farther and setup some different styles for the links and hover actions.

a:link, a:visited {
color: #FFAACC;
text-decoration: none;
}
a:hover, a:active {
color: #EE99BB;
text-decoration: underline;
}

Here we have links that will change color when hovered over. They will appear by default without an underline, but when hovered over, the underline will appear. This makes the links a bit more interactive, and usually it helps visitors distinguish links from non-links.

There are a variety of methods involving CSS and HTML to get rounded corners. Mozilla-based browsers actually have a bit of CSS that makes it really nice and easy, but what about the other browsers like IE, Opera, Safari, Camino, Konquerer, and all the IE mashups (AOL, MSN, etc)?

Well, some people prefer to go with a CSS method that doesn’t use images, but personally, I don’t think it’s that much of a hassle to just make the images. However, sticking them to the corners without using a table can be a bit tricky. There are a few ways to do this as well, but I find the following to be the easiest:

<div style=”width:100%; margin: -20px -20px 0 -20px; padding: 0px; text-align: right;”><img style=”float:left;” src=”top_left.gif”><img src=”top_right.gif”></div>

Let me explain a bit here. I usually put everything into a container (DIV) that has padding for visual purposes. If you want the corners on, well, the corners, you will have to cancel out the padding and force the images onto the corners. Rather than go with absolute positioning, I just used a negative margin. The zero is for the bottom of the div, since the rest of the objects on the page will still behave by the padding defined and we don’t want to push elements down any farther. To get the corners to hit opposite ends of the div without using 2 divs (which I find to be irritating and sloppy) I told the CSS to align to the right, but I floated one image to the left. They all line up smoothly. Do the same for the bottom corners and you’re set!

Oh by the way, make sure you close all of your elements, otherwise the bottom corners might jump up since the margin won’t be rendered due to incorrectly nested tags.