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
    Regular Coder Element's Avatar
    Join Date
    Jul 2004
    Location
    Lynnwood, Washington, US
    Posts
    855
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Div layout positioning problem... please help

    I'm trying to code a layout I recently created, and I may have just sliced it wrong, but I can't seem to get the positioning correct like it should be on the content area so that it stretches to fill the page... Could someone point out what's wrong?

    Here is the layout...
    Last edited by Element; 09-07-2010 at 08:16 AM.

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    I don't want to download anything just to look at your code and I'm sure many people won't, either.

    Can you not just post an optimized image and offer a link to the site?

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #3
    Regular Coder Element's Avatar
    Join Date
    Jul 2004
    Location
    Lynnwood, Washington, US
    Posts
    855
    Thanks
    2
    Thanked 2 Times in 2 Posts
    I actually just realized that while out and came home to upload to my server. Thanks.

    http://view-template.co.cc/gfxcolumn/

    here is a image of what it obviously should look like, I want the height 100%, so the content area should should be able to stretch, and be default take up the entire page (so it doesn't just end...)

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Normally, with a div, you would allow your content to fill out the height and you can use 'margin-bottom' on your last element to give yourself a bit of room below the content. That's the part which encourages you to be flexible with your design, because you can never be sure what height you audience's vieport is. Designs which rely too heavily on container element heights usually have problems. In theory, yes, you should be able to set 'height:100%' but as we're discovering... doesn't always work out. You could, however, set the height to something fairly universal - say, 600px or so. The question you want to ask yourself is why you would need to fill the page with an empty box. You wouldn't, so forget about height and put a nice proportionately long margin at the bottom of your last element.

    There seems to be something wrong with the width - or is that in hand?

    The link to the image is borked. I get some kind of 'search results' come up.

    Dr. V
    Last edited by Doctor_Varney; 09-07-2010 at 03:54 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Right, just looked a bit more closely this time...

    You have the 'content area' set to position:absolute. You don't want to do that. You want to use some floats & margins to shift it into position.

    Appears to me, you've included the header in with that 'content area' which ideally you want in a seperate div of it's own.

    Looking further, it looks as though you have tried to slice the whole thing up instead of generating seperate elements and backgrounds.

    You don't need absolute-positioned divs everywhere. From top to bottom, you want a #header div, a flexible #content div and a #footer div. Then make images which are pertinent to those divisions.

    Did you by any chance use Photoshop to export as HTML?

    Dr. V
    Last edited by Doctor_Varney; 09-07-2010 at 05:24 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #6
    Regular Coder Element's Avatar
    Join Date
    Jul 2004
    Location
    Lynnwood, Washington, US
    Posts
    855
    Thanks
    2
    Thanked 2 Times in 2 Posts
    I figured I might as well start off from ground up. Lol Alright, thanks a lot for the suggestions and help. I'm going to just start from scratch. I just wanted to see if using Photoshop was faster, evidently not.

  • #7
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by Element View Post
    I figured I might as well start off from ground up. Lol Alright, thanks a lot for the suggestions and help. I'm going to just start from scratch. I just wanted to see if using Photoshop was faster, evidently not.
    LOL no! Been there and done that myself... What a disaster!

    One way to think about web design - you said: "I created a layout in Photoshop". Which could be more accurately phrased as: you drew a picture of a webpage, in Photoshop.

    Layout design (as I myself have discovered the hard way) takes more than just using Photoshop. Eventually I found it best to design my layout, code it up in blocks - then create images which bring the layout to life, according to my initial 'picture'.

    Photoshop includes web-design tools which are very powerful, yet in some ways very misleading to the new coder. They make people think you can create whole webpages in one application. It causes an abuse of absolute positioning, outputting not a webpage, but a screen full of inflexible blocked images. A true web page is flexible. In a sense, it is a program.

    Hope that helps. Anyway, good luck!

    Regards

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

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