CSS Content Box

[dev99]

Hi
Im trying to make a CSS content box.

So i made the actual box in Photoshop, then i sliced it into 3 parts. The bottom, top and middle. I will have all my text in the middle. Then i saved for web and i had my images.

So i went into dreamweaver.

I created one style, for the top, then i made a div tag for that style, that worked fine.

I create another style for the middle, made the text indent 20 and repeat y.

I then made the style for the bottom.

My problem is that when i get to the end of the middle div tag, instead of going to a new line it keeps on expanding the div tag from the side. It doesnt duplicate the background, as i specified but the text just stays on one line.

Does anyone know the css code i can use so it starts a new line at the end of the div tag.

Thanks in advance for your help.

 

[LeetPCUser]

Can you post the code of the div box? Here is what I would do.

#Box //holds everything in it
{
width: ###px;
height: ###px; //only if set height otherwise leave out
}

#Top //your top tag only
{
width: ###px;
height: ###px;
background-image: url(images/#.#);
background-repeat: no-repeat;
}

#Middle //your middle only
{
width: ###px;
height: ###px; //if no set height take this out
background-image: url(images/#.#);
background-repeat: y-repeat;
}

#Bottom //your bottom only
{
width: ###px;
height: ###px;
background-image: url(images/#.#);
background-repeat: no-repeat;
}

HTML CODE

<div id="Box">
<div id="Top"></div>
<div id="Middle">
<p>All of your text goes here.</p>
</div>
<div id="Bottom"></div>
</div>

This should work. If you set the width then it should automatically drop a line. This will especially work well if you have it in another box. Hope this works. If not, post and I can help.

 

[dev99]

Hi
Nope, doesnt work. Thats basically what i did for the middle, except i put the text indent in.

Thanks

 

[LeetPCUser]

Hmmmm, can I see the site?

 

[dev99]

Hi
Ill try and upload the box with code later. The code is mostly the same as you posted.

BTW, does the box work with that code on your computer, it goes onto a new line?

 

[LeetPCUser]

I don't know I haven't coded something like that in awhile. Let me know when you upload it.

 

[dev99]

I will

Thanks

 

[CreedFeed]

Not tested, just throwing this out there off the top of my head

.box {
width: ??px;
background: url(topimage.gif) no-repeat top left;
}
.content {
background: url(bottomimage.gif) no-repeat bottom left;
padding-bottom: ??px; // the height of the image
}
.content p {
// your text indent stuff here
}

<div class="box">
<div class="content"><p>content here</p></div>
</div>

edit >> oops, didn't see you have a middle repeating background either.

 

[LeetPCUser]

Did you get it to work?

Pssst, rep would be appreciated.