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 id="wrapper">
            <div id="header">
                <img src="images/left.png" alt="" />
                <div id="middle">
                    <img src="images/bar.png" alt="" />
                </div>
                <img src="images/right.png" alt="" />
            </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:
<div id="header"></div>

we could do the following:
#header{
    width:960px;
    height:120px;
}
or

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