simple code for a content holder

**jdurand3** · Nov 24, 2007, 06:59

I would appreciate it if someone could help me with the code for a content
holder or contentbox to place content such as a newsletter signup box.

I also want the box to have a background image or alternatively it could have
a left and right border as well as a header & footer image. The content should fit within. Please see this page
http://how-to-manifest-your-desires.com/default.html for a idea of what I'm
talking about.

thanks,
jimo

**Paul O'B** · Nov 24, 2007, 07:51

Hi Jimo,

I'm a little confused as to what you are asking here

Are you asking for help with this site or was that an example of what you wanted (though I doubt it) or is there some specific area that you want help with?

That page has 200 errors and you are unlikely to get a good response to your question unless you try cleaning it up a bit also.

You will also need to be more specific in which area you want help otherwise someone has to fix the whole site which could take ages with all those errors in there.

The page is completely broken in Firefox (so much for table sites rendering the same cross browser) and IE looks strange also but not quite so bad.

I couldn't really tell what effect you were trying to achieve as the page just seems like a muddle. If you can identify which area you want help and explain why that page is such a mess at present, it would help us to point you in the right direction

.

**Centauri** · Nov 24, 2007, 07:55

You beat me on this one Paul

I also cannot understand how the site linked gives any example of what is wanted. That site needs to be started from scratch, and is no real improvement over the currently used site. First point to address is getting rid of the TABLES!

**jdurand3** · Nov 24, 2007, 08:31

Originally Posted by Centauri

You beat me on this one Paul

I also cannot understand how the site linked gives any example of what is wanted. That site needs to be started from scratch, and is no real improvement over the currently used site. First point to address is getting rid of the TABLES!

Hey guys,

Sorry I wasn't very clear.

Don't worry too much about the code on the page, because I will not be using that page.

This is the page that I'll be using.
http://www.how-to-manifest-your-desi.../css-test.html

I just wanted you guys to see how the content boxes on that page looked (visually) to give you an idea of what I'm looking for. I would like to stack the content boxes on top of each other on either side of the text.

Regards,
jimo

**Paul O'B** · Nov 24, 2007, 08:39

Hi,

Are you talking about the box on the left and right that have a rounded top that says "Web Menu" and then have a border around them?

**Paul O'B** · Nov 24, 2007, 09:08

Something like this.

http://www.pmob.co.uk/temp/round-content-box.htm

View source to see the code and then ask questions later

**Paul O'B** · Nov 24, 2007, 10:24

Hi,

Here's your code tidied up and the content boxes inserted. You will need to grab the images from my site or make your own.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
 
body {
    text-align: center;
    background: url(http://www.how-to-manifest-your-desires.com/images/bak.jpg);
  font-family: Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
    color: #000;
    font-size: small;
    margin:0;padding:0;
}
a:link {color: #003346; text-decoration: underline; }
a:visited {color: #1C4A96; text-decoration: none; }
a:hover {color: #003346; text-decoration: underline; }
a:active {color: #1C4A96; text-decoration: underline; }

#header {
    background:red url("http://www.how-to-manifest-your-desires.com/images/header.jpg");
    width:840px;
    height:180px;
}
#content {
    background: url("http://www.how-to-manifest-your-desires.com/images/contentbak.jpg") repeat-y left top;
    width:840px;
    margin:auto;
    text-align:left;
}

.textarea {
    width:790px;
    margin:auto;
    text-align: left;
}

#leftcontentbox {
    float:left;
    width:164px;
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
}

#rightcontentbox {
    float:right;
    width:164px;
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
}
#formcontainer{ float: right; width: 140px; text-align: center; background: #C8E0F7}

#footer{
    width:840px;
    margin:auto;
    height:33px;
    background:url(http://www.how-to-manifest-your-desires.com/images/footer.jpg) no-repeat left top;
    clear:both;
}
/* round box */
.box{
    width:164px;
    margin:10px 0;
    padding-bottom:12px;
    background:url(images/webmenu-base.gif) no-repeat left bottom;
}
.box h3{
    height:24px;
    line-height:24px;
    font-size:85&#37;;
    color:#b00000;
    background:url(images/webmenu2.gif) no-repeat left top;
    text-align:center;
    margin:0;
}
.box h3.wmenu{
    background:url(images/webmenu.gif) no-repeat left top;
    text-indent:-999em;
}
.content{
    border:1px solid #fac43e;
    border-bottom:none;
}
.content p{padding:5px;margin:.5em 0 0 0;}
.content ul{
    margin:.5em 0 0 1.5em;
    padding:0;
}
.content ul li{padding:5px;}

#middle{overflow:hidden;padding:10px;}
* html #middle{height:1%}
     
</style>
</head>
<body >
<div id="content">
    <div id="header"></div>
    <div class="textarea">
        <div id="leftcontentbox">
            <div class="box">
                <h3 class="wmenu">Web Menu</h3>
                <div class="content">
                    <p>Content goes here : Content goes here : Content goes here : Content goes here : </p>
                    <p>Content goes here : Content goes here : Content goes here : Content goes here : </p>
                </div>
            </div>
            <div class="box">
                <h3>Newsbox</h3>
                <div class="content">
                    <ul>
                        <li>A list of sorts</li>
                        <li>A list of sorts</li>
                        <li>A list of sorts</li>
                        <li>A list of sorts</li>
                        <li>A list of sorts</li>
                        <li>A list of sorts</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="rightcontentbox">
            <div class="box">
                <h3 class="wmenu">Web Menu</h3>
                <div class="content">
                    <p>Content goes here : Content goes here : Content goes here : Content goes here : </p>
                    <p>Content goes here : Content goes here : Content goes here : Content goes here : </p>
                </div>
            </div>
            <div class="box">
                <h3>Newsbox</h3>
                <div class="content">
                    <ul>
                        <li>A list of sorts</li>
                        <li>A list of sorts</li>
                        <li>A list of sorts</li>
                        <li>A list of sorts</li>
                        <li>A list of sorts</li>
                        <li>A list of sorts</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="middle">
            <p>This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: </p>
            <p>This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: </p>
            <p>This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: </p>
        </div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>

**jdurand3** · Nov 24, 2007, 11:58

Thanks, Paul - thats perfect.

I've grabbed the code so you can take down the page.

jimo

The SitePoint Forums have moved.

User Tag List

Thread: simple code for a content holder

Thread Tools

Display

simple code for a content holder

Bookmarks

Bookmarks

Posting Permissions