View Full Version : template question

01-31-2008, 12:54 AM
I am creating a website with a few pages, each page is the same width, but a different height. I am creating a shadow effect on the bottom, using a 800x20px horizontal shadow created in photoshop. right now, all i can think to do with it is put it in a div, and use css to position the div at the perfect spot at the bottom of each page. the problem with this is that i will have to insert it and position it into each page individually. is there a way to put it into my template, so that despite the different page dimensions, it will still land at the correct spot at the bottom?

actually, i have the same problem with the site in general. for example, each page has an information box that looks the same, its the same width with a white background. but because of the different height, i created separate divs for each page to put the information into. is there something i am missing? i tried creating a div with an unspecified height in my template, but then when i create a page and put information into it, the box does not grow with the text, and the white background does not cover the length of the information.

so..basically..do i have to create separate divs for positioning these things on each page(using css...), or am i making things way more complicated than they have to be?

01-31-2008, 01:24 AM
[Ö] am i making things way more complicated than they have to be?

Yes. Just apply the bottom shadow as background image to your page wrapper (assuming you are using such):

[head section]
<div id="container>
[page content]

#container {background: url(images/bottom_shadow.png) bottom left no-repeat;}

01-31-2008, 01:35 AM
......whats a page wrapper?

01-31-2008, 01:52 AM
I just showed you some simplified HTML to demonstrate. You put your entire page content in one all wrapping div so you can easily set an overall page width, position (centering), background, etc.

You structure your page semantically, generally dividing it into a header section, a content section, and a footer (optional), all wrapped by a global container:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

You can then apply a background image to the wrapping div (container) (i.e. a shadow at the left and/or right, or the bottom), and you can apply an image to the footer, for example your bottom shadow. Itís all to your preference.

As to repeating content youíll still have to insert that manually into each page but you can style it using an external stylesheet. You might consider using server side includes (http://allyourtech.com/content/articles/22_11_2005_php_includes_for_people_who_dont_know_php.php) for repeating content on multiple pages.

01-31-2008, 02:32 AM
ok, i did structure my page that way, with a wrapper. my wrapper does have a background image for the left and right shadow. forget the bottom shadow for now, to make this less confusing. my issue is that there is a different amount of content for each page. for this reason, the wrapper needs to be a different length for each page. with my current understanding, this means that i have to create a separate wrapper for each page, so that i can give each its own length. and if i had a footer, it would mean that i would need a separate footer for each page, so that i could position it correctly at the bottom of each differently sized page. i assume i'm missing something...

01-31-2008, 03:05 AM
Why? If the height is different then just donít set a height at all! Or am I misunderstanding something here? Almost every elementsí height collapses to the height of its content automatically if nothing else is set. And you donít have to position anything. Your footer will always be below your content section if you donít specify anything. Therefore with changing height of the content section (through different amount of content) the footer will go up or down automatically.

I almost suspect that you are applying absolute position to everything which is a totally wrong approach. div elements will sit underneath each other by default. Just use the force, Luke. :)

Actually Iíd have to guess less if you showed what you have tried so far.

01-31-2008, 08:22 AM
well....yeah im basically absolutely positioning everything because stuff is NOT automatically sitting underneath each other, im guessing because of all my absolute positioning? :) i must have REALLLLY messed this up. i'm gonna start all over...this is what i get for trying to learn all this stuff on my own i guess...