text area

[andybhoy]

hi,

i am doing a site for a friend (but im quite a novice!) and she wants a layout similar to this site http://www.volunteerlatinamerica.com/index.html

in the site i am designing i have created the whole layout through fireworks (nav buttons on the left, pictures at the bottom and logo etc at the top. in the middle i wanted a scrollable text area (like you see in the site shown) can someone please, please tell me how to do this... ive searched and searched and just cant do it...

at the moment the page is in a table, centered. its all 1 image (i.e not cut up into buttons, top, bottom etc...)

sorry i cant show you the actual page as i have no space to upload to yet. i hope you guys understand what im describing! is there a better way to get the end result? or should i put the text in a layer? if so how can i stop it moving all over the place in different res's

thanks very much.

[Costin Trifan]

You can specify the overflow attribute, as follows:

This will display a vertical scrollbar when the content in the specified div exceeds the 200px specified height.

(I hope this make sense)

<style type="text/css">

.scrollableArea
{
height: 200px;
overflow-y: scroll;
}

</style>

[andybhoy]

thanks costin for your reply, but how do i actually begin to type there? is inserting a text layer the way to do it?

[Costin Trifan]

<div class="scrollableArea">
...
you have to insert here the content
you want to be scrolled.
...
</div>

ok?

[jamesshrugged]

thanks for the link costin

What i am having trouble with is creating the area to place the content into...

i want to be able to put text and pictures over this background...

<td>
<img src="http://www.geocities.com/blueandcassius/copyoblueandcassiuscopy6-04.gif" width="609" height="506" alt=""></td>
</tr>

but it think the problem is that this graphic isnt the background for the whole site.. just this one section... do you have any ideas?

[Costin Trifan]

Let me see if I got this right...

You have table cell which has a bg image.

And you want to add some text into that cell, right?

[Costin Trifan]

the css style:

td.ContentEditableCell {
background-image: url('http://www.geocities.com/blueandcassius/copyoblueandcassiuscopy6-04.gif');
background-repeat: no-repeat | repeat | repeat-x | repeat-y; /* choose just one of these possible values */
background-position: top left;
width: 609px !important;
height: 506px !important;
}

In the html:

<td class="ContentEditableCell">
...
add anything here...
...
</td>

hth.

[andybhoy]

http://africaandy.bpweb.net/index.html

costin - thats the link to my site, i got my space set up...

you can see the area i would like to have text in now...

thanks

[Costin Trifan]

I saw it, and the above example will do it.

If there is a table cell in which you're displaying your content, then add the class="ContentEditableCell" attribute to the container cell.

if it's a div, add the class="ContentEditableCell" attr to it.

That will do it.

[jamesshrugged]

thank you for your reply costin.

My problem is that the image isn't set as a background. when i made the template i just made a bunch of graphics. I wanted that large one there to be a background, for that cell that it is in, and have content over it, but i am having trouble figuring out how to make that image a background image

geocities.com/blueandcassius

[Costin Trifan]

I've already showed you how:

td.ContentEditableCell {
background-image: url('http://www.geocities.com/blueandcassius/copyoblueandcassiuscopy6-04.gif');
background-repeat: no-repeat | repeat | repeat-x | repeat-y; /* choose just one of these possible values */
background-position: top left;
width: 609px !important;
height: 506px !important;
}

it's not that hard

[jamesshrugged]

awesome thanks! how can i do that with html?

[Costin Trifan]

This is yhe page 2. Go to page 1, and you'll see the example provided.

Seriously, after creating the css class (that from the above example), all you have to do is to set the class name to the container cell (the one in which you display content)

ok?

[jamesshrugged]

ok... i sort of got it to work thank you so much for you patience...

i can now insert text over the image.. but the image is coming up cropped

here is the code i used
.................................................. .......
<td style="background-image:url(http://www.geocities.com/blueandcass...copy6-04.gif); width="609" height="506"
">
<div class="ScrollableArea">

you have to insert here the content
you want to be scrolled.

</div>
</tr>
.................................................. .........


and here is what happened.. geocities.com/blueandcassius

[Costin Trifan]

So, the picture seems to be smaller than the container is...

or

You have two cells there, one to the left and one to the right and you apply the background image only to the right cell...


so, which one is it...??

[jamesshrugged]

Nevermind, I figured it out! yay! thanks costin!

[Costin Trifan]

Great!

Glad I could help!

[jamesshrugged]

its just that for some reason the image is cropping to meet the amount of text, so i put in enough text for the whole pic to show up. its kinda a cheap fix i guess, but it works

[jamesshrugged]

gah.. im having another problem..it looks perfect in firefox, but in ie it looks horrible. it isnt making a scrollbar, its just repeating the image over and over to fit the text. What can I do?

[Costin Trifan]

What's the size of your image?
What's the size of your containing area?

Are these size equals? Because if they're not then the image repeats over and over to fill the containing area.