SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    simple code for a content holder

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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 .

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Something like this.

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

    View source to see the code and then ask questions later

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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>
    Last edited by Paul O'B; Nov 24, 2007 at 13:11.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul - thats perfect.

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

    jimo


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •