August 2, 200818 yr So i just designed a site using layers (div tags) and absolute positioning . On the computer i was using to build it , it all looks lovely and loads up fine. However when I moved onto my mac to take a look (this has a different screen resolution) I realize that my page is all off to the right yet on my laptop it is in the dead centre of the page. I put this down to the absolute positioning I have done. All I can think that would help and this is assumption . I should be able to make a container div that is centered by css and then absolute position my other (layers) div tags within it? So if this is possible or anyone knows a fix could you please let me know? It would be extremely nice to learn how to sort this issue out. I can see why it is happening but relative positioning on each layer I don't believe will be a good move. Your thoughts are appreciated Thanks
August 2, 200818 yr just place everything in a centered wrapper: #wrapper { width:800px; display:block; margin:0 auto; } Use your own layout width of course. L.E.: If you still want to absolute(or relative) position your divs you can just add position:relative; to the above css. The child relative or absolute divs will trigger from the wrapper (and not the body).
August 4, 200818 yr Author That sounds like it will work , how do i place my existing within this new wrapper layer? i'll pay £5 via paypal that makes a video or a print screened walkthrough for me. Thanks
August 4, 200818 yr Mihai has explained it all really. There isn't much more to add. After your opening <body> tag put this <div id="wrapper"> and put this just before your </body> tag </div> Then in your css put this body { text-align:center; } #wrapper { text-align:left; width:800px; /* set this width to the screen resolution that the layout was working in */ margin:0 auto; position:relative; }
August 4, 200818 yr Why are you using absolute positioning? Many layouts can be done without the use of absolute positioning...
August 5, 200818 yr Author Oh wow that was actually really simple, Thanks for putting it into plain english. Just in answer to the absolute positioning question there were 2 graphical elements (The Logos) that are PNG's with transparent backgrounds. I had tried every way i could think to make them load up in the right place ( I wanted them to overlap the nav areas). The absolute positioning works great and now the site loads perfectly in the middle thanks to everyones help. May I suggest this post gets to stay ? It's such a simple little thing that I couldn't get my head around. I have only recently waved goodbye to tables as I was brought up with a pretty old school method of making websites ( That's what A Level I.C.T does to you) Thanks for all the help anyway. And hello Css and Div Tags
Create an account or sign in to comment