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

[MASSEY]

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......................... (http://www.electrician-birmingham.com)

Thankyou

[sanjiv]

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]

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]

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]

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

[MASSEY]

I cant work it out :redface:

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

[sanjiv]

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]

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

[MASSEY]

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]

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

Have a look at that.

[MASSEY]

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 :D

[iKreativ]

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

Adjust the width to suit.

[MASSEY]

I will give it a try when I get home,:cool:

[fisicx]

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]

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

thanks for the tip :-)