When I put it together I get a large gap between the top, the middle and the bottom. If I put a border round it, it disappears. It doesn't make sense to me.
Expand|Select|Wrap|Line Numbers
- .main{
- background-color:#ffffff;
- border: 0 solid #ffffff;
- color: #000000;
- background: #ffffff url(bottom image) no-repeat center bottom;
- margin: 0 0 5px;
- padding: 0 0 100px;
- }
- .main div{
- padding: 0;
- margin: 0;
- }
- .main div div{
- background: #ffffff url(middle image) repeat-y center top;
- padding: 0 15px;
- margin: 0;
- }
- .main h3{
- background:#ffffff url(top image) no-repeat center top;
- color: #000000;
- border: 0;
- padding: 35px 15px 0;
- height:38px;
- margin: 0;
- }
Expand|Select|Wrap|Line Numbers
- <div class="main">
- <div>
- <h3>Title</h3>
- <div><p>Content</p></div>
- </div>
- </div>
The only thing that changes is that the top and bottom reamin where they are but the background of the middle section repeats further at the top on bottom to meet the other two sections when I add the border.
This is best example I can give below.
Without border
Expand|Select|Wrap|Line Numbers
- +--------------------------------+
- | Title |
- +--------------------------------+
- +--------------------------------+
- | |
- | Content |
- | |
- +--------------------------------+
- +--------------------------------+
- | |
- +--------------------------------+
With border
Expand|Select|Wrap|Line Numbers
- +--------------------------------+
- | Title |
- +--------------------------------+
- | |
- | |
- | Content |
- | |
- | |
- +--------------------------------+
- | |
- +--------------------------------+
Please help becuase I would pulling my hair our if I had any.