CSS Text frames

Seachmall

How (or can you) frame text with an image. I want to have a text with a bottom frame which is an image. At the moment I have to move the image myself to the bottom of the text but I want it (the image) to move automatically.

Any help is apprectiated.

S.

Gordon

I'm not really sure what you mean - can you elaborate or draw a picture?

DonkeyStyle \o/

Depends on how you're doing it... if you take the image out of the flow of the document by floating it or including it as a background, I'm fairly sure you're stuffed...

Wait, scratch that... I want a picture too.

Ph3n0m

Well you can create an image that will "frame" your content - and just use it as a background image to a div, with the content in it

louie

create a div with you images as the background, no-repeat, position bottom, center, padding-bottom:22px (let's say you image is 20px in height)

inside the div you just created, nest another div for you text.

<div class='text_container' style='background-image:url(images/path_to_your_image.gif); background-position:bottom center; background-repeat:no-repeat; padding:1px 1px 22px 1px;'>
  <div class='text_here'>
    your text here
  </div>
</div>

Seachmall

To clarify heres what I'm trying to do.

I want to keep the top and bottom images around the text area and I want the bottom one to move down automatically when neccesary (i.e. when text is added).

At the moment its a seperate background image that I have to move manually.

Can I set it so I don't have to change it?

The above doesn't appear to work but I'll mess around with it and see what I can get, thanks.

Kudos

It's difficult to tell how to do this without seeing your current method, post your html and css and we'll fix it.

louie

try this way

<div class='main_box'>
  <div class='top_image' style='background-image:url(images/path_to_your_image.gif); background-position:bottom center; background-repeat:no-repeat; padding:1px 1px 22px 1px;'>
  </div>
  <!--end od top image - start of text container-->
  <div class='text_here'>your text here</div>
  <!--end ov text container - start of bottom image-->
  <div class='bottom_image' style='background-image:url(images/path_to_your_image.gif); background-position:bottom center; background-repeat:no-repeat; padding:1px 1px 22px 1px;'>
  </div>
</div>

Goodshape

louie, the same could be done with only two divs.

Container div with top image as background, positioned top center. Specify padding-top equal to the height of the image.

Inside div with bottom image as background, positioned bottom center. Specify padding-bottom to the height of the image.

louie

yes indeed, but i prefer the nesting option, so I can play around with the text padding and moving around without affecting the images whatsoever.

Seachmall

The previous picture is a bit misleading, the top of the page isn't actually relevant to this problem so ignore.

Heres my CSS

.main{
	background-image: url('textmain.gif');
	background-color: #000000;
	position: absolute;
	top: 428px;
	left: 304px;
	width: 498px;
	height: 300px;
	font-family: 'Bradley Hand ITC';
	font-size: 24px;
	padding-left: 15px;
	padding-right: 15px;
}
.bottom{
	background-image: url('textbottom.gif');
	background-position: bottom center;
	padding-bottom: 22px;
	position: absolute;
	left: 300px;
	top: 724px;
	width: 506px;
	height: 106px;
}

And the HTML

<div class="main">This is the text area.</div>

<!-- The bottom picture -->

<div class="bottom"></div>

I've tried removing their 'left' and 'right' CSS positioning and placing it into a seperate <div> and wrapping that <div> around everything (as suggested above) but it doesn't seem to work.

Kudos

You can't position it absolute and get it to move automatically, the point of absolute positioning is for content that should never move in the window frame. I'd go with loui's method above.

Seachmall

Shoot, thats what I was doing wrong. It works fine now, thanks.