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 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post

    need help positioning 3 image background side to side

    heres a pic of what i got



    and this is what im trying to do (this was from photoshop)

    heres the CSS i know theres float and margins but i dont know if thats what im supposed to use to do this or how to even use it
    Code:
    #drywall {
    	background:url(images/DSP.png) no-repeat 00;
    	
    	width:323px;
    	height:385px;
    	margin:5px;
    	margin-top:30px;
    	margin-left:44px;
    }
    
    #stucco {
    	background:url(images/DSP.png) no-repeat 00;
    	width:323px;
    	height:385px;
    }
    #painting {
    	background:url(images/DSP.png) no-repeat 00;
    	width:323px;
    	height:385px;
    }
    now i know its easier to just use one whole image for all three but i just want to make sure i know how to do this incase i run into something like this again

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by lookkool3 View Post
    and this is what im trying to do (this was from photoshop)http://i224.photobucket.com/albums/d...er21/dspbg.png
    For this HTML

    Code:
    <div id="dsp_container">
    	<div id="drywall"></div>
    	<div id="stucco"></div>
    	<div id="painting"></div>
    </div>
    You can use a CSS-based table:

    Code:
    #dsp_container { display: table; margin: 30px auto 0; }
    #dsp_container > div { display: table-cell; width: 323px; height: 385px; background: slategray url("images/DSP.png") no-repeat; }
    Or floats:

    Code:
    #dsp_container, #dps_container > div { height: 385px; }
    #dsp_container { width: 969px; margin: 30px auto 0; }
    #dsp_container > div { float: left; width: 323px; background: slategray url("images/DSP.png") no-repeat; }
    Quote Originally Posted by lookkool3 View Post
    now i know its easier to just use one whole image for all three but i just want to make sure i know how to do this incase i run into something like this again
    It makes sense to repeat a single reduced image for all three elements.

    If you use one large image, then the user has three times more image information to download. Plus, you can't control the spacing between the elements without creating a new image each time you want to change the spacing.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    lookkool3 (01-23-2012)


  •  

    Posting Permissions

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