FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Make something go to the left??

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


ncwdavid
Hey, I am after making a design for my site. I got the css all working except one thing. I have a box that is on the left but i want to put space between that and the left border. Here is the css:
Code:

*{
margin:0px;
padding:0px;
}

body{
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
font-size: 11px;
}

#container{
background: #000000;
width: 800px;
height: 600px;
border: 1px solid #000000;
margin-left: auto;
margin-right: auto;
}

#header{
margin-left: auto;
margin-right: auto;
width: 800px;
height: 120px;
border-bottom: 1px solid #000000;
}

#navigation{
width: 800px;
margin-left: auto;
margin-right: auto;
height: 26px;
background: url('http://www.mydomain.com/images/nav_background.jpg');
}
#navigation td{
border-right: 1px solid #a40000;
}
#navigation td img{
border: none;
}

#about{
float: left;
width: 380px;
height: 250px;
background: url('http://www.mydomain.comt/images/about_background.jpg');
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
color: #FFFFFF;
}


How do I make the #about not stick to the left. Just be about 5px off the left? I tried position:absolute; left: 10px but that didnt work. Any ideas? Thanks in advance.
LukeakaDanish
add:

Code:
margin: 0 0 0 5px;
ncwdavid
Thanks for that but I tried padding-left: 5px; but it only made the text go in 5px. Why is that?
Azmo
I guess that you have a content that includes all other elements.. right? and that content have a border.. so just use margin-left:5px; on your div that you want to move.. it should work..
SlowWalkere
ncwdavid wrote:
Thanks for that but I tried padding-left: 5px; but it only made the text go in 5px. Why is that?


That's because padding and margins works differently. It can be a bit confusing at first, and if I get this wrong someone please correct me, but...

Padding increases the space between the border of a box and the text/content inside the box. So, in your case, it will move the text in but not move the box itself.

Margins increases the space between boxes. So, if the box has a margin of 5px on all sides, there will be five pixels between it and any other boxes and the edge of the page.

So if you want the whole box to move 5 px away from the edge of the screen, you would use margin-left, not padding-left.

Good luck,
- Walkere
LukeakaDanish
ncwdavid wrote:
Thanks for that but I tried padding-left: 5px; but it only made the text go in 5px. Why is that?


Hey...not to sounnd cocky or anything...but:

LukeakaDanish wrote:


add:

Code:

margin: 0 0 0 5px;

ncwdavid
LukeakaDanish wrote:
ncwdavid wrote:
Thanks for that but I tried padding-left: 5px; but it only made the text go in 5px. Why is that?


Hey...not to sounnd cocky or anything...but:

LukeakaDanish wrote:


add:

Code:

margin: 0 0 0 5px;



No lol. I tried it and it worked perfectly. But I was just wondering what the difference between margin and padding was. Thanks.
LukeakaDanish
ncwdavid wrote:
No lol. I tried it and it worked perfectly. But I was just wondering what the difference between margin and padding was. Thanks.


Hahaha ok mate Smile
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.