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

Posted on 2007-10-21
Last Modified: 2008-01-09
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">
                  <div class="cbside">
                        <p>Test Box</p>


      margin: 15px 0 0 0;
      padding: 5px 0 5px 0;

      margin: 5px 0 0 10px;
      padding: 10px 0 5px 0;
      background: #FFFFFF;
Question by:Ryan Bayne
    LVL 2

    Author Comment

    by:Ryan Bayne
    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');
    LVL 5

    Accepted Solution

    Keep a zero margin between the h1 and the cbside div and they should meet up.

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Suggested Solutions

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    24 Experts available now in Live!

    Get 1:1 Help Now