Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Background help

  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Background help

    Hey folks,

    This is probably going to be really easy but i've been working on this all night and just can't see what's wrong!

    Supposed to look like this:



    But instead looks like this:



    I can upload code where required!

    Help?

    Cheers!

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Looks like you are creating a fluid box for your white and yellow backgrounded containers.

    Maybe use this demo as a guide. I have attached the border images the demo uses. You can add content that causes the bordered container to expand horizontally and/or vertically and the borders compensate accordingly.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Fluid Box</title>
            <style type="text/css">
                .container {
                    width: 300px;
                    color: rgb(0,0,255);
                    background: url("roundedRight.jpg") top right no-repeat}
                .container a {
                    font-size: 12pt}
                .desc {
                    font-size: 18pt;
                    margin: 0px 0px 0px 0px;
                    padding: 20px 0px 0px 20px;
                    background: url("roundedLeft.jpg") top left no-repeat}
                .link {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 0px 0px 20px;
                    background: url("roundedLeft.jpg") bottom left no-repeat}
                .link div {
                    display: block;
                    padding: 0px 20px 20px 0px;
                    font-style: normal;
                    background: url("roundedRight.jpg") bottom right no-repeat}
            </style>
        </head>
        <body>
            <div class="container">
                <div class="desc">This box is:</div>
                <div class="link">
                    <div>
                        Indestructable because it is expandable both X and Y directions.
                        <p>Even more text</p>
                        <p>Some paragraph text</p>
                        <ul>
                            <li>List item 1</li>
                            <li>List item 2</li>
                            <li>List item 3</li>
                        </ul>
                    </div>
                </div>
            </div>
        </body>
    </html>
    Attached Thumbnails Attached Thumbnails Background help-roundedright.jpg   Background help-roundedleft.jpg  

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It's a bit more complex than that as the yellow container contains show/hide divs and also a lightbox for images!...

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    It shouldn't matter because I can put whatever content and javascript functionality I like in the child div of the link with class="link" and the borders will be elastic in both X and Y directions if the content changes or you change the width of the outer div.

    Anyway, that is the basic setup I use when I need an "elastic" box with image borders.
    Last edited by bullant; 04-30-2011 at 01:06 AM.

  • #5
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by p90pts View Post
    It's a bit more complex than that as the yellow container contains show/hide divs and also a lightbox for images!...
    can you post a link to a test page?

    best regards

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

  • #7
    New Coder
    Join Date
    Apr 2011
    Location
    New Delhi, India
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    u need to add one div around ur #content div

    like...

    Code:
    <div id="contentwrapper">
      <div id="content">
         ----------  rest content goes here  ------------
      </div>
      <!--- content div ends here --->
    </div>
    <!--- contentwrapper div ends here --->
    css code for above

    Code:
    #contentwrapper {
      background: url(border/image/path) 0 0 repeat-y;
      margin: 0 10px;
    }
    #content {
      background: urcolor;
      margin: 0 10px;
    }
    .left {
      background: urcolor;
      ----- rest code-----
    }
    here is catch in above code if ur right-side is bigger than ur left-side ur left-side will show right-side color below where left-side content ends... if u want ur left side shud not show right-side color whether it's bigger or smaller than right-side than u need to add backgroung-image image in ur #content style with right-side bgcolor, which will be 1px high & just 5px above the left-side color wide...

    hope u understand what i have explained here...
    Last edited by amitsh; 04-30-2011 at 11:26 AM.

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by p90pts View Post
    you have a id "textcontent" defined multiple times.

    http://validator.w3.org/check?verbos...2A%2Ftop5.html

    looking to what you done i guess you know that ids must be uniq but for some reason and from your css declarations seems that you intend to use it as class.

    another problem is that some declarations in css are ignored because of some syntax errors:

    http://jigsaw.w3.org/css-validator/v...2A%2Ftop5.html

    but the main problem is that:
    Code:
    <div class="content">
    must be:
    Code:
    <div id="content">
    best regards

  • Users who have thanked oesxyl for this post:

    p90pts (05-01-2011)

  • #9
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Done it!

    THANKS TO ALL WHO HELPED!!!
    Last edited by p90pts; 05-01-2011 at 01:33 AM.


  •  

    Posting Permissions

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