SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help needed with full screen vertical divisions please:)

    Hi there,

    I've created a template for my first (almost) no tables site. However, I'm having some problems making a full screen vertical division, meaning no matter how little content may be on the page, the div and adjacent divisions would still stretch to the bottom of the screen so as to keep a consistant feel throughout the site.

    Here is an example of what I'm getting when I have minimal content. It's not very nice looking: Example template

    And in Opera, not only does the content division not stretch, but the menu division does, which looks quite bad.

    You can look at my source code. It might be helpful for you to know that what I have listed in the CSS as rightcontent is actually the left and what is named leftcontent is one the right. That's a story in itself, lol - I need to switch those around.

    Anyway, I've been trying forever to get this right and any and all help will be greatly appreciated.

    Thanks so much!

    Kim

  2. #2
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm ... your best bet is JavaScript. I use a centre layers script that collects the window size and then sets the top left corner of the layer accordingly. You could alter the script to do the same, but set the height according to the window size ....

    Here's the code for the centre layer script:

    Code:
    n = (document.layers) ? 1:0
    ie = (document.all) ? 1:0
    
    if (n) {
    	windowWidth = window.innerWidth-16
    	windowHeight = window.innerHeight
    }
    if (ie) {
    	windowWidth = document.body.offsetWidth-20
    	windowHeight = document.body.offsetHeight
    }
    
    document.writeln('<STYLE TYPE="text/css">');
    document.writeln('<\!--');
    document.writeln('#centerLayer {position:absolute; left:'+(windowWidth/2-795/2)+'; top:'+(windowHeight/2-500/2)+'; width:795; height:500; clip:rect(0,795,500,0); z-index:1');
    document.writeln('-->');
    document.writeln('</STYLE>');
    Hopefully you can get the gist of what's going on and amend it to meet your needs.

    G

  3. #3
    SitePoint Member
    Join Date
    Nov 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    I know that there has to be a way to do it without Java script. Another problem I'm having is that that when there is too much content, it overflows the division in Opera and Netscape, like this.

    Any ideas on how to fix this/

    Thanks,

    Kim

  4. #4
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Twilightmama
    I know that there has to be a way to do it without Java script.
    Oh yes? Well you would've thought they'd incorporate some means of centering a layer in a page, but oh no! Even though it seems an obvious requirement .... I wish I had your confidence. If there is then let me know!

    As for the other, on a hunch try adding overflow: visible in the CSS for that layer.

    G


Bookmarks

Posting Permissions

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