...

View Full Version : Div layout positioning problem... please help



Element
09-07-2010, 12:54 AM
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... (http://view-template.co.cc/gfxcolumn/)

Doctor_Varney
09-07-2010, 03:34 AM
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

Element
09-07-2010, 07:10 AM
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 (http://view-template.co.cc/gfxcolumn/gfxcv2light_demo2.png) 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...)

Doctor_Varney
09-07-2010, 01:19 PM
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

Doctor_Varney
09-07-2010, 01:41 PM
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

Element
09-08-2010, 12:53 AM
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.

Doctor_Varney
09-08-2010, 08:49 AM
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! :D 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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum