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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making Background Image display in outer DIV

    Hi,

    I wonder if someone could help me with this problem. First I think it would help to give you a snippet of code
    Code:
    <div id='processBox' style="background:url('/images/hobbies/web_design/process_three_stripe_bg.png') repeat-y;">
    	<div id='processIconBox' style="position:relative; float:left; width:99px">
    	      <img src='/images/hobbies/web_design/process_plan.jpg' alt='Plan' />
    	</div>
    	<div id='processDescriptionBox' style="position:relative; float:left; width:460px">
    	     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lobortis, nibh vel 
                 accumsan luctus, tortor purus ultrices leo, porta laoreet erat risus a eros. Nulla 
                 commodo velit. Nunc est velit, feugiat non, posuere id, pharetra nec, risus. 
                 Vestibulum placerat vehicula dolor. Quisque quis turpis. Nam fringilla scelerisque 
                 metus. Nullam porta dui sit amet eros.
    	</div>
    </div>
    OK now with this code, the image contained within "processIconBox" will have a fixed size, therefore the div will set itself to whatever the height of the image is.
    The content contained within "processDescriptionBox" will have varying size.

    Now I want the outer div, "processBox", to display a background all the way down the left-hand side, no matter how much text is contained within "processDescriptionBox".

    As the code is above, the background does not display. This is a problem I have found over and over again. The only solution I have come across is to add some text directly into "processBox" e.g.

    Code:
    <div id='processBox' style="background:url('/images/hobbies/web_design/process_three_stripe_bg.png') repeat-y;">
    	<div id='processIconBox' style="position:relative; float:left; width:99px">
    	     <img src='/images/hobbies/web_design/process_plan.jpg' alt='Plan' />
    	</div>
    	<div id='processDescriptionBox' style="position:relative; float:left; width:460px">
    	     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lobortis, nibh vel 
                 accumsan luctus, tortor purus ultrices leo, porta laoreet erat risus a eros. Nulla 
                 commodo velit. Nunc est velit, feugiat non, posuere id, pharetra nec, risus. 
                 Vestibulum placerat vehicula dolor. Quisque quis turpis. Nam fringilla scelerisque 
                 metus. Nullam porta dui sit amet eros.
    	</div>
            I AM SOME TEXT
    </div>
    Now this makes the background display however I have some text there spoiling the layout. Of course I could add <br style='clear:both' /> instead but this adds an extra line in IE -> also spoiling the layout.

    So... is there a way I can get my background to display without adding this 'junk' text?

    Thanks,
    d418rf
    Last edited by d418rf; 12-12-2006 at 11:33 PM. Reason: Clarity

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    I believe that you do need to have some text to make a background show up...

    However, just set your text like this

    p.text_to_show_bg
    {
    font-size 1%;
    }

    then in your HTML

    <div class="the one where I want the bg to show">
    <p class="text_to_show_bg">&nbsp;</p>
    </div>
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by whizard View Post
    I believe that you do need to have some text to make a background show up...

    However, just set your text like this

    p.text_to_show_bg
    {
    font-size 1%;
    }

    then in your HTML

    <div class="the one where I want the bg to show">
    <p class="text_to_show_bg">&nbsp;</p>
    </div>
    I tried your method. However, this is no better than adding br clear:both as I have been doing since the browser still makes the line too high. Thanks anyway.

    Anyone know of some other way of doing it?

    Thanks,
    d418rf

  • #4
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    FYI: I have decided to resort to a trick I havn't used for years. I have inserted a 1x1 pixel image in place of the 'junk' text.

    Any better solutions are welcome :P

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    You need to clear the float:

    Code:
    <div class="clearfloats"><!-- clear the floats --></div> <!-- in place of the <br> -->
    
    .clearfloats {
     line-height: 0;
     clear: both;
    }
    Something like that. I always use the PIE method:

    Code:
    #processBox {
     min-width: 0;
    } /* for IE 7 */
    
    #processBox:after {
     content: ".";
     display: block;
     height: 0;
     visibility: hidden;
     clear: both;
    }
    
    * html #processBox {
     height: 1%;
    } /* for IE 6 */
    Hope this helps…


  •  

    Posting Permissions

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