CSS FREAKIE, CSS BLOG: 3/13/11

NEWSFLASH!

Hi guys,

Hopefully you read some fun and helpful stuff here. This blog is mainly aimed at the novice, mediocre and pretending to be advanced css student. If you have comments, questions or anything don't hesitate to post them. If you are completely new to css, you might want to have a look at a free tutorial of a former student of mine, although it's not a book, it should teach you the basics to give you a head-start in building your very own website.

Any ways enjoy your stay guys,

If it's not here maybe on a new blog somewhere with a decent editor. or if you lads are really generous on a commercial website :)

Cheers!

Cssfreakie

Saturday, March 19, 2011

CSS CHECKLIST 6 points not to forget

Hi everyone,

I thought I leave a little checklist, which you could use when creating websites. Although some stuff might be obvious for some people, I see these things omitted on a daily basis when helping out others with their css and html.
Note though this list is not not limited to the stuff below, but it will definitely save you quite some time. Use the following in order.

Always use a valid doctype! It should be on the first line if you view your source code in the browser.
Place a reset.css above your own style! A reset.css is vital to eliminate browser differences.
Use conditional comments to target versions of IE! (so don't use css hacks)
Don't use inline style! (it's redundant, slower, chaotic and easier to make mistakes)
Don't use tables for anything other than displaying data in an orderly way.
Don't use a clearfix-div if you can use a overflow:hidden;

Hope this will save you a lot of time!
Cheers!

Cssfreakie

Request an Article!

Having difficulties with css or html, and you might think your problem is a generic one...? Request an article in the comments below. If I have some spare time I might make an article on it.

Now Cssfreakie of course needs to eat here and than, so if you found any help here or elsewhere useful buy him some digital cookies by donating to the cssfreakie fund to keep this free service running.

Cheers!

Cssfreakie.

IE is screwing up? or are you?

Hello everyone,

Today I would like to show you a very common cause for browser differences. As we all know IE has a somewhat bad reputation. Now if you would ask someone what is so bad about it, they probably only say it sucks because they haven't got an idea.

One of the most common problems is the coder itself when creating a html page. They are quite often omitting something vital resulting in a question on help fora similar to the following (blaming IE).

Hi all, my page works great in Firefox and Chrome, but as always IE screws up, please help.

What is missing 5 out of 10 is a valid doctype. Although quite some modern browsers like firefox and chrome will forgive you, IE doesn't. And to be honest why would it? If you code badly you should face the consequences.

Now what happens if you omit this oh so vital doctype. It makes any version of IE to interpret you page as if it were IE 5. Isn't that great! :-) This is easy to spot when Firefox and Chrome nicely center the page with: margin:0 auto; But in IE it's not centered at all and starts at the left. This is because IE 5 (and any version of IE without a doctype) needs text-align:center; on the body.

Now IE 5 has loads of bugs, and only a few people are left that know how to work with it, since most clients don't want to spend money to make the website available for IE 5. So if you don't like debugging and reading in to it. Just include a doctype and your done.

Depending on your coding style you need to choose a valid doctype. Now I recommend the strict types.

Typical usage:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    ...
    </head>
    <body>
    ...
    </body>
    </html>

Make sure the doctype is the on first line of the document and has no space at the left.
So that solved 5 out of 10 cases, hope this helped you too!

Wish you happy coding, and as always feel free to leave a comment or a request on an article.

Cssfreakie

Friday, March 18, 2011

How to center a page using css

Hello everyone,

Today i quickly want to show you how to center a div the good way. Quite often I see people use the <center> tag for this. All i can say is don't. IF you want to know why google, it, but i rather cut the crap and show how to center your page the good way instead of saying why <center> is bad.

It's pretty easy really. First of all we need to wrap every content we have a in a container. We use a div for that because that's what div's are for (containing other elements). We give it a nice #id of wrapper so we can target it from our style sheet. Than we give it a fixed width and by using margin we can center it to the page.

Code:

Some things to pay attention to:

margin: 0 auto;
This tells the wrapper div to have a margin of 0 at the top and bottom, and auto tells it to have a margin set automatically for the left and right side, and that causes it to sit in the middle.
Now this only works, if the wrapper div has been given a width other than 100%. As you probably do or do not know div elements span the whole width unless you tell them otherwise or float them. So if you would not have set a width ( it's 100%) margin:0 auto; wont do a thing since there is no margin to the left and right. Try it out!

Overflow:hidden;
This is a little trick that makes the wrapper div shrink wrap around the inner content. This only works if only a width but not a height is set or vice versa. Now some people use a clearfix for this. But that is wrong in this case. More info on that can be found here. I wrote a short article on it.

Hope this was useful for you guys,
And as always if you have questions, comments or requests for an article feel free to post them.
See you next time,

Cssfreakie

Wednesday, March 16, 2011

Fixing the 'clearfix' by using overflow:hidden

Hello everyone,

Today i would like to show you guys a much cleaner way to solve a common problem that is pretty often solved by using a clearfix div.

A dirty way
In a nutshell, when you have a container div (or block element) and you set a width but not a height (or vice versa) no matter what size the inner elements are the container will not shrink wrap around the inner contents. So if you would have set a background color or image, you will not see it since the height is 0. To solve this someone came up with a solution to add an extra div inside the container that has a property of clear:both.
Quite often it's combined with the property display:none;

A sample could look like this:
Code:

<style>

#container{

width:300px;

}

.clearfix{

clear:both;

}

</style>

<div id="child"><p>lalalala</p></div>

</div>

A cleaner way
Now this may seem okay, but it can be done much cleaner without having to add an extra div and class. Assuming we have set a fixed width (but not a height) to div#container just like above all we need to do is give that container a property of overflow:hidden; Making the markup look like below, which needless to say is much cleaner.
Code:

<style>

#container{

width:300px;

overflow:hidden;

}

</style>

<div id="child"><p>lalalala</p></div>

</div>

What it does in fact say is, anything that becomes wider or higher than the set width or height will be hidden. Since we did not set a height it will just shrink wrap around the content and show everything.

Now after you read this, you may think this makes sense and only idiots would use the clearfix version. Well Think again: Quite some big companies use this clearfix.... Why? Probably because of the same reason why IE 5,6,7 and 8 sucked so much and cost us so much time extra when making nice websites. Curious what big companies. Well here you are: http://www.microsoft.com/about/en/us/default.aspx
View their source code and see for yourself.
Moreover, not only are they using the clearfix, but also tables to create the layout. Hopefully you guys already know that tables are meant for other stuff. Despite the promising IE 9, their website is a bad example.

Hopefully you guys found this useful! As always if you have questions, comments or request, feel free to post them.

Cssfreakie

Tuesday, March 15, 2011

Using Firebug for CSS (video)

Hello everybody,

Today I would like to show you how to use firebug to help you out when writing CSS.

This time I made a video since I thought it would be easier to understand ones you see the action happening. In the video you will see that I'm using an image of a layout with measurements that I would like to create by using CSS and the help of firebug

I used a simple style-sheet with some errors in it and a simple mark-up. Now to solve css errors all I need to do is right click -> "inspect element" on an element in the browser and firebug will open up a window.

At the left side of that window you will see the mark up used. And at the right side you will see the style that is applied.

By clicking on an element in that window (left side) you can adjust the css at the right side by just double clicking on the style and adding your own. Notice that by hovering over the elements (left side) it shows blueish squares marking the elements. This gives some visual reference.

Also styles that are overwritten either by inline style or by style declarations further down your style sheet are given a strike through. (if you see that a lot, your code is very likely redundant)

Ones everything looks great just copy paste the style from firebug and insert that into your original style-sheet.

So to sum up the standard procedure: Open up the browser, right click on the element you want to change, and choose "inspect element", Select at the left side of the firebug window the element, and adjust the style at the right side by just double clicking and adding what ever style you want. Copy the style ones you are done and paste it in your style-sheet. (note: the changes will disappear ones you refresh the page)
WATCH IT IN FULL SCREEN

WATCH IT IN FULL SCREEN
I hope you enjoyed the video. In the end using firebug or any program is all about trying it out.

Cheers!

Cssfreakie

P.s. this tutorial assumes you have installed firebug for firefox and are familiar with classes and id's or css in general

Monday, March 14, 2011

Text-align:center; not working? Here is the solution

Hello everyone,

Today I would like to show you guys how to use the text-align property what it's meant for. The reason I would like to show you this is , because there are quite some people out there that refuse to buy a decent book and learn css the proper way. Resulting in a question like the following:

I am trying to center a link but for some reason it won't center when using text-align center.

Now if we would just look at the w3c manual what does it say:

16.2 Alignment: the 'text-align' property

'text-align'

Value:   left | right | center | justify | inherit

Initial:   a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl'

Applies to:   block containers

Inherited:   yes

Percentages:   N/A

Media:   visual

Computed value:   the initial value or as specified

This property describes how inline-level content of a block container is aligned.

So it only applies to block elements and it has effect to it's in-line content. And if we would have paid attention to proper a book, we would have known that an anchor ( <a> ) element is an in-line element, just as a <span> is. But a paragraph for instance is a block element just like a <div> is.

Now if you have no idea what I am talking about, I recommend to have a look at the manual on block elements. An easy way to find out if something is a block element or not is to see whether or not is starts at a new line or pushes other elements to a new line. As you may have read in my article on the monkey book and the Float property. Block elements start at a new line and by using float we can put them on the same line.

Now there is a way to give a inline element the behaviour of a block element. display:block; will do this.
Herunder you will find a code with 4 examples of an anchor tag that is aligned. Hope this is usefull for you guys,
Cheers!

Cssfreakie

P.s. if you have requests on articles, questions in general of anything let me know by leaving a comment.