473,320 Members | 1,868 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Center page / absolute positioning

Hi,

I made a site using CSS absolute positioning for all my
content on the page. Now I try to figure out if it is possible
to center the pages without giving up the absolute positioning.

Can somebody please enlighten me if that's possible and if
not what would be the quickest way to accomplish that?

Thanks in advance for your help

Best regards

Thomas
Jul 20 '05 #1
7 13607
Els
Thomas Elser wrote:
Hi,

I made a site using CSS absolute positioning for all my
content on the page. Now I try to figure out if it is possible
to center the pages without giving up the absolute positioning.

Can somebody please enlighten me if that's possible and if
not what would be the quickest way to accomplish that?


By putting the whole lot in a container div, which you give
position:relative;
width: (whatever width it has now);
margin-left:auto;
margin-right:auto;
border:1px solid (color of background);
(this is to prevent the left side of your page slipping off
the screen when the window is narrower than the content in
Gecko browsers)
and give body {text-align:center;}, which I think (but am
not sure) you need for some browsers.
You can give then text-align:left if needed, to the
container div.

Hope I didn't forget any details... :)

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #2
Hi Els,

thanks for your quick answer. Unfortunatelly it is not working.
border:1px solid (color of background);


I changed this to black to see where "he" puts the <div>.
But all I can see is a black line on top of my content ..

I made a <div> with all the CSS you mentioned directly after
the body tag and closed it immediately before the </body>.

Any ideas what I am doing wrong?

Thanks again for your help

Best regards

Thomas

Jul 20 '05 #3
Els

Thomas Elser wrote:
Hi Els,

thanks for your quick answer. Unfortunatelly it is not working.


Sorry, my fault, see below.
border:1px solid (color of background);


I changed this to black to see where "he" puts the <div>.
But all I can see is a black line on top of my content ..

I made a <div> with all the CSS you mentioned directly after
the body tag and closed it immediately before the </body>.

Any ideas what I am doing wrong?


You're not doing anything wrong, it's just that a div
doesn't 'hold' the content inside without you telling it how
high the content is, or else, by adding a clearing element
before the end of the div.
If you add
<div style="clear:both"></div>
just before the closing tag of the container div, it should
then, iirc, stretch to surround the content.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #4
Els <el*********@tiscali.nl> wrote:
Thomas Elser wrote:
I changed this to black to see where "he" puts the <div>.
But all I can see is a black line on top of my content ..

I made a <div> with all the CSS you mentioned directly after
the body tag and closed it immediately before the </body>.

Any ideas what I am doing wrong?


You're not doing anything wrong, it's just that a div
doesn't 'hold' the content inside without you telling it how
high the content is, or else, by adding a clearing element
before the end of the div.
If you add
<div style="clear:both"></div>
just before the closing tag of the container div, it should
then, iirc, stretch to surround the content.


Ahem? The OP has removed all his content by using absolute
positioning, he said, not by using floats.
Jul 20 '05 #5
Els

Karl Smith wrote:
Els <el*********@tiscali.nl> wrote:

Thomas Elser wrote:

I changed this to black to see where "he" puts the <div>.
But all I can see is a black line on top of my content ..

I made a <div> with all the CSS you mentioned directly after
the body tag and closed it immediately before the </body>.

Any ideas what I am doing wrong?


You're not doing anything wrong, it's just that a div
doesn't 'hold' the content inside without you telling it how
high the content is, or else, by adding a clearing element
before the end of the div.
If you add
<div style="clear:both"></div>
just before the closing tag of the container div, it should
then, iirc, stretch to surround the content.


Ahem? The OP has removed all his content by using absolute
positioning, he said, not by using floats.


True...
I use it with floats all the time and was wondering if it
might work here too -> wasn't thinking straight :-(
So he'll have to define the height of that div then...
Sorry for the confusion.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #6
Hi Els,

<div style="clear:both"></div>

that didn't work, but manually adding the height to the
<div> made tit work THANK YOU!

Another question: I made the content of my page so that it would
fit in a browser windows at 1024x768 without showing scrollbars.

Now, with the solution you kindly gave me, scrollbars appear.
I tried to set the margin from auto to absolute values to reduce
the margin, but it is still there. Can I tell the surrounding <div>
to reduce the margins to zero if not needed?

Thanks again for your help

Best regards

Thomas
Jul 20 '05 #7
Els


Thomas Elser wrote:
Hi Els,

<div style="clear:both"></div>

that didn't work,
which I could have foreseen if I'd paid more attention, see
my post in reply to Karl's.
but manually adding the height to the
<div> made tit work THANK YOU!

Another question: I made the content of my page so that it would
fit in a browser windows at 1024x768 without showing scrollbars.

Now, with the solution you kindly gave me, scrollbars appear.
I tried to set the margin from auto to absolute values to reduce
the margin, but it is still there. Can I tell the surrounding <div>
to reduce the margins to zero if not needed?


With margin:auto, they _are_ reduced to zero when not needed.
The horizontal scrollbar may come from anything wider than
the inside of the window, but without the url, I can't even
start to guess what that might be.

On the other hand, let me start to guess anyway:
If it used to fit pixelperfect, it might have to do with the
1px border you have now around your page. In that case,
making your containing div 2px narrower should work.

If it's not that, it might have to do with having positioned
everything absolutely. By that, you take the elements out of
their normal flow. But this is not always recognized by the
scrollbars so to say. If you position an element let's say
top:-200px or left:-200px, and it is smaller than 200px high
or wide, it will be off your screen in most browsers,
without showing scrollbars to get there. This may have
prevented you from having scrollbars earlier on, maybe?

And about pixelperfect: I did that once, and it fitted
exactly in a Netscape or IE browser. Until I viewed it on
someone else's computer which had XP. 3 pixels off.
In Mac browsers, it's probably more pixels off, as there is
a sort of sidebar (from which I've seen through browsercam.com).

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Catherine Lynn Wood | last post by:
I need to know how to overlap DIV content within 'relative' associated rendering. I am building div layers in the middle of a page and when I set positioning to absolute in the CSS, it references...
2
by: Tristan Miller | last post by:
Greetings. I have a two-column web layout, where the first column is just the regular body text with a "marign-right" of 16em, and the second column is an "absolute"-positioned div with a width...
27
by: FL | last post by:
Hi Everyone, I know howto center a block using margin-left: auto ; margin-right: auto ; but I'm trying to center vertically a box, any idea to solve this?
10
by: john T | last post by:
Is there anyway to vertically center a html table using css in such a way it does not alter the html table. When I tryied it just screws up.
16
by: Pierre Jelenc | last post by:
I need to lay out a page with five main elements: A fixed div at the top containing a navigation bar, two side-by-side columns, a centered shopping cart at the bottom, and a full-window fixed div...
2
by: sylvian stone | last post by:
Hi, I'm trying to do something that has always been easy with tables - namely use a three column layout, and above the main layout, show three images - one on the absolute left, one on the absolute...
7
by: Alex | last post by:
Hi Everone, I need some advice on how to setup 4 columns where the outside two are absolute (120px) and the inner two (side by side) are relevent (Fluid) and change with the screen. Here's my...
7
by: ALI-R | last post by:
Hi All, I have two user controls (header and footer) ,,which I've placed in an HTML Table in a page.I set the **align="center"** in the table and the table still is on the left side of the page...
4
by: Dan | last post by:
Hi, I have an asp.net page i have made that creates an invoice based on the invoice id given. It works fine but the problem i have is i now want to loop through my database and grab all the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.