• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 283
  • Last Modified:

Creating Modules (Boxes) similiar to Bebo modules with CSS and HTML

I would like to create a box similiar to that on Bebo. Graphic background on footer and heading of the box with text and links in html with content in the box itself. I have general box etc but I don't have enough experiance on getting the content area background to meet flush with the heading and footer etc

Can someone maybe point me in the right area of what to start changing in this code please (I should mention this is in .txt as I'm using PHP but that shouldnt effect styles should it)

HTML (In .txt/PHP)......................................

            <div class="box">
                  <h1>Header</h1>
                  <div class="cbside">
                        <p>Test Box</p>
                  </div>
            </div>

CSS.......................................

.box{
      margin: 15px 0 0 0;
      padding: 5px 0 5px 0;
}

.cbside{
      width:160px;
      margin: 5px 0 0 10px;
      padding: 10px 0 5px 0;
      background: #FFFFFF;
}
0
Ryan Bayne
Asked:
Ryan Bayne
1 Solution
 
Ryan BayneWordPress DeveloperAuthor Commented:
Forgot this part, probably not a good idea to put the background image for the heading in this is it...

h1 {
  font-size: 2.4em;
  font-weight: normal;
  background: #000 url('../images/header1.jpg');
}
0
 
SyntheticsCommented:
Keep a zero margin between the h1 and the cbside div and they should meet up.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now