Centering CSS Page

#1

I am new to using CSS layouts and have read the posting but am still not able
to get my page centered from left to right. Can someone please help?

my page is posted at: http://home.comcast.net/~millerm23/services.html
my css styles file is posted at: http://home.comcast.net/~millerm23/styles.css

Are the body and html styles interfering with the #wrapper style? Do I have
the auto margins in the wrong place?

Thanks in advance for you
help.http://http://home.comcast.net/~millerm23/services.html

#2

Zeeco,

I am a junior member also. What I know, is what I have read and just got
working today. My reference is a book CSS Mastery, Advanced Web Standards
Solutions (which I have found to be useful)

Looks like you may need a width assigned to your wrapper div.

Keep your wrapper margin: 0 auto.

Also add a text-align:center for the body tag. This is a hack to get IE5 and
IE 6 to center everything because it doesn't just center text. Then text-align
the wrapper div left.

Hope this helps, Sue

#3

Zeeco,

Here is a thread you can find a page or two back in this forum. I copied the
summary that confirms my previous advice and adds the suggestion of conditional
tags. Comment tags for you future reference and other designers working on the
site could also be helpful as indicated in the thread.

Sue

Copied portion of the thread:

Topic Title Centering a DIV Tag
Topic Summary a newbie to div ~having problems aligning
Posted by amar_nath

Centering, using text-align, is only necessary for IE5.x Windows. These
browsers will never be fixed. Deploying a workaround using Conditional
Comments that target only the affected browsers, makes the solution
bulletproof and failsafe. Of course, like anything else, the decision to
address this kind of issue is a personal one. An example of how this
workaround is often applied would be:



The style rules are perfectly proper and Conditional Comments are a
feature built into IE Windows that can be used for many different
things, including targeted CSS workarounds.

--
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

#4

Thanks Sue, I'll check this out later today. I was also wondering if it had to
do with using absolute vs. relative positioning - still not entirely clear on
the difference. I'll check out the book you recommended - I haven't found one
that's really great yet.

#5

This may help you understand positioning a bit -

There are 4 different types of positioning:
Absolute
Relative
Fixed
Static

Here is a brief explanation of each kind of positioning (with regard to
placement of elements on the page only)....

Position:absolute (or A/P elements)
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the* page so that
it can no longer influence the size or position of any other pa*ge element
(except for those contained within it, of course).

2. The absolutely positioned element takes its position from the position of
its closest PA*RENT *positioned* element - in the absence of any explicitly
positioned parent, this will default to the <body> tag, which is always
positioned
*at 0,0 in the browser viewport.

This means that it doesn't matter where in the HTML code the laye*r's code
appears (between <body> and </body>), its location on the screen will not
change (this assumes that you have not positioned the A/P element within
a table or another A/P element, of course). Furthe*rmore, the space in
which
this element would have appeared were it not positi*oned is not preserved
on the screen. In other words, absolutely positioned elements don't take
up any space on the page. In fact, they FLOAT over the page.

Position:relative (or R/P elements)
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from t*he flow of the code on the page, so it will use the
spot
where it would have* appeared based on its position in the code as its
zero point reference. If* you then supply top, right, bottom, or left
positions
to the style for this *element, those values will be used as offsets from
its
zero point.

This means that it DOES matter where in the code the relativ*ely positioned
element appears (, as it will be positioned in that location (*factoring in
the offsets) on the screen (this is true for any placement in the code).
Furthermore, the space where this e*lement would have appeared is
preserved in the display, and can therefore* affect the placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.

Position:static
-------------------
As with relative position, static positions also "go with *the flow". An
element with a static position cannot have values for offset*s (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.

Position:fixed
------------------
A page element with this style will not scroll as the page c*ontent scrolls.
Support for this in elements other than page backgrounds is *quirky

There are several other things you need to know:

1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise, a) it will always begin on a new
line on the screen, and b) it will always force content to a new line below
it, and c) it will always take up the entire width of its container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of other
elements
on the page. For example, a 'layer' placed over a hyperlink will mask that
hyperlink.

You can see a good example of the essential difference between absolute and
relative positioning here -

http://www.great-web-sights.com/g_layersdemo.asp

You can see a good demonstration of why using layers for a page layout tool
is dangerous here -

http://www.great-web-sights.com/g_layer-overlap.asp

--
Murray --- ICQ 71997575
Adobe Community Expert
(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
==================

"zeeco" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

Thanks Sue, I'll check this out later today. I was also wondering if it
had to
do with using absolute vs. relative positioning - still not entirely clear
on
the difference. I'll check out the book you recommended - I haven't found
one
that's really great yet.

#6

Zeeko,

I haven't found one book that is really great either. I have a stack of them.
All have some useful info. And I find they give detailed info on the how to
steps of things but I haven't found a book that helps with the bigger picture
of what strategies to use when, where, and why: The decision making rationale.
So, I've learned lots of ways to accomplish specific things but am struggling
to integrate and choose among the options. Lots of times I travel down the road
to learning something only to find the negative side of it and seek another
path. So, if you find a book or reference that gives more startegy and decision
making rationale, I'd be eager to hear about it.

Sue

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Centering CSS Page

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)

Centering CSS Page - 12-01-2006 , 02:59 PM

Re: Centering CSS Page - 12-01-2006 , 04:37 PM

Re: Centering CSS Page - 12-01-2006 , 04:59 PM

Re: Centering CSS Page - 12-02-2006 , 09:59 AM

Re: Centering CSS Page - 12-02-2006 , 10:09 AM

Re: Centering CSS Page - 12-03-2006 , 01:05 PM