how do you center a design on the page?

#1

Help...help help.

How do I have the whole design centered on the page - relative to how wide the
user has the window stretched (as in no docked).

I have tried many things and still cannot figure this out - and I'm sure it's
fairly simple?? Yes? No?

Desperately seeking centering *

#2

singindesigner wrote:

Quote:

Help...help help.

How do I have the whole design centered on the page - relative to how wide the
user has the window stretched (as in no docked).

I have tried many things and still cannot figure this out - and I'm sure it's
fairly simple?? Yes? No?

Desperately seeking centering *

Depends.
Have an URL to the site?

--
Dan Vendel - *GOF*
"Eagles may soar, free and proud, but weasels never get sucked into jet
engines."
Contact: http://www.proformica.com/contact.shtml
Call or chat me via Skype ID: danvendel, but DON'T ask questions that
you can ask here! (get Skype at http://skype.com)

#3

I don't have the site online yet...mainly because of this problem, it just
doesn't look right.

I have set everything in a 770 pixel table - 3 of them down the page. I
sliced the graphics up in Photoshop and hand-coded the rest.

I want to use the 'body' tag in my .css file, but there's no way to put the
whole site nicely in the center of the page - what gives?

There's no simple way to just have it <.center>?

If I write in the center tag just under the body tag - I don't get the ease of
use of the .css file across the whole site...but if that's the only way, then
I'll have to do that and use align tags for the text that ends up getting
centered too!

New to .css....so I'm a little clumsy.

Any help with all that info? Or........

Thanks for your reply *

#4

well, I just tested this on mac and it works:

<div style="position: absolute; top: 0; left: 0; width: 100%; height:
100%; background: red;"><div style="position: absolute; top: 25%;
height: 50%; left: 10%; border: 1px solid #fff; width: 80%; background:
blue; margin-left: -20px; margin-top: -20px; padding: 20px;
">content</div></div>

singindesigner wrote:

Quote:

Help...help help.

How do I have the whole design centered on the page - relative to how wide the
user has the window stretched (as in no docked).

I have tried many things and still cannot figure this out - and I'm sure it's
fairly simple?? Yes? No?

Desperately seeking centering *

#5

I wouldn't do it that way at all, Misha. Nested absolutely positioned
inline divs can be problematic.

Try this -

<style type="text/css">

</style>
....
<body>
<div id="wrapper">
the rest of the page content goes here
</div>
</body>

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Misha" <no (AT) no (DOT) com> wrote

Quote:

well, I just tested this on mac and it works:

div style="position: absolute; top: 0; left: 0; width: 100%; height:
100%; background: red;"><div style="position: absolute; top: 25%; height:
50%; left: 10%; border: 1px solid #fff; width: 80%; background: blue;
margin-left: -20px; margin-top: -20px; padding: 20px;
">content</div></div

singindesigner wrote:

Help...help help.

How do I have the whole design centered on the page - relative to how
wide the user has the window stretched (as in no docked).

I have tried many things and still cannot figure this out - and I'm sure
it's fairly simple?? Yes? No?

Desperately seeking centering *

#6

Well I'm realizing that the outer div is not necessary at all (I was
just testing the height: 100% deal). What is the problem with nesting
absolutely positioned divs? Relative positioning?

Murray *TMM* wrote:

Quote:

I wouldn't do it that way at all, Misha. Nested absolutely positioned
inline divs can be problematic.

Try this -

style type="text/css"
!--
body { text-align:center } /* for IE5+ */
#wrapper { width:760px; margin:0 auto; position:relative; test-align:left;}
--
/style
...
body
div id="wrapper"
the rest of the page content goes here
/div><!-- /wrapper --
/body

#7

so just:

<div style="position: absolute; top: 25%; height: 50%; left: 10%;
border: 1px solid #fff; width: 80%; background: blue; margin-left:
-20px; margin-top: -20px; padding: 20px;">content</div>

works fine I think.

Misha wrote:

Quote:

well, I just tested this on mac and it works:

div style="position: absolute; top: 0; left: 0; width: 100%; height:
100%; background: red;"><div style="position: absolute; top: 25%;
height: 50%; left: 10%; border: 1px solid #fff; width: 80%; background:
blue; margin-left: -20px; margin-top: -20px; padding: 20px;
">content</div></div

singindesigner wrote:

Help...help help.

How do I have the whole design centered on the page - relative to how
wide the user has the window stretched (as in no docked).

I have tried many things and still cannot figure this out - and I'm
sure it's fairly simple?? Yes? No?

Desperately seeking centering *

#8

Nope. Negative margins can be trouble, and percent width/height with
positioning is also problematic.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Misha" <no (AT) no (DOT) com> wrote

Quote:

so just:

div style="position: absolute; top: 25%; height: 50%; left: 10%; border:
1px solid #fff; width: 80%; background: blue; margin-left: -20px;
margin-top: -20px; padding: 20px;">content</div

works fine I think.

Misha wrote:

well, I just tested this on mac and it works:

div style="position: absolute; top: 0; left: 0; width: 100%; height:
100%; background: red;"><div style="position: absolute; top: 25%; height:
50%; left: 10%; border: 1px solid #fff; width: 80%; background: blue;
margin-left: -20px; margin-top: -20px; padding: 20px;
">content</div></div

singindesigner wrote:

Help...help help.

How do I have the whole design centered on the page - relative to how
wide the user has the window stretched (as in no docked).

I have tried many things and still cannot figure this out - and I'm
sure it's fairly simple?? Yes? No?

Desperately seeking centering *

#9

I see no problems with mac mozilla, safari, or ie 6. Negative margins
are commonly used to center horizontally (bluerobot recommends one). I
have never had any problems with negative margins. Can you elaborate?

I had always been of the impression that you could not center
vertically, but I think my example disproves that. The problem occurs
when the web page gets taller than the height of the div. But for
centering an image, for example, it works fine.

Murray *TMM* wrote:

Quote:

Nope. Negative margins can be trouble, and percent width/height with
positioning is also problematic.

#10

Hello to you both -

Last night, right when I'm going to sleep, I realized maybe I could set up a
table with % values and set a specific td tag that would mimic the older html
tag of <.*,770,*>

All I want to do is center the entire design ....well, exactly like this page
that we're having this discussion in! This page is centered in the browser
with the background equal on the left and right. That's really all I want to
do.

I didn't think this would that hard.. *

Andrea