padding.................

MASSEY · Apr 11, 2010

Im trying to pad out some text away form a border,

Its the text under the h1 tag im trying to shrink the sentances so they fall just outside the h1 tag,

What code do i need to put in the style sheet

here.........................

Thankyou

sanjiv · Apr 11, 2010

Here you go:
#padding
{
padding: 20px;
}
Change the 20 to what you want.

Put your whole body content in this div: <div id="body"> and </div>

BTW your photos still have the iStockPhoto watermark on them. Doesn't look brilliant.

Hope that helps

Faevilangel · Apr 11, 2010

that's wrong sanj, put this massey

#left-col p {
padding:0 15px;
}

That will add 15px of padding on the left and right, to add to the to do this
It's much better to set the padding to the p tags in a certain div rather than all divs, as it may cause a conflict earlier.

Your div is called left col, so to add a p tag attribute it's #left-col p, this can be used for loads of other things too like h1 tags, forms etc

MASSEY · Apr 11, 2010

Faevilangel said:
that's wrong sanj, put this massey

#left-col p {
padding:0 15px;
}

That will add 15px of padding on the left and right, to add to the to do this
It's much better to set the padding to the p tags in a certain div rather than all divs, as it may cause a conflict earlier.

Your div is called left col, so to add a p tag attribute it's #left-col p, this can be used for loads of other things too like h1 tags, forms etc

Where do i insert that piece of code into the style below, i placed it below the left colum float and it didnt work

Thanks mate

}
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
#nav-menu
{
width:1100spx;
}
#content {
clear:both;
width:960px;
margin:0 auto;
padding:25px 0 0 0;
}
h2, h3, h4, h5, h6 {
margin:0;
text-align: left;
}
#col-left {
width:660px;
float:left;
border-right:2px solid #999;
}
#body-logo {
list-style-type:none;
}
#body-logo li {
float:left;
margin:0 10px 0 0;
}
#col-right {
width:285px;
float:right;
padding:0 0 0 8px;
}
#col-right ul {
list-style-type:none;
margin:0 0 0 -20px;
overflow:auto;
}
p.center {
text-align: center
}
#image {
width:150px;
height:80px;
}
.slideshow {
width:600px;
margin:0px auto;
}
.slideshow img {
width:600px;
height:300px;
}
footer {
width:100%;
clear:bot
}
#col-left ul {
list-style-type:none;
width:550px;
margin:8px auto 15px auto;
}
#col-left li {
float:left;
margin:0 20px 0 0;
}

Faevilangel · Apr 11, 2010

just add it anywhere in the css, you may need to increase the 15px though, so try 30 etc

MASSEY · Apr 11, 2010

I cant work it out :redface:

I think there is another tag stopping the tag you suggested working

sanjiv · Apr 11, 2010

Faevilangel said:
that's wrong sanj, put this massey

#left-col p {
padding:0 15px;
}

That will add 15px of padding on the left and right, to add to the to do this
It's much better to set the padding to the p tags in a certain div rather than all divs, as it may cause a conflict earlier.

Your div is called left col, so to add a p tag attribute it's #left-col p, this can be used for loads of other things too like h1 tags, forms etc

That wasn't added to all divs. Only the ones with id="padding".

}
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
#nav-menu
{
width:1100spx;
}
#content {
clear:both;
width:960px;
margin:0 auto;
padding:25px 0 0 0;
}
h2, h3, h4, h5, h6 {
margin:0;
text-align: left;
}
#col-left {
width:660px;
float:left;
border-right:2px solid #999;
}
#body-logo {
list-style-type:none;
}
#body-logo li {
float:left;
margin:0 10px 0 0;
}
#col-right {
width:285px;
float:right;
padding:0 0 0 8px;
}
#col-right ul {
list-style-type:none;
margin:0 0 0 -20px;
overflow:auto;
}
p.center {
text-align: center
}
#image {
width:150px;
height:80px;
}
.slideshow {
width:600px;
margin:0px auto;
}
.slideshow img {
width:600px;
height:300px;
}
footer {
width:100%;
clear:bot
}
#col-left ul {
list-style-type:none;
width:550px;
margin:8px auto 15px auto;
}
#col-left li {
float:left;
margin:0 20px 0 0;
}
#padding
{
padding: 0 20px;
}

Have you done it now though?

cmcp · Apr 11, 2010

I'd apply the gutters to the containing div, not the contained elements.

MASSEY · Apr 11, 2010

sanjiv said:
That wasn't added to all divs. Only the ones with id="padding".

Have you done it now though?

Nah i been tinkering with other stuff, im still open to solutions

i just need to pad it in so the sentances are shorter its less strain on the eyes for people to read,

sanjiv · Apr 11, 2010

http://www.w3schools.com/css/css_padding.asp

Have a look at that.

MASSEY · Apr 11, 2010

sanjiv said:
http://www.w3schools.com/css/css_padding.asp

Have a look at that.

Yes i think i need to spend some time on that site

Deleted member 69689 · Apr 12, 2010

div#col-left p { width: 400px; float: left; }

Adjust the width to suit.

MASSEY · Apr 12, 2010

I will give it a try when I get home,

fisicx · Apr 12, 2010

Ok Matey Massey,

Padding and margins are always a bit of a pain so here's a useful tip. Set ALL your paddings and margins to zero and put a border round each div, paragraph list etc. Eg:

#nav-menu li {
float: left;
margin: 0;
padding: 0;
border: 1px solid red;
}

This way you can see where each bit fits into the puzzle. Use different colours to see which bit is which.

Top tip for margins and padding. The order is: top right bottom left as in

margin: T R B L; ( margin: 5px 10px 5px 15px; )

Get it wrong and you will be in TRouBLe

MASSEY · Apr 12, 2010

I'll have a crack at it later, I need to put some time in and get it finished,

thanks for the tip

Search

Search

padding.................

MASSEY

sanjiv

Faevilangel

MASSEY

Faevilangel

MASSEY

sanjiv

cmcp

MASSEY

sanjiv

MASSEY

Deleted member 69689

MASSEY

fisicx

MASSEY

Similar threads

Latest Articles