# How to stretch bottom as pages get longer?



## Eclipse2003 (Apr 22, 2005)

I am not sure how to describe this but, I am building a website in Photoshop/Dreamweaver with some Flash. There are going to be several pages each with different length/height. Is there a way to set it up so that if the page gets longer, it'll extend/stretch the bottom of the page down to fit it? If so, how?


----------



## Eclipse2003 (Apr 22, 2005)

Ok I think I found a better way to word this. I am using tables and in those tables' cells are slices of a design done in photoshop. The area where the main body of text is going to go has an image as its background. When the text goes longer than the image it moves the slice to the left of it down some leaving a gap between the left bottom slice and the slice above it. Any idea at all how to get it so that if the text is longer than the image, the image and everything will not slide down but more "stretch"? Any idea how to get this to work? Thanks in advance guys. I hope you can help me.


----------



## Jaxo (Feb 21, 2008)

Well Eclipse2003 it would be easier (for me at least) to see an example of what it's doing. 

Some ideas though would to set the background on repeat if that would work (sounds like the image isn't something that simple).

Allow the cell that the text is in to scroll? Not sure if that would be "tacky" or not for your design.

Design the site using z-index to layer the text over the background image...

Is the text being applied going to be static? Could you just increase the size of the slice to match the increased text?

I'll try to think of some more ideas. "Stretching" the image usual results in a not so nice pixel/distorted like image.

Hope that helps. Let me know if you have any more questions about above.


----------



## sobeit (Nov 11, 2007)

just use percentage instead of pixels in page or table properties in regard to height.


----------



## Eclipse2003 (Apr 22, 2005)

http://www.geocities.com/gobrowns81/home.html

That is the page as of now. Only the home page works and there is going to be text in the white section. We are also going to change the background but I just put any brown color up for now just to show what it is going to look like. Basically there is going to be text in the white section and I want that to either stretch or to simply move the background "filigree" down as more text is added. The white section is its own slice. The other problem is that the blue on the left is a slice up to the bottom of the brown menu. So if the white slice moves down, the blue does also leaving a gap between the blue slice and the slice above it that has the menu and some blue to its left. See what I mean?

Based on that, what do you think is best to do? Will the tree background of the blue cause problems?

To answer some of your questions:

Don't really want a scroll.

How does z index work?

Yeah the text is going to be static but the text is going to be changing on each page. I could make the slice bigger as needed but the problem with that is, if we update one of the pages and it contains more text than it originally had then we'll have to create a new slice. Not that big of a deal but would rather somehow not have to do that.

How do you use percentage instead of pixels? I am using Dreamweaver CS3 if that helps.

I googled this and I read somewhere about taking 3 slices from the slice we want to move. Take one of the top. One with a middle that we can repeat and then one for the bottom. So in this case I'd take the entire filigree as one slice. And then two plain white slices for top and repeat pattern. The problem with this is, how do we have the blue move with the white as it "stretches"?

Thanks for the help so far guys!


----------



## Jaxo (Feb 21, 2008)

So behind the text is white background with the nice filigree always being on the bottom right hand corner?

I believe I can help! Crazy eh?

I would set the background color of the cell with the filigree to white. Position the image to sit in the bottom right hand corner of the cell. So if the cell stretches it should reveal the top and left side of the cell background which would be white. I would even cut down the slice to just the filigree which could save on load time, although not by much.

For the blue on the left I would slice a 1px high by however wide you have that column with nothing but the blue color that matches. Then have it repeat Y.

Hope that makes sense. It's actually easier in my head to use div containers then table cells now :grin:


----------



## Jaxo (Feb 21, 2008)

Jaxo said:


> For the blue on the left I would slice a 1px high by however wide you have that column with nothing but the blue color that matches. Then have it repeat Y.


Now that I had some time to think about it. It could be as easy as setting the lowest slice on the left column position to top and giving the background color of the cell the same background color of the sliced image...?? Give it a try.

Let me know if you need examples of what my crazy brain is trying to relay.


----------



## Eclipse2003 (Apr 22, 2005)

Skimmed over what you said. Probably will need your help on this. Don't have much time right now but we'll talk more Monday. Thanks for the input so far Jaxo. I appreciate it!


----------



## Jaxo (Feb 21, 2008)

How is the bug fixing going?


----------



## Eclipse2003 (Apr 22, 2005)

Well I am actually going to work on it some today or tomorrow. I am changing the design a bit and then going to try what you suggested. I'll definitely keep you updated and probably will be asking a few more questions.

In fact here is another one, my pastor wants to have a blog. Is there a way that I can have him have a simple interface to be able to add to his own blog or is the only way to do this by editing the HTML directly?


----------



## Jaxo (Feb 21, 2008)

I know that can be done with custom programming or even using a CMS. Not sure what would be best in your situation thought. I am in the process of setting up my first CMS for a customer and so far so good. Down side is it's a Joomla/CMS realty/mojoBlog combo which I hear works well together, but definitely a learning curve. There is a lot of stuff out there just have to sift through all of the crap. :grin:

It all depends on your clients experience with HTML? Although I do know some family members who are knowledgeable in coding and prefer to use a cms like setup.

Perhaps someone else has an opinion/recommendation on this?


----------



## Eclipse2003 (Apr 22, 2005)

Ok one quick question for you now. How do you make the background image not repeat but stay stationery/static when the user has to scroll down on the website? So basically, the website moves up and down but the background image stays still? Also, is there a way to change the size of the main website based on the resolution so that at every resolution the page will be the same size? Because at like 800 x 600, the background image basically goes away. Let me know any suggestions and thanks again for helping me out with this, I appreciate it!


----------



## Eclipse2003 (Apr 22, 2005)

Ok I was able to get the background to stay static and the website is now extending as I type in more text. Thanks for the tips. I may post back more questions as I continue to work on this site. Thanks for the help. 

The things I am working on now is creating an interface where my pastor can type is blog without knowing any HTML (although I may just have him send me information and I'll put it in if I can't figure it out) and also having a log in page which allows members of our church to access "members only pages". Any ideas with that? Couldn't someone just simply type in the address to one of the members only pages and be able to access it? Or is there a way to prevent that?


----------



## Jaxo (Feb 21, 2008)

Hey there,

Sorry for the delayed response, full time into working on a new site.

Glad to here you got the image static. In regards to your image resolution question there is no easy way to setup it up. If you are truly interested in the image changing per resolution check out the link below.

Boutell.Com

For your question in your latest post about having your pastor update the site himself, I would look into something like wordpress with a plug in like Members Only for your "secured" area.

Next link below is an interesting article about making wordpress more like a cms. Seems wordpress is loved due to it's easy to grasp/understandable nature. blazenewmedia.com

Hope that's gives you more to go on :grin:

Keep them questions coming!


----------



## Eclipse2003 (Apr 22, 2005)

Ok here is another question for you. How would we go about getting the background image to extend down and right depending on how long and wide the website is.


----------



## Redcore (Aug 14, 2007)

I can tell you how to do it down but not to the right. I just center my designs.


----------



## Eclipse2003 (Apr 22, 2005)

I think I'll just make that image long enough that I don't have to worry about it. The pages won't ever be that long anyways. Thanks!


----------



## Redcore (Aug 14, 2007)

Actually I do the opposite. I make a really thin background that duplicates as it gets longer (stacking).


----------



## Eclipse2003 (Apr 22, 2005)

Is doing it the way you suggested better? Should I go that route instead?


----------



## Jaxo (Feb 21, 2008)

That is definitely the easier route to go. Like I said in previous post, there is no way to increase image size in background when someone visits the site with a larger/smaller resolution. At lease no way without some kind of scripting language like javascript. Check out link above Boutell.Com for an insite on what I am talking about. Most sites will create a 1px by however long image that will just repeat (like Redcore said). I have seen where they tile an image with a 100px x 100px that flows well too.

Good luck!


----------



## Eclipse2003 (Apr 22, 2005)

Ok here is an idea we are going with. 

Here

We are thinking about splitting up the boxes where there is a transparent background. The problem we are having is that wherever there is an angle, it is putting a white jagged border. Any idea why or how to fix this?


----------



## Eclipse2003 (Apr 22, 2005)

Ok nevermind. We are going back with a design similar to the original one. If you still feel like answering my last question, feel free. Otherwise, I have another question:

We want to have our sermon page to look like the following: http://www.churchoftheopendoor.com/engine.cfm?i=9
How do we do this in HTML if we have one slice for the text? Basically, we want to have individual columns for date, title, preacher, download link. Let me know any suggestions. Thanks!


----------



## Eclipse2003 (Apr 22, 2005)

Ok another question:

I am putting links to download a registration form. The code I am using is below but when I use this, it doesn't give you the option where to save, it just saves where (in my case the desktop). Is there something I am doing wrong or is this the way it has to be? Let me know.

<a href="RegistrationForm08.pdf">Click Here To Download Registration Form</a>


----------



## Jaxo (Feb 21, 2008)

Eclipse2003 said:


> Ok nevermind. We are going back with a design similar to the original one. If you still feel like answering my last question, feel free. Otherwise, I have another question:
> 
> We want to have our sermon page to look like the following: http://www.churchoftheopendoor.com/engine.cfm?i=9
> How do we do this in HTML if we have one slice for the text? Basically, we want to have individual columns for date, title, preacher, download link. Let me know any suggestions. Thanks!


Hey there Eclipse2003,

I do not have a good answer for the .gif transparency issue. Perhaps you could slice it off the same color you have in your background picture?

For you sermon page, I am guessing you are wanting the same column setup? This is where tables shine and would be good to use in this setup. I bet you could even duplicate the change of color on rollover with the :hover on <td> tag... Curious if that would work.

About the .pdf, I believe that the browser settings figure if the page is loaded or downloaded. In firefox I have always downloaded the .pdf due to issues opening it in browser(firefox 3 seems to have fixed that for me) and in IE I could check out the .pdf within the browser window without errors.


----------



## Eclipse2003 (Apr 22, 2005)

Jaxo. Thanks for the reply. Could you go a little more into detail about the tables and how to get that accomplished exactly? Again, I am really really new with website design so don't know much.

Also, we have the site live now with just a couple of pages. Take a look and let me know your thoughts. 

http://www.ofbchurch.org


----------



## Jaxo (Feb 21, 2008)

Great work! Good looking site. One thing I noticed is at the bottom of the background the page is white, is that intended?

About setting up tables... Let me get you a link to w3schools to get read. It would probably be easier to learn it that way anyways.

HTML Tables

I'll check about how the :hover command effects tables.


----------



## Eclipse2003 (Apr 22, 2005)

What resolution do you have your screen at? For mine the background stretches all the way to the bottom.


----------



## Eclipse2003 (Apr 22, 2005)

Ok when I tried to use tables, it moved everything to the right side of the website. I think this is because the website is already set up in tables and the Cell that I want to use already is filled with a background image. Take a look at my code below and let me know what you think...(this cell stretches across the tan with the Welcome word and goes through the dark brown to the left. It spans a couple of pixels down from the top of the tan section and goes down to the top of the "picture links" on the bottom left (Pastors Blog etc).

<tr>
<td colspan="3" background="images/ofbc_06.gif" width="800" height="59">
<h2 align="center"><img src="images/welcome.gif"></h2>
<h2 align="left" class="style2"></h2>
<h2 class="style2">
<p class="style2"> </p>
<th>Date</th>
<th>Title</th>
<th>Download Link</th>

</td>
</tr>


----------



## Jaxo (Feb 21, 2008)

It might be because you need to use the <table></table> around your code below. A table within a table. 

? See if that helps.


----------



## Eclipse2003 (Apr 22, 2005)

Oh a table inside a table? Didn't know you could do that. I'll have to give that a shot and see how it works. Thanks Jaxo. I'll let ya know


----------



## Eclipse2003 (Apr 22, 2005)

Ok the table within a table is working beautifully. Now the problem I am having is that regardless if I change the font size in the h4 settings at the top, it won't change the font size when I view in any browser. More specifically I am trying to change the font size of the month links above because anything above 10 px they go off the edge. The font size changes in dreamweaver though and looks fine. Any ideas?

Attached is my code. Let me know your thoughts.

Also, what is a good font size to use for websites?


----------

