Div positioning problem

They have: 7 posts

Joined: May 2004

Alright .. I am trying to build a site with a friend, here is the link of the page I'm having trouble with: http://www.hostultra.com/~dissociatives/main2.html

I am using a div style code for the positioning of the header and the big img, but my friend has a resolution of 800 x 600, and when he looks at the page, the images are not positioned correctly, while they are for me.

I know it's because of the different desktop resolutions, but I was wondering if there was a code that could make it have the same position specifications whether in a 800 x 600 resolution or higher.

Thanks .. Wink

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

Remove the extra HTML comment tags, you only need it straight after the and just before - don't know if that will do much though.

I don't see any DIVs

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

You can't have anything except for the DOCTYPE before -- move that JavaScript into the tag.

And there aren't any DIVs, lol... More explanation?

They have: 7 posts

Joined: May 2004

Haha, well, I was originally going to do that, but I can't find a trick ro anything that would make it work, and in my frustration -- I deleted it and decided to do something else. Sad

Though, an suggestions on the subject would be wonderful, because I still plan on making a site with div layers ...

The original code for that was:

<div style="position: absolute; left: 110px; top: 200px;"><img src="/img/news01.jpg" border=0> ... </div>'

the script above the html tag was put on by the hostutra.com, so I can't really get rid of that .. unfortunately.

I did everything I normally do, but is there a special text I have to put in or anything that will make the positioning of --really-- anything stay the same in all resolutions? Or am I dreaming of something not yet thought of? lol

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Using absolute positioning is going to drive you mental if you don't learn what you're doing. Layout the page sensibly first.

This will be stacked:

<div><img></div>
<div><img></div>
'

If you want them side by side, you can float them instead. If you want them to be with those left and top edges, you can do this (relative):

<head>
<style type="text/css">
#header {
    margin-left: 110px;
    margin-top: 200px;
    }
</style>
</head>

<body>
<div id="header"><img src="/img/news01.jpg" /></div>
</body>
'

However, you have it currently centered... If you want it to be centered:

<head>
<style type="text/css">
#header {
    margin: 0 auto;
    /* this is for IE/PC */
    text-align: center;
    }
</style>
</head>

<body>
<div id="header"><img src="/img/news01.jpg" /></div>
</body>
'

To get centering to work right in IE may take some other fussing -- validate, validate, validate and then do research on the other CSS. CSS doesn't excuse you from having a sensible document structure, but rather it relies on it, so make sure the page makes sense *without* CSS, then apply it.

They have: 7 posts

Joined: May 2004

thankyou so much, I'll try that.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.