PDA

View Full Version : Css Padding Help?



flashuni1
Mar 14th, 2008, 01:14 AM
Can somebody please help me pad the left and right sides, so the text is not so crammed?

Here is the code:

I have labeled were the content with padding is suposed to go with a <!-- content goes here -->

<style type="text/css">
.spiffy-green{display:block}
.spiffy-green *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#CDEB8B}
.spiffy-green1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #e9f6cd;
border-right:1px solid #e9f6cd;
background:#d9f0a8}
.spiffy-green2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #fafdf3;
border-right:1px solid #fafdf3;
background:#d6eea1}
.spiffy-green3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #d6eea1;
border-right:1px solid #d6eea1;}
.spiffy-green4{
border-left:1px solid #e9f6cd;
border-right:1px solid #e9f6cd}
.spiffy-green5{
border-left:1px solid #d9f0a8;
border-right:1px solid #d9f0a8}
.spiffy-greenfg{
background:#CDEB8B}
</style>
<div>
<b class="spiffy-green">
<b class="spiffy-green1"><b></b></b>
<b class="spiffy-green2"><b></b></b>
<b class="spiffy-green3"></b>
<b class="spiffy-green4"></b>
<b class="spiffy-green5"></b></b>

<div class="spiffy-greenfg">
<!-- content goes here -->
</div>

<b class="spiffy-green">
<b class="spiffy-green5"></b>
<b class="spiffy-green4"></b>
<b class="spiffy-green3"></b>
<b class="spiffy-green2"><b></b></b>
<b class="spiffy-green1"><b></b></b></b>
</div>

jlhaslip
Mar 14th, 2008, 02:49 AM
div.spiffy-greenfg {
padding: 1em; // whatever
}Try that...

Of course, until you have some 'content' in the div, no padding will show up... :P

effpeetee
Mar 14th, 2008, 10:46 PM
The first 'class' - spiffy-green is not needed. It is covered by the one below with its universl selector.

Frank,


.spiffy-green{
display: block;
}

.spiffy-green *{
display: block;
height: 1px;
overflow: hidden;
font-size: .01em;
background: #CDEB8B;
}

.spiffy-green1{
margin-left: 3px;
margin-right: 3px;
padding-left: 1px;
padding-right: 1px;
border-left: 1px solid #e9f6cd;
border-right: 1px solid #e9f6cd;
background: #d9f0a8;
}

.spiffy-green2{
margin-left: 1px;
margin-right: 1px;
padding-right: 1px;
padding-left: 1px;
border-left: 1px solid #fafdf3;
border-right: 1px solid #fafdf3;
background: #d6eea1;
}

.spiffy-green3{
margin-left: 1px;
margin-right: 1px;
border-left: 1px solid #d6eea1;
border-right: 1px solid #d6eea1;
}

.spiffy-green4{
border-left: 1px solid #e9f6cd;
border-right: 1px solid #e9f6cd;
}

.spiffy-green5{
border-left: 1px solid #d9f0a8;
border-right: 1px solid #d9f0a8;
}

.spiffy-greenfg{
background: #CDEB8B;
}