1 person found this helpful
Padding adds to the container width or height.
For instance if I declare:
The total width of the container is now 120px. The text lines out at 10 px from the left and the right and these values have been added to the total width of the container.
padding: 10px; /* meaning a padding of 10px on top,rightbotton and left */
The total witdh and height of the container is now 120px * 120px. The text is aligned 10px from the top,right,bottom and left and the container has increased to this size at the top,right,bottom, left. So in total the width and height has become 120px.
Hope this is any help for you,
Yes. That is definately helpful.
What I don't understand is why this page has layout errors on it (http://www.libertywebmarketing.com/test/2.html )
I would expect it to look like 1.html but it doesn't.
And why does 1.html only look "right" with padding? Why are there spaces above and below the "top" and "bottom" Divs depending on the amount of text?
The id portFolioWhite has been placed two times in the html code. An indentifier must be unique to one element on the same page, I thiink that is major part of the problem.
That's interesting. My goal was to have these boxes continue down the page with the first one having the photo on the left, the second one of the right, third on the left, and so on (alternating left, right, left, right, etc.)
Is it simply wrong to use Div tags and repeat them throughout the page? (I could do this with tables in 5 minutes but wanted to use CSS)
Thanks again for all of your help.
1 person found this helpful
Now it´s not wron to use several div´s in one page but it´s wrong to give them the same identity
You can solve this problem with css classes. Multiple tags can share the same class and can even have more classes then one.
Why are there spaces above and below the "top" and "bottom" Divs depending on the amount of text?
Another css mystery is the default margins on such tags as the paragraph tag. They will cause the spaces, above and below, which you are seeing unless you zero them out
margin: 0 0 0 0;
padding: 0 0 0 0;
You can also zero the margin/padding out on the first paragraph or last paragraph using inline css:
<p style="margin: 0; padding: 0;">Some text. Some text</p>
One tip when overcoming the padding issue is to use it sparingly.
For instance padding is only added to the overall width of an element if you set it at a specific width
If you add padding to a paragraph tag within a specific width box it will have no effect. So if I want 20px padding left and right on a box which is set to 400px I dont add it to the box I add it to the paragraph tag inside the box. The box stays at 400px wide but effectively has 20px left right padding.
If I add the padding to the box the box has now become 440px wide, not probably what you want.
Don't know if you have a good manual that describes CSS layout concepts and gives you practical hands-on experience.
My guess is that you don't have a good textbook. You need to works thru a concept of a 1) Layer and Parent/Child Relationship and to know when it is appropriate to use and how a browers interpret it when you for example enlarge the font size, CTRL +.; 2) How 'Div Tag' layout behaves vs. a Layer.
Two textbooks help me a lot:
1. Dreamweaver 8 for Dummies by Janine Warner
2. Dreamweaver 8 The Missing Manual by David Sawyer McFarland
You need both to understand the CSS Layout Technology plus a lot of re-reading and practice. Good Luck
Thank you for the help.There's a lot of valuable info in these answers that I'm going to have to study. I never thought of applying classes to Div tags, but I guess I have to start learning somewhere. I'm not sure how to use the technique, but I'll definately look into it. If I could wake up tomorrow and know what you all know simply by wishing it, I would.
I see that there are many things I have to learn about using CSS and I'd really like to see some real world examples that don't look like typical cheesy CSS designs with columns. If I were going to design this page using HTML, I would probably do something like this: http://www.libertywebmarketing.com/test/3.html
(The last two tables show the table structure and use of a spacer. I know this a seriously antiquated way of doing it, but it's to illustrate what I'm trying to accomplish: Namely, staggered, left/right alternating boxes that will expand properly depending on the amount of copy or the vertical height of the photo in them.)
I have "Dreamweaver 8 The Missing Manual" by David Sawyer McFarland, but I find it really concentrates on "typical CSS designs" that look like Content mangement templates. While I agree it's a valuable book, there's nothing in there I have found that addresses anything like what I'm trying to do. Is the Dummies book better for atypical layouts?
Again, thank you all.
I guess what I'm asking is, "How would YOU design this using CSS?"
With CSS rounded corners, floats and margins:
Wow! That is a great resource.