DevHints

Archive for the ‘Intermediate’ Category

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;.

Advertisements

There’s been this long standing bug with IE and changing the src attribute to update the image. Under certain conditions, it causes the image to simply disappear. There are two well known solutions to this problem:

1.) Have an alert box popup immediately after the change.

2.) Use a setTimeout function.

Neither of these is exactly pretty. But fear not, there’s a new way to do this that’s really ingenious. Are you ready for it? Here it is in an example:

var src=”http://example.com/image.gif”;
document.getElementById(‘myimage’).src = src;
return false;

Did you catch that? Just add “return false;” immediately after the update to the image src! Hopefully this will save you an entire day of frustration. 😉

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!

Yup, we’re back in college, only your professor is hardly politically correct and he’s learned by actually doing it. We’re going to hit some basic points of design that I see a lot of amateurs missing that you should definitely know about.

Rules are meant to guide, and there are always good reasons to break them. The same goes with laws, but we’re talking about design. You should learn to follow the rule, until you really know what you are doing and you can justify breaking the rule.

Your first rule: simplicity. I don’t mean fail to use CSS to style your page and just write one paragraph in plain text with no colors or layout. I do mean don’t clutter your website up with images that don’t complement each other, use 13 different colors, or fill every inch of the page with something. Doing this just makes your page chaos.

Rule two: uniformity. Your website should match the rest of your website, both in the design and the way things are done. If you put together all the pages of your website in a similar fashion, users will learn the website quicker and be able to navigate better. The same goes for each page. If you always use the same style font and color for a header, users will be able to pick that out easier.

Third rule of design: function. Apple actually says function is a part of design, and I agree. If you design a website that isn’t functional, it’s a poor design. You should always think of the end user when you develop and design to ensure that things work like they should and everything is easy to use.

Those are the core of design. Learn them and use them and you will have more success.

PHP doesn’t have a built in proper case string function, though it does have upper and lower case functions. This isn’t too big of a problem though, since we can build one that acts just like we want anyways!

If you just have a short phrase or word that needs to have the very first letter capitalized, we’ve got a nice and easy job. Here’s the code:

$string = strtolower($string);
$string = substr_replace($string, strtoupper(substr($string, 0, 1)), 0, 1);

That might look a bit messy if you don’t like putting things together all at once, so here’s the jist: On the first line we make the whole string lowercase since we don’t know if there were capital letters where they shouldn’t be. The most inner part of the second line (substr) pulls the first character from our string. Moving outwards, the next function makes it uppercase, then finally, we replace the first letter of our string with the new uppercase letter.

Now what if we wanted every word in the phrase capitalized? Simple.

$words = explode(” “, $string);
for ($i=0; $i<count($words); $i++) {
$s = strtolower($words[$i]);
$s = substr_replace($s, strtoupper(substr($s, 0, 1)), 0, 1);
$result .= “$s “;
}
$string = trim($result);

Here we split the phrase up based on each space character and then did the same as we did above, only for each word. Then we built it back together word by word.

UPDATE:  I didn’t realize it, but the ucwords function in PHP will do just this.

ucwords(strtolower($string));

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.