Help with container/divs/images and textual content

Discussion in 'HTML & Website Design' started by yesyoucant, Nov 3, 2009.

  1. #1
    Hello,

    If someone could please help I would greatly appreciated. Everything has
    made sense in this my intro Web Design class up until I have to independently put it together of course.

    The attached file has 3 numbers, and I was
    wondering, in the case of 2 and 3, would I make these containers with
    background images and then place the text inside via the paragraph tag?
    Essentially I want these two items to serve as independent items/images
    against the background page, but I want the textual content to be
    interchangeable from time to time. I want to stay away from tables...

    Any insight would be greatly appreciated.

    [​IMG]

    Thanks in advance,

    Amanda
     
    yesyoucant, Nov 3, 2009 IP
  2. ZX_spectrum

    ZX_spectrum Peon

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    In my opinion, stay away from tables is a right decision))

    You should use something like this:

    your.css:

    #bigbox {
    margin: 0 auto;
    width: 950px
    background: #FFFFFF url("back.jpg");
    }

    #win2 {
    float: right;
    background: url("win2.jpg") no-repeat;
    width: 400px;
    height: 400px
    }

    #win3 {
    clear: right;
    background: url("win3.jpg") no-repeat;
    width: 900px;
    height: 400px;
    }

    /* for text inside boxes */
    p{
    padding: 0 20px 0 30px; /*up,right,bottom,left space*/
    text-indent: 3em;
    margin: 5px auto 5px 10px; /*up,right,bottom,left space*/
    line-height: 125%
    }

    your.html:

    <!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=iso-8859-1" />
    <meta name="description" content="..." />
    <meta name="keywords" content=".." />
    <title>..</title>
    <link href="your.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="bigbox">
    <div id="win2"><p>Place text win2 here</p></div>
    <div id="win3"><p>Place text win3 here</p></div>
    </div>

    </body>
    </html>
     
    ZX_spectrum, Nov 3, 2009 IP
  3. forextrendalerts

    forextrendalerts Guest

    Messages:
    132
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    <div id="container">
    <div id="header"></div>
    <div id="nav">
    Home History Gallery Contact </div>
    <div id="content"></div>
    <div id="footer">
    Street Car Universe
    </div>
    </div>
     
    forextrendalerts, Nov 4, 2009 IP
  4. yesyoucant

    yesyoucant Member

    Messages:
    66
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #4
    Thanks, you guys are awesome. I appreciate your help!
     
    yesyoucant, Nov 4, 2009 IP