Breaking down this website

xplod_ldg · 10-12-2006, 05:33 PM

Kinda not a good ideea to start with this site if you like to learn. Here is how it's segmented :

Basically it goes like this :

The header image with the bird has 3 areas left (darkblue) - 81px, center (lightblue) - 602px, right (darkblue) - 99px. So does the background image (exactly with the same dimentions) so the 3 areas continue the ones of the header image basically till the bottom of the page. The content area starts at 110px from the left of the page and has 2 areas : leftcol, rightCol. The leftCol has 257px, plus 13px the padding-left on the <p> tag so 270px. The rightCol has 267px plus the 23px marginleft, so 290px. So the content area has 560px. Calculating from the left of the page the end of the content area is at 110px+560px=670px from the left of the page. Now back to the header image : the left + the center areas sum 81+602px so 683px (from the left of the page), so the content area finishes at exactly 683-670px=13px before the 3 area. So the content area has 13px left and right relative to the center area of the screen (lightblue).

jasonchan · 10-12-2006, 07:42 PM

Thanks xplod_ldg,

I understand some parts of your answer but I am still confused on some aspects. Say that the site was built from the dimensions first (The content area + left col + right col), how do we figure out the image dimensions to correctly tile the image to the background?

Basically I am unclear on how they figured out:
The "3 areas"
left (darkblue) - 81px
center (lightblue) - 602px
right (darkblue) - 99px

...I really think you have already answered this question and I think that I just need re-read what you said several times....

Also, what is the best way to figure out how wide each portion of the image is; is there some kind of pixel width measuring tool in photoshop?

jasonchan · 10-12-2006, 08:09 PM

For some reason this is how i am viewing it (and I know it is wrong):

Dimensions:

<---------------110 px------><---------560 px------------------>

Image:

<------ 81 px-------><------------------602 px----------------------->

And it just doesnt make sense to me.
-i would assume the dark blue area (81px) to be 110 px to correlate to the dimensions because the left margin of 13 px occurs within content area (560x) right?

Like I said, I know im probably seeing it wrong. Please correct me...

xplod_ldg · 10-13-2006, 11:08 AM

The dude made this website as a Photoshop template, meaning that he did an image that contained everything you see except the text. The image had 782px width and lets say 1000px height. So in Photoshop everything was aligned corectly. Then he cut the header image (782px width, 377px height) with the bird, named it sidebar.jpg and after a small portion bellow the bird image (also 782px width, 3px height) and named it background.gif. So basically the background was first applyed to the page(with repeat-y), so the page looked first as 3 areas : left :darkblue, center :lightblue, right:darkblue . After this he put the header image wich actually is over the background but perfectly aligned because both the background.gif and sidebar.jpg have 3 areas : left - 81px darkblue, center - 602px lightblue, right - 99px darkblue. Here is a schetch of the website : http://www.alexdesign.3x.ro/website.gif

Breaking down this website

Comment

Comment

Comment

Comment