Background Images

cc4digital

05-29-2010, 10:16 PM

:confused:
Ok, I have been going in cirlces.:eek:

What I am tring to do is lay text on 3 background images. Top Box, Middle Box, Bottom Box.

The middle box should expand depending on the amount of text. "repeat-y":)

1st problem-The TOP of the middle box is at the 0 0 point or under the Top Box. I tried margin-top and padding, but then it move my text. :mad:

2nd problem(biggest issue)- I can not get the text to go into the bottom box.:mad:

My objective:
1) have a box that expands depending on amount of text.
2) Have text sit in the top box and middle box and BOTTOM box.

I am totally stumped so any help would be really, really apreciated.:thumbsup:

Here is the code I am using:

<!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 {
margin:0;
padding:0;
}
body {

text-align:center;
padding:20px 0;
}
h1, p {
margin:0 0 1em
}
#outer {
width:738px;
margin:auto;
border:1px solid #000;
text-align:left;
padding:5px;
}
.main {
width:738px;
clear:both;
background:url(images/Middle.png) repeat-y 0 0;
}
.inner {
width:738px;
background:url(images/Top.png) no-repeat 0 0;
padding:11px 0 0;
}
.base {
clear:both;
width:738px;
background:url(images/Bottom.png) no-repeat 0 0;
height:210px;
overflow:hidden;
}
h1,h2 {
text-align:center
}
.content {
float:left;
width:470px;
margin:25px 0 0 134px;
display:inline;
position:relative;
z-index:99;
}
#footer{
clear:both;
text-align:center;
width:738px;
}
</style>
</head>
<body>
<div id="outer">
<h1>Main Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices euismod lorem. Nulla cursus. Etiam aliquet venenatis tellus. Morbi et eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ante. Quisque in diam. Quisque ac neque. Integer semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor. Aenean vel felis ut dui porttitor semper. Nulla facilisi. Duis id magna sit amet tellus tincidunt molestie. Vivamus gravida pulvinar lorem. Ut aliquet felis id est. Etiam enim est, pharetra quis, bibendum eu, tempor ac, lectus. Pellentesque h</p>
<h2>Welcome</h2>
<div class="main">
<div class="inner">
<div class="content">
<p>START!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices euismod lorem. Nulla cursus. Etiam aliquet venenatis tellus. Morbi et eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ante. Quisque in diam. Quisque ac neque. Integer semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor. Aenean vel felis ut dui porttitor semper. Nulla facilisi. Duis id magna sit amet tellus tincidunt molestie. Vivamus gravida pulvinar lorem. Ut aliquet felis id est. Etiam enim est, pharetra quis, bibendum eu, tempor ac, lectus. Pellentesque h</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices euismod lorem. Nulla cursus. Etiam aliquet venenatis tellus. Morbi et eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ante. Quisque in diam. Quisque ac neque. Integer semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor. Aenean vel felis ut dui porttitor semper. Nulla facilisi. Duis id magna sit amet tellus tincidunt molestie. Vivamus gravida pulvinar lorem. Ut aliquet felis id est. Etiam enim est, pharetra quis, bibendum eu, tempor ac, lectus. Pellentesque h</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices euismod lorem. Nulla cursus. Etiam aliquet venenatis tellus. Morbi et eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ante. Quisque in diam. Quisque ac neque. Integer semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor. Aenean vel felis ut dui porttitor semper. Nulla facilisi. Duis id magna sit amet tellus tincidunt molestie. Vivamus gravida pulvinar lorem. Ut aliquet felis id est. Etiam enim est, pharetra quis, bibendum eu, tempor ac, lectus. Pellentesque h END!</p>

</div>
<div class="base">
</div>
</div>
</div>
<div id="footer"><p>Copyright</p></div>
</div>
</body>
</html>

Excavator

05-29-2010, 11:56 PM

Hello cc4digital,
After removing some divitis (http://ahsanity.wordpress.com/2007/05/15/divitis-and-classitis-two-new-words-in-my-css-vocabulary/) I'm not seeing problem 1 at all. Top of middle box #content comes well after the h2.

Text is easily placed in .base

Your Middle.png does not lend itself well to repeat-y since it's top and bottom borders are repeated as well. Have a look here at using image borders on fluid sized boxes (http://nopeople.com/CSS/slider/index.html).

Try starting with this example. I've put background colors on each element so you can see where they fall.

<!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: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:center;
}
#outer {
width: 650px;
margin: 0 auto;
border: 1px solid #000;
text-align: left;
padding: 0 25px;
background: #0f0 url(Top.png) no-repeat 0 0; /*green for demonstration only*/
}
.content {
width: 470px;
margin: 25px 0 0 134px;
float: left;
display: inline;
background: #f00 url(Middle.png) repeat-y 0 0; /*red for demonstration only*/
}
.base {
clear: both;
width: 100%;
background: #00f url(Bottom.png) no-repeat 0 0; /*blue for demonstation only*/
height: 210px;
overflow: hidden;
}
#footer{
clear: both;
text-align: center;
width: 100%;
background: #f99; /*pink for demonstration only*/
}
h1,h2 {text-align:center}
h1, p {margin:0 0 1em}
</style>
</head>
<body>
<div id="outer">
<h1>Main Heading</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<h2>Welcome</h2>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="base">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div id="footer"><p>Copyright</p></div>
</div>
</body>
</html>

cc4digital

05-30-2010, 03:18 AM

Excavator: Thanks for the link. It is close, but if the text expands over 1800 pixels the box breaks.

In your example, I think I may have confused you. The text is all one flow of text.

I believe my current example is much clear :thumbsup: in what I am trying to do.
I have included 2 files showing what the current code is doing and what I am trying to do.
Current code results-->current.jpg
What I want the code to do-->finished.jpg
I colored the borders to help clarify. You will notice in the finished code--
what I want to do:
->The pink from the Middle.png does not extend into the green or yellow images
-> The last ling with the word "END" almost touches the yellow(currently the writing stops at the top of the yellow image.
Attached are all relevent files.
Thanks again for you suggestions.

Excavator

05-30-2010, 03:45 AM

but if the text expands over 1800 pixels the box breaks.

Because that's the size image I used in that example.

Another method of borders can be seen here - http://www.alistapart.com/articles/customcorners/

cc4digital

05-30-2010, 05:14 AM

Nice article Excavator!:thumbsup:

I am still absorbing and playing with the information. I get the impression that inorder to do what I am trying to do you need to have 5 images. It seemed to me that it would be easier if you just stacked background image on top of each other. My guess why you can not do this involves the text. The text can only go over one of the background images.

I am still learning. I am going to go break the code in the example to see what each section does. This should give me a better understanding of what is happening.

Thanks again for the quick response.

Chuck