[SOLVED] css: how do i indent text by one or two spaces away from the left side of th

Jason3107 · #1 (**permalink**) Sep 24th, 2007, 07:41

I am using the code shown here: http://webdesign.about.com/od/css/a/aa072406.htm

.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}

Code: Select all

<div class="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
CONTENTS GOES HERE
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>

the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close?

thanks in advance for your help

Monie · #2 (**permalink**) Sep 24th, 2007, 08:03

Attached your full code or file (even better) so we know "visually" what is your problem.

alexgeek · #3 (**permalink**) Sep 24th, 2007, 08:07

Quote:

Originally Posted by monie

Attached your full code or file (even better) so we know "visually" what is your problem.

actually host it if possible
i hate downloading files

Monie · #4 (**permalink**) Sep 24th, 2007, 08:12

Quote:

Originally Posted by alexgeek

actually host it if possible
i hate downloading files

LOL...

Jason3107 · #5 (**permalink**) Sep 24th, 2007, 09:48

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="507BCD">
<style type="text/css">
.container {background:#FF0000; margin:0 5px;}
.rtop, .rbottom{
display:block;
background:#507BCD;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#FF0000;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}
</style>
<table width="100">
  
                <?
                for ($i = 0; $i < 10; $i++) { ?>
                <tr><td>

                <div class="container">
                <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
                <a href="?v=<?=$i;?>" target="_blank"><font color="#FFFFFF" face="Tahoma">description</font></a>
                <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
                </div>

                </td></tr>
                <? } ?>
  
</table>
</body>
</html>

welshstew · #6 (**permalink**) Sep 24th, 2007, 10:58

Hi Jason,

In order to add padding or margin space around elements you need to add the margin:{Top Right Bottom Left ;} or padding:{Top Right Bottom Left ;} proporties to your class attributes.

So, using your code as an example. If I wanted to add 10px margin space to the left and right of the r1 class I would do the following:

Code: Select all

.r1:{margin: 0px 10px 0px 10px;}

There are some great css resources that karinne has outlined here.

Good luck.

Stew

Lchad · #7 (**permalink**) Sep 24th, 2007, 11:02

How about adding left and right padding to the container?

Jason3107 · #8 (**permalink**) Sep 24th, 2007, 11:22

ok i have tried them and sort of see how it works, but still no closer to getting the effect i need,
the text is flush to the side of the container? i have tried to add the margin and padding but these do not move the text in and away from the side , i need a one or two space gap from the edge of the left hand side of the contain, i think thats what it is.

i need it a bit like this

( hello )

at the moment it is like this

(hello )

Lchad · #9 (**permalink**) Sep 24th, 2007, 12:20

You should specify a width on your container div:

Code: Select all

.container {background:#FF0000; margin:0 5px;}
.rtop, .rbottom{
display:block;
background:#507BCD;
width: whatever you need;
padding 0px 3px;
}

That should add spacing.

Monie · #10 (**permalink**) Sep 25th, 2007, 01:37

Quote:

Originally Posted by Jason3107

ok i have tried them and sort of see how it works, but still no closer to getting the effect i need,
the text is flush to the side of the container? i have tried to add the margin and padding but these do not move the text in and away from the side , i need a one or two space gap from the edge of the left hand side of the contain, i think thats what it is.

i need it a bit like this

( hello )

at the moment it is like this

(hello )

It's got nothing to do with your div element!
If you want to do it the "CSS way", do it the "CSS way". Throw away all the <font> element and use <p> or <h1> instead.

Code: Select all

<div class="container">
                <b class="rtop"><b class="r1"></b><b class="r2"></b> <b class="r3"></b><b class="r4"></b></b>
                <a href="#" target="_blank"><h1>description</h1></a>
                <b class="rbottom"><b class="r4"></b><b class="r3"></b> <b class="r2"></b><b class="r1"></b></b>
                </div>

and you need to add this to your CSS

Code: Select all

h1 {
    text-align: center;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    color: black;
    margin: 0 0;
    padding: 0;
}

Monie · #11 (**permalink**) Oct 1st, 2007, 09:27

Did you sort it out jason3107?

Jason3107 · #12 (**permalink**) Oct 1st, 2007, 10:38

just going to test it out now

Monie · #13 (**permalink**) Oct 2nd, 2007, 02:08

I have tested them and it works fine, at least that is my solution.
Maybe there is another solution, for that you have to wait for other member in this forum to give their idea.

Jason3107 · #14 (**permalink**) Oct 2nd, 2007, 10:24

yes sorry i did not reply sooner, that is exactly what i needed,
thanks

welshstew · #15 (**permalink**) Oct 2nd, 2007, 10:52

can you please mark as solved, thanks

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Always displaying to the left	thewebkid	Website Planning	10	Nov 19th, 2007 13:41
[SOLVED] Image with text -> text with background	alexgeek	Web Page Design	5	Nov 13th, 2007 23:25
How to indent	aaronh	Web Page Design	2	May 11th, 2007 14:19
2 columns of text either side of Flash	timmytots	Web Page Design	11	Nov 29th, 2005 01:18
Client-Side VS Server Side Scripting	redev2006	JavaScript Forum	1	Jul 30th, 2005 19:30

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] css: how do i indent text by one or two spaces away from the left side of th