Blacktower - Graphic Design - Feeling Blue Version

Last month I bought a new PC and after installing every driver and after running photoshop everything seemed working fine. The next day I opened youtube and start watching videos but then I concluded that I had no sounds coming from Flash. However my windows media player was giving sound, so what the hack could it be…

I started searching, I begun with the manufacture site and then slowly begun searching on google. After trying thousands of things like changing register, reinstalling flash/drivers and codecs I still had no sound…

I let a few days come bye but then I needed it for work. So what the hell was I going to do. I opened google and started from scratch, then *BAM* my eyes saw a line between thousands of other lines where I received a very useful tip.

Apparently “Realtek High Definition Audio Coded” cannot play sounds through some applications when you have set your ‘Environment‘ to ‘None‘. I changed this setting to ‘Plain‘ and *BAM* sound was back.

I took a really big *SIGH* and started working.

Howto fix a centered layout with in the body a centered background.
Maybe you are asking yourself what the heck does he mean. But many times when I surf on the web I see more often this problem coming by. The problem with the centered container is when you adjust your browser you see the centered background moving 1 pixel away from your container (most off the time it goes to the left). To be honest I had the same problems in my works, but one day I really started thinking about it and I did some experiments.

The Solution
Without keeping to much “bla bla” I will give the quick solutions and explain more afterwards:

• Add or remove 1 pixel of your background image.
  or
• Add 1 pixel padding-right to your container. (not recommendable)

The Problem
To understand where the problems come from we have to think as the browser. The user can adjust the view board to any size they want. Which can be 1024×768 or 1000×593. Well why is there no problem when you have a left or a right sided website?

Thats because when your center your layout the browser half’s the view board by 2 and constructs your objects on the outcome of that simple math. In the following example we use 1024 as the width of the view board. So 1024 / 2 = 512 and on that position will the layout be constructed.

Now comes the hard part to understand. Because the browser also makes a math of your image and it halfs the width by 2 again. Which means if your background image is 901 pixels it will be 450,5 pixels.

The same rule apply to your container that will be centered. No matter if its an evil table or an angel div. It will be math by 2 and positioned on that outcome. Lets say our container is 780 pixels width which is 390 pixels.

So sofar we have:

• The position off all centered elements: 512 pixel
• Body background image: 450,5 pixels
• Container position: 390 pixels
• View the widths and positions in this example

We got some numbers now, lets show the problem!
Ok, on our view board of 1024 pixels the container will be positioned x-axis on (1024 / 2 =) 512 - 390 = 122. So with this math we know the absolute position where the container would be positioned. That would in this case 122 pixels from the left. The container should end at 122 pixels on the right.

As you may already noticed
Now we go on with the position of our background image. As you may noticed this width had a strange outcome with cutting it by a half. It outcome was 450,5 pixels and as we may know the browser does not understand half pixels. So for the good order: (1024 / 2 =) 512 - 451,5 = 60,5.

The background should properly be positioned from the left on 60 pixels and the image ends on 61 pixels to the right. Some browser acts different and I can’t tell if all browsers act the same.

• View the problem in this example

So to kill the problem you have to be sure that your container and your body background image should have equal value’s that have the same outcome by cutting it down by 2. If both ends with a half pixel or not should not matter, however it should be clean to work with good numbers and with strange ones.

That should do the trick!

After a while I proudly announce my new portfolio! A lot have changed since my old portfolio’s, which was just a mini-site with no navigation. I have decided to go on with Wordpress from now on. Its a simple but great system for keeping a blog, I have tweaked that to my portfolio and adjusted the CSS to this new look!

I still have to work on my new portfolio. Now I get with a RSS sheet my projects from Flickr.com, however now that I got a new system I will slowly move away from Flickr.com. This means new projects will be posted in my blog and not in my portfolio, for now.

Thanks for visiting and don’t be shy to contact me with any questions!
(Splash Screen from my old Portfolio)