PDA

View Full Version : Problem with Paddling/Margin/ImageSize



mikacruz
Oct 17th, 2008, 10:54 PM
Kind regards everyone,

A beginners question I think :o
I am not sure whats the best way to settle that neatly. I have 2 boxes defined in css with background image, and there is a Title and links below it. There is a pic here which i hope illustrates the point (http://www.sacred-egypt.com/images/test.gif). I want the black text to be positionned further down by a few pixels and to the right also. But the title comes down with it. I'm not sure whats best to do without messing with the image css size.
<<Here is the html (http://www.sacred-egypt.com/test.html)>> box starts line 116
<<here is the css (http://www.sacred-egypt.com/stylekizza.css)>> box defined at lines 50 and 268 ...

Thanks in advance

itsallkizza
Oct 17th, 2008, 11:06 PM
Increase the height of the header (it will not move the header text don't worry); use it as if it were the box's padding-top. This will move the black text down to a precise point.

To move the black text to the right you can do a couple things:

1) Increase the padding-left/right (both equally) of .homebox_2col .lft and .homebox_2col .rgt

2) Wrap a new div with class name .homebox_content around the contents of .homebox_2col .lft/.rgt (meaning the new div will begin right below the h2 tag). Then assign a padding-left to .homebox_content

Both ways are legitimate.

(If you need examples of the exact changes, let me know.)

mikacruz
Oct 17th, 2008, 11:41 PM
Nice one Thanks! Its starting to make more sense. One more query though. I want to have for example some text under the two boxes, with some space between the boxes and the start of text area. I thought I could use the .postcontent div, in html, line 139:

<div class="postcontent">blablabla
</div>
with css, line 301:
.postcontent

{
padding-top: 30px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
But it doesnt take into account .postcontent. as you can see on the page (http://www.sacred-egypt.com/test.html). and the spacing between <P> is too much.
Basically Im looking for the area which will make most of the content of the site, in that middle container. like on this other page (http://www.sacred-egypt.com/ancient_egypt/tombs/valley_kings.html), and where I'm using a scroll area for content etc.. which uses my old css sheet. Should I make a new div id?

itsallkizza
Oct 18th, 2008, 02:40 AM
just add

clear: both;
to your .postcontent definition

the reason is that .homebox_2col has no height because all the elements it contains are out of the flow of the page (because both .lft and .rgt are floated). clear: both will "clear" the floats and bump your .postcontent down below.

if that doesn't work let me know.

mikacruz
Oct 18th, 2008, 10:07 AM
perfect, thanks for the valuable explanation!