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

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.

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

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.