Hey folks,

I am creating a site that will expand down automatically when there is more content.

i know it's possible, but i'm not sure how it's done.

I've got the site designed, with a background image, in PS and want to get the programming done before i get too far.

can any of you help, or point me to where i can learn what i need to do please?!

thanks!!

I am creating a site that will expand down automatically when there is more content.

Umm.. it'll do that anyway if the page is coded properly and everything isn't set to position:absolute.

you showed me something a long time ago.

i'm concerned with the background images and stuff like that.

thanks!

Background images, if they are made to tile, will fill the space as the div expands.

here's what i'm trying to explain i think.
http://forestcitymechanical.com/sample/fireplaces.php

notice how the scroll bar is there instead of the page expanding down.

i don't know what i'm talking about!

lol

any help? pls?

Get rid of the overflow:auto on the div#body

ok, i removed the code you told me too and now you see what i was trying to avoid!

i will have to play i guess!

The problem is that you have #body set to position:absolute, which takes it OUT of the normal document flow. What you need to do is use the normal document flow and floats (if necessary) to get it to do what you want, and what it will do once you get rid of the absolutes. When you use floats, you also have to CLEAR those floats.

http://css-discuss.incutio.com/?page=ClearingSpace

http://css-discuss.incutio.com/?page=FloatLayouts

thanks for the info, at first glance i'm totally lost. but i will read it a little more indepth when i have a chance later this weekend.

just tired of seeing scroll bars when there's too much copy!

thanks!

ok, before i read the links, i did a search on here as i asked the same question a while ago.

here's what i have now. http://insiteci.com/sample/test2/

is this right?

why does the text at the bottom, flow over to the left, and how do i stop it?

am i back on the right path?

should i just use some hard returns to keep the white space past the box?

That looks much better.

why does the text at the bottom, flow over to the left, and how do i stop it?

Hmm.. I'm not seeing that, did you change it ?

looks like i took some text out when i was playing.

i've added it back again.

maybe when i cleared the float on the left, the text flows around the image

ok, so after doing some reading, i have come up with this.

http://forestcitymechanical.com/sample/main.php

now i don't really understand how i got it to work, and why i can't place div tags in the exact spot i want them. Like a php include for navigation over an image.

but the page expands as i need it to and it seems to work properly.

any thoughts?

thanks for your help Lady!

Very good ! It looks great

Where are you trying to exactly place a div, and why ?

If you want something to go OVER an image, put that image in as a background on a div.

If you want to add navigation over the logos on the left, put that logo image in as a background as above. Then put your nav in the div, it will show on top of the image.

I did notice a few things.. and here are some suggestions:

<p align="left"><strong>Fireplaces</strong></p>
<p align="left"><strong>Electric</strong></p>

First, set the text alignment on #content, not on every <p> tag.
Secondly, it appears that you are using the above method to SIMULATE
headings.. don't. Use the proper Hx tags and style the Hx tags accordingly.
This is semantically correct AND, Hx tags are helpful for search
engines and assistive technology.

the image background thing hit me when i was in church today actually! I've added an image to the nav now, and it works great!

i've gotten myself used to the absolute positioning of div tags, as i didn't really know any better!

now the next trick, figuring out what you are talking about with the HX stuff!

i hope i'm not driving you nuts with all this stuff!

For headings, you use Heading tags - h1, h2, h3.... h6.
You can style those headings with css like you'd style anything else, like this;

h1{
font-size: 1.5em;
font-weight: bold;
text-align: center;
color: #ae3175;
padding: 3px 10px;
margin: 5px 5px 10px 8px; (top, right, bottom, left)
}

You can set the size and color for each heading level to be something different if you choose.

i did some looking after i posted and figured out what it was!

thanks again!

without your help i'd still be doing it wrong!