Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website CSS: Cascading Style Sheets Style the Basic Elements

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Math behind (padding:0 5%), mobile site definition, sim/difference b/w text-align and margin:0 auto;

Hello!

We give a div wrapper with a max-width:940px a padding of 5%

1) I understand that the width of the div may change depending on the device we are using, but just to get a sense of the math.

a) if the the width is 940px; then 940px * .05 = 47.px Does the browser take 47px and divide it into 2, 47px /2 = 23.5px, so that it can place all the elements inside the wrapper 23.5px left and right away from the edges of the wrapper (left and right, not up and down). Is this what happens when we say: padding: 0 5%;

2) How would we define a mobile site?

3) text-align:center puts an image or a text at the center of its containing element. I wonder if we can apply 'margin: 0 auto' when aligning a text or an image in the element it resides in. for ex: <p><a img="" alt=""/></p> Conversely, I wonder if we can use : text-align:center on a div with #wrapper . Just out of curiosity

4 Answers

Jovanny Elias
Jovanny Elias
16,204 Points

Prior to starting your projects it's always a great to creat a wireframe or sketch of your site. It does not have to be detailed but by having this you know what fixed size you want your page to be as well as your wrapper, header, content divs etc. basically the main sections that will hold your content. By having this you save so much time in having to keep guessing what size your containers should be. A quick example would be the following.

After creating a quick wireframe you know the largest you want your website to display is 1000px. You know you want you header to take up the 1000px and you want to have a 3 column page one on the left for your navigation, middle for main content, right old blog post. After drawing out the layout you give them a fixed width of lets say 250 for the left Column, 500 for middle, and 250 right. Your main wrapper should be 1000px or 100% width with a max width of 1000px. All your columns inside should add up to be 1000px or 100% of the wrapper div.

Now you want to find out the percent for all your columns .(p = percent in this case)

Left and right 1000 x P = 250

And if you remember way back in elementary school I order to find P we divide 250/1000. Which gives us .25 or 25%

Middle 1000 x P = 500

Or

500/1000 = .50 = 50%

So as you can see it is always good practice to know how big you want every section of your page to be. If you did not have a width prior when you start coding your project you would go crazy constantly changing your width trying to get everything to properly fit on the page.

Now when deciding how big objects inside your sections Are the same formula is applied for example take the middle 500px column. If you wanted to add lets say 2 pictures each picture is 200px wide and you want to display them side by side you would do the same 500 x P = 200 = .4 = 40%

Then you can use the remaining 100px or 20% for margins and padding.

You would creat wireframe or sketches for 3 types of devises mobile, tablets and desktops/laptops.

Then using media queries you can adjust the widths and position of al you're elements but that's a whole other topic that will be covered later on the track.

Hope this helps

Jovanny Elias
Jovanny Elias
16,204 Points
Jovanny Elias
Jovanny Elias
16,204 Points

Here are the steps to Convert pixels to percentages:

1)use the formula:

target ÷ context = result

2)Carry the decimal of your result over two places to the right to get your percentage

3)Do not round up your percentages, no matter how ugly or long the decimal is!

You are correct in that the browser will give it a with of 47. If the browser was larger than 940px. But it will not divide it into 2. The short hand for padding: 0 5%; is saying give the top and bottom no padding but the right and left 5% padding on each side left and right it does not divide if into 2.

Jovanny Elias
Jovanny Elias
16,204 Points

As for defining a mobile site you will soon Learn about media queries and how they work. But before you can do that you have to learn the basics. Don't worry too much about that now just focus on learning the basics and it will all make perfect sense later on.

As for aligning a wrapper div with text-align: center; that may not work in the case were the wrapper is the outer wrapper holding all you content. Text-align as far as I know works on inline or inline block elements and not block level elements. It is much better to just go with margin: 0 auto; for the outer wrapper. And another thing to keep in mind is that margin: 0 auto; only works when your div or image have a width specified to them.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Jovanny!

I like your explanation on text-align and margin:0 auto (I think I can commit that to memory for a long time).

I muliplied 940px * .05 to get 47, can you please explain how to use your formula to get the left over width. I dont see how ' target ÷ context = result ' give 47 or (47/2) 23.5

thanks !!!

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

thanks Jovanny!! Got it.

By the way, what are media queries?

Cheers!!!

Jovanny Elias
Jovanny Elias
16,204 Points

in short you use them to style your page based upon screen size. So instead of having your page look the same in every screen size and devise, We can use media queries to check and see how big the screen size of the user is and based on that information that is how everything in your page will be styled. for example when someone views a site on a phone you might have display your page differently than a tablet or a desktop.

You will soon learn this if you are on the front-end developer track or the web design track. There is so much more I can say about them but its best you first learn the basics and when you finally get to them they will be very simple to write and understand.