CSS FREAKIE, CSS BLOG: 2011

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

Sunday, June 12, 2011

Mixing Fluid widths with fixed widths

Hi guys,

I just came across a question at the css section of phpfreaks and someone had a bit of trouble to create a header with a fluid middle and 2 fixed width images at each side of that. Besides that the whole header had to be 90% of the window size.

Now before you read any further, try to do this yourself (for fun ;) so again the requirements are:

a header with a width of 90% centred in the middle of the screen
in that header 2 images of 50px each side of an image with a width of 100%

---------> screw that I want to read further :

Now the complication here is that the fluid image is not just a linear gradient which you can repeat-x, besides that by giving it a percentage it will kick off the images. So what to do...?

Lets think about this step by step.
We need some container that is 90% of the browser centred in the middle of the screen.
Well a div is perfect for being a container lets use that and give it an #id of #wrapper.

#wrapper{

width:90%; /* set a nice width */

margin:0 auto; /* center it */

}

To speed things a bit up I directly show all mark up required and I will explain why and how.

<body>

</div>

</div>

</body>

Since I like to make the mark-up as logical as possible. So lets include a wrapper around all the items that are part of the header. This also allows us the easily target them for future purposes.

Next thing is the positioning of the images. As said the outer images have a fixed width and the middle needs to stretch as far as possible. Now what I did is gave all images a property of float, in order for them to directly sit next to each other without any gaps. Also that will cause the div with id #middle to sit on that same line. Exactly what we want.

#header img{

float:left;

}

Next is that odd looking container with the id of #middle. Now this is the most important part of this article. Since the middle images is not just a linear gradient that i can repeat-x but an image that needs to stretch as far as possible but also has to keep some space at the left and right for those fixed images. So I wrapped that image in a div and gave it a margin left and right of 50px. The same width as the images with the fixed width.
And that does the trick. The middle container will stretch as far as needed but keeps the space for the outer images.

#middle{

margin:0 50px;

}

#middle img{

width:100%;

height:50px;

}

Curious how the working example looks like? Have a look here.

And that without weird positioning issues. Nice eh?

Hope you enjoyed the above! See you around!

Cssfreakie

P.s. note in the live example I am using images that are bigger plus I added a min-width to the wrapper.

Monday, April 4, 2011

Classes, ID's and selectors. Rocket Science or Common Sense

Hi everybody,

Today I would like to underline the importance of the very basics of CSS. For some reason people tend to just skim through online tutorials and expect to know what they are doing. Articles (just like this one) are limited to a certain subject and quite often assume certain knowledge. Books (good ones) on the other-hand start at the starting-point and work their way up in a more organized matter. But for some reason people still think a book takes more time while it doesn't. I see this almost every day and I hope that this article can at-least prevent one person from messing up his or her code, even if he or she didn't read a book about css. But first things first.

My definition of css:

CSS is all about targeting elements by using Selectors ID's and Classes, and setting style to those elements.
If you can repeat this line and understand what it says you are already half way.

Pretty much 99 times out of 100, people that excessively use inline style do not seem to get the above definition. Inline style as you could have read in an article I wrote earlier, is way of coding that puts the style inside the element by using a style attribute. Not only is it quite often a redundant and slower way of coding it also ignores the power of an external style sheet. An external style-sheet can contribute to a faster page load, but the real power is in the use of Selectors Id's and classes, by doing so we separate concerns and your team members will love you for it :)

By using these selectors id's or classes we can target very specific to which element(s) we want to set a certain style. Before you do that you need to ask yourself the following question:
Which elements do i want to set style to?

Is it a unique element? if so, use an #id
Is it a group of elements but more specific than all of a certain kind? If so, use a .Class
Is it every element of a certain kind? for instance all div's?if so, use Selector

So in other words,
#id's are unique, and thus can there only be 1 element with that id:

#header{

width:960px;

height:120px;

}

.classes are a group of elements that share something a like for instance you make a class of .error and make the font-color:red;

.error{

color:red;

}

Selectors on the other hand target all elements that have the same tag. for instance all div's

div{

padding:5px;

}

Something that might be good to know that might seem to be weird at first:
if we target a div with an #id of #header like:

we could do the following:

#header{

width:960px;

height:120px;

}

div#header{

width:960px;

height:120px;

}

But if we would have done this:

#header div{

width:960px;

height:120px;

}

It doesn't target the div with the id for header, but the div inside of the div with the id of header.
In that case the mark up should have looked like this:
<div id="header">

<div>this this is now targeted</div>

</div>
Pay attention to this, because this is done wrong a lot!

Now to get back to the title, do you know more people with your passport (aka #id)?...... No, you don't! It makes sense doesn't it, you are unique! :)

Hope the above helps you guys,
as always if you have questions leave them in the comments.

Happy coding!

Cssfreakie

Sunday, March 20, 2011

Images.... Some things to pay attention to!

A picture tells more than a thousand words! So does bandwidth!

Hi everyone,

Today I would like to share some things to pay attention to when working with images on your website.

Size does matter!
Well that maybe be true but that doesn't make up for the extra bandwidth you are using if your not showing it. What I mean with this, is that people pretty often adjust the size of the image in the browser instead of adjusting it in advance in a photo editor. This causes extra wasted bandwidth, and besides that the results are often ugly rendered photo's. So if you need an image of 150x75 pixels, re-size it before you upload it.
If your not familiar with image editing software, maybe try out an online tool like: picresize

Optimize the images you use!
Now you might think your images are ready after your re-sized them, but your not if you're greedy for more speed, and less bandwidth. There is a great tool that is able to optimize your images without loosing any visual quality. It's called smush.it! Try it out and see that quite often it easily reduces your file size with 10 percent or more.

Combine your images!
Do you have a lot of static images, like buttons, headers, separators, symbols, logo's and alike? Combine them by using a sprite. Using sprites is a great way to minimize the amount of header request which could really slow down your website. Some examples of sprites can be found here.

Don't forget the alt="" tag!

<img src="../folder/for/images/monkeys.jpg" alt="monkey eating a banana"/>

Although you don't need to put any text in it, it can be very useful for SEO purposes.

Don't forget the space after the background url!
Now this sound pretty cryptic, but what I mean is that when you are setting a background image in css you need to add a space after the url() If you don't this, it could cause some browsers to screw up, by not showing your background image and those errors are very hard to find because most editors will not notice it, and it is not considered invalid.

So instead of this:
#element{

background: #fff url(../images/image.jpg)no-repeat top left;

}

it should look like this:

#element{

background: #fff url(../images/image.jpg) no-repeat top left;

}

Notice the space between the ) and no-repeat.

Hope these things will help you guys out when working with images in your design.
Wish you happy coding and as always, feel free to leave a comment.

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.

Wednesday, March 9, 2011

Making the horizontal menu vertical!

Hi all,

Today I'll show you how to make the horizontal menu we made earlier vertical.
If you didn't read my article on "How to make a horizontal menu" I recommend you do that first because I am going to cut through all the crap here since we need only a few adjustments in the original code.

So hopefully after this short article you can go from this:

To this:

Okay lets do it!
The first thing we need to do is change the id's of the div and the ul otherwise we might accidentally target the horizontal menu if you would use it on the same page.(like here) So from this:<div id="menu"> <ul id="hornav"> To this:<div id="vertmenu"> <ul id="vertnav">

Styling the div
Since it's only used to make a nice contrasting background behind the menu we only need to adjust the width and height (in real life you probably don't want to set the margin like below) Code:

div#vertmenu{

width:300px; /* adjusted the width */

height:300px; /*adjusted the height to fit all elements */

}

Styling the ul
We are going to use the same trick with the border as we did with the horizontal menu. We need to close the top and the left side of the menu. Code:

ul#vertnav{ border-left:1px solid #fff; border-top:1px solid #fff; /* added this to close the top gap */ }

Styling the li Now this is the most important part! This is were we magically switch from a horizontal menu to a vertical menu. By removing display:inline; from the code the list is shown the normal way. Code:

#vertnav li{ /* display:inline; commented this line since we want a vertical menu */ }

Styling the a elements
As you might have noticed we added display:block to the <a> elements in the horizontal menu. this allows us to set a width and a height to it. We only need a width and remove the top border since we use it from <ul>.So here goes: Code:

#vertnav a{ width: 200px; /* adjusted the width */ }

And That's it, you know have a nice styled vertical menu with hover effect! Hopefully the above was fun helpful, and easy. Easy it should be as a follow up of the article on the horizontal menu. Wish you happy coding, and leave a comment if this was helpfull or if you have requests!

Cssfreakie

P.s. Blogspot, stop facking up my code ! sorry guys blogspot is adding and removing breaks

Making a Horizontal menu

Hi all,

Today I would like to show you guys a very clean way to make a 1 level horizontal menu. Now before we start of I assume that you guys worked with the property 'float' before. If you didn't I recommend you read up on it. A nice way of doing that is reading my post on the photo book layout. Or in the future read my still to write article on float. When you read the stuff below and apply styles in the same order and refresh every-time you applied a style you will learn the most of it.

This is how it will look

Now lets make it.

First of all we need some html mark up. We will use an unordered list for this. Now you might think but aren't those displayed vertical? Yes they are, that why i use it, after you read this tutorial you can make not only a horizontal but also a vertical menu if you pay attention. :)

Code:

<div id="menu">
            <ul id="hornav">
                <li><a href=""><span>One</span></a></li>
                <li><a href=""><span>Two</span></a></li>
                <li><a href=""><span>Three</span></a></li>
                <li><a href=""><span>Four</span></a></li>
                <li><a href=""><span>Five</span></a></li>
            </ul>
        </div>

Now you may ask yourself why on earth is he putting those extra span elements inside the anchor tags? Well I do that because quite some cool looking menu use an advanced technique named "sliding doors". This technique uses 2 images (or a 1 well targeted sprite) as a background. 1 for the anchor and 1 for the span element. Because they slide over each other, it allows for instance nice round corners in all browsers or other fancy looking stuff.

So we have a nice list with links and spans. Notice also I wrapped it in a <div> and I gave both the <div> and the <ul> an #id. This is of course to target them (that's what css is all about). Now lets style them.

Styling the <div>
Lets start of with the <div> this div is of no real importance for the menu but it gives a good contrast for it and since we wrap it around the menu its a nice practise to give the #id the name of #menu.

Code:

div#menu{
    width:500px;
    height: 200px;
    margin:0 auto;
    background:#80b3ff;
}

Now what happens here. We give this div a width a height, a nice blue background, and we centre it by using margin: 0 auto;
This will try to set the top and bottom margin to 0 and the left and right margin to auto. which centres it. Note IE 5 ("what's IE 5 dad?") needs text-align:center; for this.

Styling the <ul>
The <ul> is in fact the container of the menu, an we are going to give it some styling which seems odd at the start but if you follow along closely it will make sense. I added comments in the css.

ul#hornav{
    float:left; /* to let other elements sit next to it instead of pushing them off */
    border-left:1px solid #fff; /* set a border left a-elements will do the rest */
    overflow:hidden; /* if no width or height is given it will shrinkwrap to
                     heigth or with of inner elements */
    list-style: none; /* removes bullets */
    padding:0; /* if you would have used a reset.css this is done already */
    margin:5px;
}

We use float left, because it could very well be that we like to add more block elements on that same line for instance a search box or something.
We use a border of 1 pixels only at the left side. We do this because as you will see the anchor elements will have a border top right and bottom. this way the menu can grow as width as we want without extra headaches.
We us overflow:hidden; Now this is a little trick, which can only be understood when you play with it (give it a contrasting background if you do). As you see we did not specify a width or a height to the <ul>. Why not? well if this menu is created dynamically we can not know the width. (we can with javascript but why should we if we don't have to). By using oveflow:hidden it will shrink wrap to the width and height of the inner elements (<li> <a> <span>). (a nifty trick!)
We use list-style:none; otherwise we would see the default bullets.
We set padding to 0, otherwise the <ul> would have it's normal padding.
We set margin to 5px. I normally would set this to 0 too, but I want it to give some space, if you look at the menu above that tine space top and right those are those 5 pixels. Now if you read my article on the box model you know why I used margin and not padding.

Styling the <li>

This part is crucial for horizontal menu, so pay attention :)

Code:

#hornav li{
display:inline; /* make it a horizontal list */
}

Yep that's it, by displaying it in-line it becomes a horizontal list. :)

Styling the <a> (normal state)

Styling this is all about taste, and remembering we applied a left border on the <ul>

Code:

#hornav a{
    color:#04a; /*give the links some color */
    display:block; /*give them body */
    float:left; /* bloack elements start at new lines,
                by using float we undo this but keep the body */
    text-decoration: none; /* remove line under link*/
    font-size: 15px;
    padding: 15px;
    border:1px solid #fff;
    border-left:none; /* ul already has a border left */

}

After we set a nice contrasting colour we set it to display:block; this will give it some body and even allows to set a width if we wanted to.
Since it will now behave as a block element, it will start at a new line if we don't do anything about it. Here comes float:left; to the rescue, as you now know float allows to let multiple block elements on the same line. So that's what we do.
We use text-decoration:none; to remove the default ugly little underline from the <a>
Next the font-size 15px and some padding of 15 now if you read my article on the box model you now know what height it has. indeed 45px. 15 + padding top and bottom.
Now here comes the border trick I told about at the "styling the <ul>" part. We give it a border of 1 pixels and directly after it we say no border to the left. So what happens is that the button now in fact looks like this:

sample

So all those <a> elements just connect nicely to each other like lego bricks and the border from the ul closes the gap at the left.

Styling the <a> (hover state)

Styling the hover state is easy if you are familiar with the hover class.

Code:

#hornav a:hover{

background:#fff; /* just a nice contrasting background */

color:#80b3ff; /* a nice complementing text color */

}

The :hover on the a element allows for special styling ones your mouse is over the element. You can apply :hover on anything you like. So if you want a mouse-over effect with just css and no javascript you can do it! There is only one problem, IE 7 and lower don't like this pseudo hover class. it only allows :hover on <a> elements. But there are some great javascript fixes for that.

Ones you did all the above you should have a great looking menu that's is portable, ready for the more advanced sliding doors technique and even has a mouse-over effect without using javascript.

Hope you enjoyed this! wish you happy coding and as allows leave a comment if you found this useful or have requests.

cssfreakie

Tuesday, March 8, 2011

Creating a Media-Box

Hi everyone,

I thought I share the following with you because quite often people try to make a box with a picture in it and some extra text to the right but do it wrong. I call this box a mediabox. This is done by all big websites like facebook, amazon google, and pretty much any website that aims at people that read from left to right do.

For some reason people keep using tables for this kind of job, which brings in extra complexity and mark-up code while it can be done in a much easier and cleaner way.

Now if you would have read my article on monkey book which I still recommend you do, you would probably know how to do this without using tables. In fact the mark up is pretty much the same except for the extra float on the image.

General mark-up:
Code:

<strong>This is a title</strong>

<p>this is some text, lalalala lalalala lalalala lalalalala lalalala</p>

</div>

We used a class of media-box, since it's pretty likely that we are going to use the style for that div and it's inner elements more than ones. For instance if we have a catalogue with products.

Just some thing we should arrange for this div. we need to let it float left, so we can show more or less of these boxes depending on the window size or wrapping container. maybe a nice background color and maybe even some padding so the contents have some air. We could set a fixed height and width.

We also need to set the image to float: left; so the shows up nicely at the right side of it. And we should apply some margin to the right of the image to keeps some space between the text and the image.

The style could look like this:
Code:

div.media-box{

float:left;

margin-right:10px;

overflow: hidden;

background:#0055BB;

padding:3px;

border:1px solid #fff;

color:#fff;

}

.media-box img{

float:left;

margin-right:5px;

}

An example can be found here here
And the complete script I used here. (note though: use an external style sheet on a live site! this is why)

Rests me to wish you happy coding! Leave a comment if you found it useful, have questions or have requests.

Cssfreakie

Eliminate Browser differences with a reset.css

Hi everybody,

In this article I want to show what I do after I included a reset.css.

But for those of you who didn't read my article on the css box model. Hereunder a short introduction on the reset.css. As you may or may not know, all browsers are different. Not only by name but also in the way they apply default css box properties. For example. It could very well be that firefox gives a p-element a margin-bottom of 5px while IE might give it 6px. This is extremely frustration if you are unaware of this and try to make a nice cross browser website that looks pretty much the same in every browser.

A very easy way to solve this, is to reset all properties and start with a clean slate. The best way of doing this is to use a reset.css. This will literally reset everything so you might want to adjust it in time to your needs. For instance a p-element ( <p>some text</p> ) will no longer have a margin at the top and the bottom. So you need to set those yourself. Same is for h1, h2, h3 elements. This sounds like a lot of work but it's nothing compared to time you will waste on debugging for cross-browser compatibility without a reset.css. The best reset.css I worked with is: meyer's reset.css

Now because of the cascading effect you need to put that reset.css above the other style sheet. That way you first reset all properties and than apply your own style instead of the other way around. which hopefully makes sense.

<link href="http://yourdomain.com/reset.css" rel="stylesheet" type="text/css">

<link href="http://yourdomain.com/styles.css"  rel="stylesheet" type="text/css">

I got the reset.css, but now what?
Well now you will probably think "what the hack just happened....this will take years to style"
No worries there are some great tools to help you out. One I use pretty often is this one. It's a html elements test page. Just insert it to your website and you are ready to style all elements in an organised way.

Hopefully the above was useful to you, if so leave a comment.

Cssfreakie

Don't use inline style

Hi everybody,

This is just a very short article, to convince you not to use in-line style, but use an external style sheet instead.

As you may or may not know css can be applied by using:

an external stylesheet:

style tags

#myelement{

color:#f4a;

}

</style>

inline style

4 Reasons why you should use an external style sheet!

A good practice in coding is to separate style from content. One reason why this is a good practice, is because ones we separate stuff that does something different, it will be easier to isolate problems and maintain it in the long run. Certainly when you work in teams.
Inline style is redundant. Ever seen a tabular design where the coder uses valign:top; on the table cells (<td>). While most use tables for no good reason at all, they often also use in line style. So in case they have a table with 10 rows and 3 columns, by using in line style they would have to set valign:top; 30 times. While it could be done with 1 single line in an external style sheet.
Prevent chaos. inline styles are quite often the cause of pages breaking or codes not functioning as intended because of the extra semicolons ; too many " or ' or : characters.
An external stylesheet is faster. Now this may sound weird, but if you would use either in-line style or styles by using the style tags, the page will load slower, than it would when using an external style sheet. For more details have a look here.

Hopefully, you make the above a best practice. it will save you time, keep things organized and even speeds up your website.

Rest me to wish you happy coding, and again, don't hesitate to leave a comment if it was useful, or if you want to request something.

Cssfreakie

The Css Boxmodel (simple explanation)

Hi everybody,

I thought it would be good to write a short article on the css boxmodel and share it with you, since it's pretty much vital to layout your content. If you would google for images and use boxmodel as query, you will see thousands of images that pretty much look like the one below.

But the image above won't help a lot if you have no idea what you can do with it. Since most articles assume that the above is clear enough I thought I do tell what it is used for, since assumption is the mother of all fuck ups

Simple said: any element (content) has a padding, a border and a margin.

Padding is used to give some extra space with a background around the content. This property is ideal for a div-element with elements inside. By using padding the elements inside will have some air between itself and the edge of the background.
Border is used to mark the end of the padding with a line-style. So if you would have a no padding (padding:0;) the border is directly put around the content.
Margin is used to give the some transparent space (without a background) around the content. So that's with the padding and margin included.

So lets apply that to a real-life example:

Here you see an image of a monkey with the following properties:

padding: 5px; this allows us to give a nice background(image) behind it ( background: #37abc8; )

border: 2px solid red
a red border around the padding

margin:5px;
some transparent space around it.

Things to pay attention to:

Dimensions: In case this image is 200x200 pixels. By applying a padding of 5px a border of 2 pixels and a margin of again 5pixels around the image, the object becomes larger than the original 200x200 pixels. To be precise it becomes 224x224 pixels. This is because we applied a padding a border and margin at the: top-, right-, bottom-, and left-side of the image.
Browser differences: All browsers are different. Not only by name but also in applying the default css box properties. For example. It could very well be that firefox gives a p-element a margin-bottom of 5px while IE might give it 6px. This is extremely frustration if you are unaware of this and try to make a nice cross browser website that looks pretty much the same. A very easy way to solve this, is to reset all properties and start with a clean slate. The best way of doing this is use a reset.css. This will literally reset everything so you might want to adjust it in time to your needs. For instance a p-element ( <p>some text</p> ) will no longer have a margin at the top and the bottom. So you need to set those yourself. Same is for h1, h2, h3 elements. This sounds like a lot of work but it's nothing compared to time you will waste on debugging for cross-browser compatibility. The best reset.css I work with is: meyer's reset.css

Hopefully the above was any useful.
Rests me to wish you happy coding, and don't hesitate to leave a comment or request something.

Cssfreakie

edit: in addition to the above you might want to read my article on the reset.css and what to do afterwards here.

Monday, March 7, 2011

HTML elements and endtags

Hello everybody,

I thought I post the code below after I saw that someone posted a pretty weird code on a forum asking what was wrong with it. The poster is clearly unaware of the concept of the end-tag. Depending on your doctype all* HTML elements require an end-tag (*xhtml). The code that was posted looks like this:

Code:

    <div class="footer">
      <div class="footertxt">
        <div class="footerme"> <>
        <div class="footerright"><>
        <div class="footerimgmail"><>
        <div class="footercopyleft"><>
        <div class="footercopyright">
          <div class=" "><>
        <>
      <> <!-- closes footertext -->
    <> <!-- closes footer -->

this code is pretty much invalid. A good editor would have told this directly. (netbeans does a great job at this)

now back to the code:

the poster did this : <> but that doesn't mean anything really.

Since all* elements in html require an end-tag we should do the following
for a div-element

the start-tag is <div>
the end-tag is </div>

and for a p-element

the start-tag is <p>
the end-tag is </p>

See the / in the end-tag? all end-tags have that.

So in this situation the poster was using a div in a div (nested elements)
so it should look like this:

Code:

<div id="outer-div">
     <div id="inner-div"></div>
</div>

By using clear indentation we can easily see which start-tag is the "partner" of which end-tag. Any-time an element is a nested child, you make an extra indentation. So the code should have looked like this:

Code:

<div class="footer">
      <div class="footertxt">
              <div class="footerme"> </div>
              <div class="footerright"></div>
              <div class="footerimgmail"></div>
              <div class="footercopyleft"></div>
              <div class="footercopyright">
                    <div class=" "></div>
              </div><!-- closes footercopyright -->

      </div> <!-- closes footertext -->
</div> <!-- closes footer -->

Happy coding! Feel free to leave a comment if you have questions or requests

Cssfreakie

making a photobook layout with float

Hello everybody,

Today I would like to show you how make a very simple photo book layout named "monkey book" by using the power of float. It won't be extremly advanced, but trust me it doesn't have to be either.

For quite some people the float property is hard to understand at first. Hopefully though after you read this brief article you know what it could do for you.

In a nutshell float allows you to put block elements on the same line. While the normal behaviour of a block element is to start at a new line. Now why would we need float in case we need images on the same line. Aren't those images in-line elements? Exactly! But what if we want to put a little caption underneath it with the name?

In those cases it's nice to have the power of float in combination with a wrapper around both the image and the caption.

A simple mark-up could look like this.

Code:

<div class="image-holder">
     <img src="http://i55.tinypic.com/2d962ww.png" alt="" />
     <p>this monkey nr 1<br />this is line 2</p>
</div>

This little snippet doesn't look promising but it's in fact how the structure for the image holder looks like, a div with a class of image-wrapper (a class because we are going to use it more than ones). And inside an image a paragraph and a break (strict style
instead but that depends on your doctype)

Since we wrapped up the image and caption in one nice div we can easily target it and set properties for it. So lets do that!

Code:

.image-holder{
  float:left; /* all images should float left */
  margin:5px; /* some space around the div to give it some air */
  text-align: center; /* to center all content of the div */
  background:#0055BB; /* fancy background for the div */
  padding:3px; /*some padding to make the background reach 
               further than the width of the image */
  color:#fff; /* a nice contrasting color */
  }

So that is a the style! now how would it look with much more photo's
well have a look here: http://cssfreakie.webege.com/monkeybook.php
If you resize your window you can see what happens to the floated elements

Now I cheated a bit by using a php script to generate the images instead of putting in 80 images by hand.

The final script can be found here: But watch out! For production purposes use an external style sheet. It's always better to separate style from content.

happy coding and leave a comment if this was helpful or if you have questions or requests.

Cssfreakie

Thursday, March 3, 2011

Setting up your local testing environment

I am by far an expert on setting up a server, but than again I do not dream of being a hosting provider. Though for some of you the following might be nice to consider doing.Setting up a local server is easy, efficient and cheap, in fact it's free.

Running a local test environment allows you to created and debug code at a faster pace than you would by uploading all the time. Besides that it's also much more secure since the test settings are aimed at reporting all errors, while on a live site you want to suppress those errors and store them in a separate file instead of outputting them in the browser.

You can perfectly use other stuff, but what I use works as a charm so why wouldn't you use it?

Download and install wamp
Wamp is a great if you have no idea how to set up a server but you really want one and you don't want to pay a penny. Wamp will automatically install Apache, mysql and php on your system. It comes with some extra stuff like phpmyadmin which is a great interface for a database development. It also has a great debugger (nice for php)

Download and install Netbeans
Netbeans is also free, and it's by far the best text editor I have every worked with. I use the php version of it. The nice thing is that it will give tips and hints while typing, and it's pretty easy to set up the testing environment.

Ones you made a project all you need to do is go to project properties and make sure you have something similar as the following:

make sure you copy the files to your wamp folder and put short tags off. (short tags are bad!) Next: go to the tab Run Configuration and look if your settings look like below:

If it all looks good you are ready to go.
Just press <shift>+<F6> (short-cut for tab Run) when editing a file and your browser should start and show what you are doing.

Something to remember though this won't work if you didn't start up your server. And sometimes you might want to use 'Scan for external changes' (under tab Source) in case you added a new version of an image.
You could as well right click the folder and choose refresh.

Happy coding!

Cssfreakie

Tables: a persistent 20th century plague

Although it's the year 2011 some people are still using <tables> for purposes other than displaying data in an ordered way such as a spreadsheet with multiple columns. I have a feeling this is caused by some infected tutorials which seems to be still out there and maybe even by some ancient books ("what are books daddy?...Dead trees son").

Build a template with <div>'s
Not only is the mark-up much easier to read when using <div>'s but it also separates content (which tables are) from your template. But <div>'s are not always suitable to make a nice form or a multi column address box, without causing divitis (a practise to use more div's than needed). You might agree with that, but that doesn't mean we have to use the extra complexity and unreadability of a tabular design.

Use good styled lists for forms.
A good styled <dd> or <ul>- list is perfect and less chaotic than a form made with tables.
Although this might require you to do some floating, in the end the mark-up will be much easier to read and you need less code also. Check out for instance the nicely made forms from woofoo.

Use tables for data
Now this may sound stupid but if you are going to use tables, use them what they intended for. A nice article on nice tabular design can be found here.

Don't forget to leave a comment :)

cssfreakie

Edit: soon i'll post an article how to use something other than tables for something simple as a media-box (a rectangle with an image and some text) because it seems people also use tables for that.

CSSFREAKIE TO THE RESCUE

Hello everyone,

After quite a while I thought I make my own blog to help out people in there quest in writing better css. Although there are quite some blogs out there It can't harm to share experience in a more distilled way. This blog is aimed at beginners till mediocre experienced writers of strict (x)html and css.

If you have requests or questions feel free to leave them in the comments and i will have a look at them when i have some spare time.

happy coding!

cssfreakie

P.s. if you have tips or advice on my language or grammar let me know, English is not my mother language

NEWSFLASH!

Sunday, June 12, 2011

Mixing Fluid widths with fixed widths

Monday, April 4, 2011

Classes, ID's and selectors. Rocket Science or Common Sense

Sunday, March 20, 2011

Images.... Some things to pay attention to!

Saturday, March 19, 2011

CSS CHECKLIST 6 points not to forget

Request an Article!

IE is screwing up? or are you?

Friday, March 18, 2011

How to center a page using css

Wednesday, March 16, 2011

Fixing the 'clearfix' by using overflow:hidden

Tuesday, March 15, 2011

Using Firebug for CSS (video)

Monday, March 14, 2011

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

16.2 Alignment: the 'text-align' property

Wednesday, March 9, 2011

Making the horizontal menu vertical!

Making a Horizontal menu

Tuesday, March 8, 2011

Creating a Media-Box

Eliminate Browser differences with a reset.css

Don't use inline style

The Css Boxmodel (simple explanation)

Monday, March 7, 2011

HTML elements and endtags

making a photobook layout with float

Thursday, March 3, 2011

Setting up your local testing environment

Tables: a persistent 20th century plague

CSSFREAKIE TO THE RESCUE

Popular Posts

Total Pageviews (since march)

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