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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Backgrounds inside floating divs

    Hello, my first post yey.
    Im working on a projects of mine and i cant get my backgrounds to align correctly, i dont even know if im on the right path at all.

    Here are a sample i made with the problem
    Sample page
    Stylesheet

    Basicly want i want to achieve are this
    • Have a floating div
    • Having a tiled background that will fill the div and its content
    • Have content ontop of my background image that tiled


    I want to white background image to be tiled to completely fill the black border, and extend to match the height when new content is added.

    Thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,687
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello devMoon,
    I'm not sure why so many divs...
    Have you tried just putting a background image on the div that contains your content?
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: left;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 80%;
    	margin: 30px auto;
    	background: url(http://devmoon.se/new/tmp/content-tile.png) repeat;
    	overflow: auto;
    }
    </style>
    </head>
    <body>
        <div id="wrap">			
    			Sample text<br />
    			Sample text<br />
    			Sample text<br />
    			Sample text<br />
    			Sample text<br />
    			Sample text<br />
    			Sample text<br />
        <!--end wrap--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator yea that would work for one background .

    But how would i do i want a tiled border on the left side of the content?
    since i can only fit one background into the content div.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,687
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    You can nest another div to get another background in. I added some background colors since I didn't look for your other image -
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: left;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 80%;
    	margin: 30px auto;
    	background: #fff url(http://devmoon.se/new/tmp/content-tile.png) repeat;
    }
    #content {
    	background: #00f url(http://devmoon.se/new/tmp/another.png) repeat;
    	overflow: auto;
    }
    	
    </style>
    </head>
    <body>
        <div id="wrap">		
        	<div id="content">	
    			Sample text<br />
    			Sample text<br />
    			Sample text<br />
    			Sample text<br />
    			Sample text<br />
    			Sample text<br />
    			Sample text<br />
    		<!--end content--></div>
        <!--end wrap--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    You can nest another div to get another background in. I added some background colors since I didn't look for your other image -
    Code:
    code...
    Thanks, i tried that and i got a border on the left side
    Test Site but when i added another nested element to do the same on the right side, only the right one shows up, and if i reverse the order of them i get the left border only?
    Anyway to get both?


  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,687
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Your kind of messing up the nested divs.
    Just picture each div as a box that your putting the next div into. You need to watch that you close them in the right place. That's why I always add the comment to the closing tag - so later on, when there is a bunch of content in there, you can see what it's closing.

    Try this:
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: left;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 80%;
    	margin: 30px auto;
    	background: #fff ;
    }
    #border-left {
    	background: url(http://devmoon.se/new/tmp/content-tile.png) repeat-y left top;
    }
    #border-right {
    	background: url(http://devmoon.se/new/tmp/content-tile.png) repeat-y right top;
    }	
    #content {
    	margin: 0 20px; /*this moves the content over the width of your border*/
    }
    </style>
    </head>
    <body>
        <div id="wrap">		    	
            <div id="border-left">	
                <div id="border-right">	
                    <div id="content">	
                        Sample text<br />
                        Sample text<br />
                        Sample text<br />
                        Sample text<br />
                        Sample text<br />
                        Sample text<br />
                        Sample text<br />			
                    <!--end content--></div>
                <!--end border-right--></div>
            <!--end border-left--></div>
        <!--end wrap--></div>
    </body>
    </html>
    see a live demo at http://nopeople.com/test/devMoon.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help now i fixed my problems : D and it works great in both IE and Firefox


  •  

    Posting Permissions

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