Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    template question

    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?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Quote Originally Posted by ratareina View Post
    […] 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):
    Code:
    [head section]
    <body>
      <div id="container>
      [page content]
      </div>
    </body>
    </html>
    Code:
    #container {background: url(images/bottom_shadow.png) bottom left no-repeat;}

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ......whats a page wrapper?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    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:
    Code:
    <!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">
    <head>
    <title>netture</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
    <div id="container">
    	<div id="header"></div>
    	<div id="content"></div>
    	<div id="footer"></div>
    </div>
    </body>
    </html>
    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 for repeating content on multiple pages.

  • #5
    New Coder
    Join Date
    Jan 2008
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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...

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    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.

  • #7
    New Coder
    Join Date
    Jan 2008
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •