...

View Full Version : Backgrounds inside floating divs



devMoon
02-16-2009, 03:28 AM
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 (http://devmoon.se/new/tmp/)
Stylesheet (http://devmoon.se/new/tmp/style/style.css)

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

Excavator
02-16-2009, 06:13 AM
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?

<!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>

devMoon
02-16-2009, 12:40 PM
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. :confused:

Excavator
02-16-2009, 09:08 PM
You can nest another div to get another background in. I added some background colors since I didn't look for your other image -
<!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>

devMoon
02-16-2009, 09:32 PM
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...

Thanks, i tried that and i got a border on the left side
Test Site (http://devmoon.se/new/tmp/test) 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?

:)

Excavator
02-16-2009, 10:31 PM
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:
<!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

devMoon
02-16-2009, 11:44 PM
Thanks for your help now i fixed my problems : D and it works great in both IE and Firefox :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum