8 replies [Last post]
artofit
artofit's picture
Offline
newbie
Last seen: 6 years 22 weeks ago
Timezone: GMT+1
Joined: 2014-01-13
Posts: 7
Points: 9

Hi,

I wish to know if there is a smarter solution, than the following.

I want all my web page TEXT to have left and right margin or padding but not apply it to the background color.
The following code does the job, but I have to apply it to every div; if I apply to the body it's not the same result.

Thanks.

<STYLE type="text/css">
.recentre { padding-left:2cm; padding-right: 1.5cm; }
.color1 { background-color: LightGreen;}
.color2 { background-color: Red;}
</STYLE>
 
<body>
<div class="recentre color1">
container style 1
</div>
<div class="recentre color2">
container style 2
</div>

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 4 years 28 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

If your referring to text.

If your referring to text. Text should be indicated it is text via semantics via a paragraph tag /

after which. You can specify specifically just the text.

If you want every last piece of text with that padding. You can leave .recentre off and just do

p { padding:0 1.5cm 0 1.5cm; }

If you notice there are 4 integers: 
 
<code>
padding:0 1.5cm 0 1.5cm; 

Is the same as

padding-top:0px; padding-right:1.5cm; padding-bottom:0px; padding-left:1.5cm;

It goes counterclockwise. top right bottom left.

<body>
<STYLE type="text/css">
* { margin:0; padding:0; }
.recentre p { padding:0 1.5cm 0 1.5cm; }
.color1 { background-color: LightGreen;}
.color2 { background-color: Red;}
.color3 { background-color: #666;}
</STYLE>
 
<body>
  <div class="recentre color1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis dui id lacus sollicitudin varius. Mauris fermentum dignissim nunc, non pretium lectus feugiat non. Praesent diam turpis, mattis eu ligula vitae, sagittis laoreet metus. Aliquam erat volutpat. Praesent commodo dapibus neque vel euismod. Phasellus eget sem aliquam, laoreet nunc nec, aliquet lorem. Vestibulum sed sodales purus. Proin tempus nunc vitae venenatis dapibus. Maecenas vitae sem ac odio faucibus bibendum quis nec leo. In hac habitasse platea dictumst</p>
  </div>
  <div class="recentre color2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis dui id lacus sollicitudin varius. Mauris fermentum dignissim nunc, non pretium lectus feugiat non. Praesent diam turpis, mattis eu ligula vitae, sagittis laoreet metus. Aliquam erat volutpat. Praesent commodo dapibus neque vel euismod. Phasellus eget sem aliquam, laoreet nunc nec, aliquet lorem. Vestibulum sed sodales purus. Proin tempus nunc vitae venenatis dapibus. Maecenas vitae sem ac odio faucibus bibendum quis nec leo. In hac habitasse platea dictumst</p>
  </div>
  <div class="recentre color3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis dui id lacus sollicitudin varius. Mauris fermentum dignissim nunc, non pretium lectus feugiat non. Praesent diam turpis, mattis eu ligula vitae, sagittis laoreet metus. Aliquam erat volutpat. Praesent commodo dapibus neque vel euismod. Phasellus eget sem aliquam, laoreet nunc nec, aliquet lorem. Vestibulum sed sodales purus. Proin tempus nunc vitae venenatis dapibus. Maecenas vitae sem ac odio faucibus bibendum quis nec leo. In hac habitasse platea dictumst</p>
  </div>

artofit
artofit's picture
Offline
newbie
Last seen: 6 years 22 weeks ago
Timezone: GMT+1
Joined: 2014-01-13
Posts: 7
Points: 9

* { margin:0; padding:0;

* { margin:0; padding:0; }
Thanks, I didn't know.

Your solution does not work with table, lists, etc.
I want all content text to be padded, but not the background, something which would be:

body{ font-padding-left:2cm; font-padding-right: 1.5cm; }

but this css does not exist.

Another possibility would be, with negative padding, but does not function

<body style="padding-left:2cm; padding-right: 1.5cm; background-color:color1;">
<ul><li>I'm now in the default background color 1</li></ul>
<div style="padding-left:-2cm; padding-right: -1.5cm;background-color:color2">
<table style="width: 100%;">
  <tbody>
    <tr>
	<th>I changed background to color2</th>
	<th>header2</th>
	</tr>
	<tr>
      <td>r2c1</td>
      <td>r2c2</td>
    </tr>
  </tbody>
</table>
</div>
back to default color1
<div style="padding-left:-2cm; padding-right: -1.5cm;background-color:color3">
And here is color 3
</div>

artofit
artofit's picture
Offline
newbie
Last seen: 6 years 22 weeks ago
Timezone: GMT+1
Joined: 2014-01-13
Posts: 7
Points: 9

In the same idea, a 3rd form

In the same idea, a 3rd form would be
body { margin: auto; width: 90; }
and then for the div's to go outside the width, but again that's not possible

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 4 years 28 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

I Don't Follow

I don't understand what your saying or if there is a question there. Do you have more source code? Or could you elaborate?

artofit
artofit's picture
Offline
newbie
Last seen: 6 years 22 weeks ago
Timezone: GMT+1
Joined: 2014-01-13
Posts: 7
Points: 9

OK, the following code does

OK, the following code does the job, but I found an issue to have to create a div each time I want to be in none color text, I'm just looking for a smarter solution.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<style type="text/css">
.color1 { background-color: LightGreen;}
.color2 { background-color: Red;}
.color3 { background-color: #666;}
.recentre {padding:0 1.5cm 0 1.5cm; }
html, body { margin:0; padding:0; }
</style></head>
<body class="color1">
<div class="recentre">
In default color
</div>
<div class="color2 recentre">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis dui id
lectus feugiat non.</p>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
      <td style="vertical-align: top;"><br>
      </td>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
  </tbody>
</table>
<p><br>
</p>
</div>
<div class="recentre">
In default color
</div>
<div class="recentre color3">
    <p>Now in color 3</p>
<ul>
  <li>vmcùvm</li>
  <li>v,cvc<br>
  </li>
</ul>
</div>
<div class="recentre">
In default color
</div>
<div class="recentre color2">
    <p>Maecenas vitae sem ac odio faucibus bibendum quis
nec leo. In hac habitasse platea dictumst</p>
  </div>
 </body></html>

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 4 years 28 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Best Guess

I honestly am not really sure exactly what it is you want to do. This is my best guess. And maybe this will help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<style type="text/css">
.color1 { background-color: LightGreen;}
.color2 { background-color: Red;}
.color3 { background-color: #666;}
.recentre {padding:0 1.5cm 0 1.5cm; }
html, body { margin:0; padding:0; }
.white { color:#FFF; }
.red { color:#F00; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { text-decoration:underline; }
.uppercase { text-transform:uppercase;}
</style></head>
<body class="color1">
<div class="recentre">
In default color
</div>
<div class="color2 recentre">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis dui id
lectus feugiat non.</p>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
      <td style="vertical-align: top;"><br>
      </td>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
  </tbody>
</table>
<p><br>
</p>
</div>
<div class="recentre">
  <p>I am not 100% sure what your asking.</p>
  <p><span class = "bold">Maybe This Will Help:</span></p>
  <p><span class = "white">This Text is White</span></p>
  <p><span class = "white bold">This text is White and Also Bold</span></p>
  <p><span class = "white bold underline">This Text is White, Bold and Underlined</span></p>
  <p><span class = "white bold underline uppercase">This Text is White, Bold and Underlined and uppercase.</span></p>
  <p><span class = "white bold underline uppercase italic">This Text is White, Bold and Underlined, uppercase and italic.</span></p>
  <p><span class = "red">This Text is RED</span></p>
  <p><span class = "red bold">This text is RED and Also Bold</span></p>
  <p><span class = "red bold underline">This Text is RED, Bold and Underlined</span></p>
  <p><span class = "red bold underline uppercase">This Text is RED, Bold and Underlined and uppercase.</span></p>
  <p><span class = "red bold underline uppercase italic">This Text is RED, Bold and Underlined, uppercase and italic.</span></p>
</div>
<div class="recentre color3">
  <p><span class = "white">Now in color 3</span></p>
  <p>I am not 100% sure what your asking.</p>
  <p><span class = "bold">Maybe This Will Help:</span></p>
  <p><span class = "white">This Text is White</span></p>
  <p><span class = "white bold">This text is White and Also Bold</span></p>
  <p><span class = "white bold underline">This Text is White, Bold and Underlined</span></p>
  <p><span class = "white bold underline uppercase">This Text is White, Bold and Underlined and uppercase.</span></p>
  <p><span class = "white bold underline uppercase italic">This Text is White, Bold and Underlined, uppercase and italic.</span></p>
  <p><span class = "red">This Text is RED</span></p>
  <p><span class = "red bold">This text is RED and Also Bold</span></p>
  <p><span class = "red bold underline">This Text is RED, Bold and Underlined</span></p>
  <p><span class = "red bold underline uppercase">This Text is RED, Bold and Underlined and uppercase.</span></p>
  <p><span class = "red bold underline uppercase italic">This Text is RED, Bold and Underlined, uppercase and italic.</span></p>
<ul>
  <li>vmcùvm</li>
  <li>v,cvc<br>
  </li>
</ul>
</div>
<div class="recentre">
In default color
</div>
<div class="recentre color2">
    <p><span class = "white">Maecenas vitae sem ac odio faucibus bibendum quis nec leo. In hac habitasse platea dictumst</span></p>
  </div>
 </body>
 </html>

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 4 years 28 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Reset the Table

I re-set everything and manually ad the styles for the table. All the default margins and padding will make the code more difficult. I would also avoid using a transitional doctype. But that is just me. I use HTML 4.01 strict so the browser does not try and do any thinking for me. As it makes the code more difficult because you have to deal with default paddings and margins that vary among different browser types.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.color1 { background-color: LightGreen;}
.color2 { background-color: Red;}
.color3 { background-color: #666;}
.recentre {padding:0 1.5cm 0 1.5cm; }
* { margin:0; padding:0; }
td { padding:50px; }
</style>
</head>
<body class="color1">
<div class="recentre">
In default color
</div>
<div class="color2 recentre">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis dui id
lectus feugiat non.</p>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;">Text</td>
      <td style="vertical-align: top;">Text</td>
      <td style="vertical-align: top;">Text</td>
    </tr>
  </tbody>
</table>
<p><br>
</p>
</div>
 
 </body>
 </html>

artofit
artofit's picture
Offline
newbie
Last seen: 6 years 22 weeks ago
Timezone: GMT+1
Joined: 2014-01-13
Posts: 7
Points: 9

Thanks, you for your help and

Thanks, you for your help and apologize for having being clearer in my quest.

I stick to "my solution", as it seems there is not a more "elegant" way to achieve what I want.