-
1. Re: layoutpositioning without using ap div's
osgood_ Jun 4, 2013 1:50 AM (in response to westwm)westwm wrote:
so i understand to use margins and padding etc to push the designs around on a page to mock up your design, but how do you visualize this and know ahead of time to give a certain divs this much padding, or margins or any of the other style markups?
The way I work is by looking at the final design (which I usually mock up in Fireworks) and break it down visually and mentally into a simple box concept. This does take a bit of getting used to because you need to think and anticipate what will happen to the design if this or that happens or if the user does this or that.
Once I have a clear idea of the box construction in my mind I then start to insert the applicable <divs>, without intially adding any css styling. At a point where I have the main <divs> on the page I then being to apply the css styling. I almost never use padding on the main <div> construction as that is a PITA because of the box-model whereby it gets added to the width of the <div>, you can soon find your mathematics are incorrect which will junk the construction very quickly. Whenever and wherever possible I'll add padding to elements withing the main <divs>. So for a simple example rather that add a 25px left and right padding to a <div> which will hold some text where I need some clear space left and right I'll add it to the paragraph or heading tags which are inserted into the <div>, much cleaner and simpler.
This really is not rocket science, once you grasp the idea it's just a series of simple boxes you are inserting onto the page everything becomes very clear.
westwm wrote:
can someone explain when you use margins vs padding? both of these are ordered by Top Right Bottom Left entries? but what does
"margin: 0 auto" mean??
This means top/bottom padding 0. auto is used to automatically calculate and evenly distrubute the left and right padding of a container, commonly used when horizontally centering a container with a specified width within another container which could be the <body> tag or another <div> etc.
westwm wrote:
what is the difference between
padding and padding-top when you have T R B L entries for normal padding?
padding-top just adds the 'top' padding so this wont work:
padding-top: 10px 3px 7px 8px;
while this will work:
padding: 10px 3px 7px 8px;
westwm wrote:
what is the diff between margin and margin-left??
padding vs padding-bottom??
Margin adds a margin to top, left, bottom, right, whereas margin-left or margin-right just specifically adds a margin left or right.
margin is added outside of the container whilst padding is added inside of the container.
So in an instance where you might want to move a <div> to the right by 50px you would use margin-left: 50px;
In an instance where you want to add 50px between the left border of a <div> and its contents you would add padding-left: 50px; (but as I explained above I almost never apply padding to a main <div> as you then have to recaculate the width of the <div> (if its specified) to account for the padding you have added.
westwm wrote:
what does min-height do?
That sets a minimum height for a container i.e.' the container will never be less than the minimum height set but if it is higher as a result of it's content it will exceed the minimum height to accomodate the content, which is what you want it to do.
westwm wrote:
what is border top:nonw do??
Don't know never come across it before - nonw
-
2. Re: layoutpositioning without using ap div's
MurraySummers Jun 4, 2013 5:05 AM (in response to osgood_)"nonw" is a typo - should be border-top:none!
Here's a good essay on layout - http://www.apptools.com/examples/pagelayout101.php
-
3. Re: layoutpositioning without using ap div's
Mike M Jun 4, 2013 11:49 AM (in response to westwm)Understanding "margin" and "padding" was something that hung me up for about the first year I was doing CSS layouts. A Lynda.com course cleared it up though. Moving from APDivs to pure CSS layouts, it's important to understand how they work.
"margin" is the space between an element and the surrounding elements - a margin of 10px for a DIV will put 10px of space BETWEEN it and anything around it - on the outside of the DIV. A margin setting "0 auto" places 0px at top and bottom and an automatic margin left and right. This is usually used for your outermost or "container" DIV that holds all of your page content - it centers it on the viewport.
"padding" is the space between the outside dimension of the div and anything you place inside the DIV. It's trickier to work with than a margin because very often you have to reduce the width of the DIV by the cumulative padding on the sides. (example: a 900px width div with 20px padding all around will actually be 940px wide in reality due to the padding - so you make it 860px wide and it becomes a net 900px with the padding) Height and padding isn't necessarily an issue unless you're working with fixed height DIVs.
Padding and margin are defined as follows:
padding-top: - defines the space between content and the top "side" of the DIV
padding-right: - defines the space between content and the right "side" of the DIV
padding-bottom: - defines the space between content and the bottom "side" of the DIV
padding-left:- defines the space between content and the left "side" of the DIV
padding: - sets the same padding on ALL sides of the DIV
Consolidated CSS would be:
padding: 10px 20px 15px 20px; - padding of 10px on top, 20px on right, 15px on bottom, and 20px on left (it always goes in the order: top, right, bottom, left) if top & bottom are equal and sides are equal then:
padding: 10px 20px; will declare top/bottom and left/right values in that order
Margin works the same with the exception of the 0 auto declaration, which I've never seen applied as a padding.
Osgood, Murray, please correct me on anything I've mis-stated. I'm going on what I remember from a course four years ago, so I may have some "recall" problems.
-
4. Re: layoutpositioning without using ap div's
MurraySummers Jun 4, 2013 12:21 PM (in response to Mike M)Looks OK to me.
-
5. Re: layoutpositioning without using ap div's
Nancy O. Jun 4, 2013 12:28 PM (in response to westwm)




