Dreamweaver - css site design not centering

Author

css site design not centering

15266

2005-07-29, 7:17 pm

I have used:

position: relative;
margin-left: auto;
margin-right: auto;
text-align: left;

in my holder div (which contains all the content and design of the page), in
order to center the design in browsers.

Since I added another holder (which contains some outer - shading styles) the
page no longer centers in firefox or netscape.

The site can be seen at http://www.munzamedia.co.uk/testsite/index.htm

Any ideas as to why?

Thanks,
Mark

Travis

2005-07-29, 7:17 pm

add it to your #outerholder

Travis
***************************************
Free Templates, Javascript, Fonts & More. - http://www.webblobber.com
Premium Templates - http://www.webblobber.com/templates/premium/
Tutorials - http://www.webblobber.com/tutorials/
***************************************

15266 wrote:
> I have used:
>
> position: relative;
> margin-left: auto;
> margin-right: auto;
> text-align: left;
>
> in my holder div (which contains all the content and design of the page), in
> order to center the design in browsers.
>
> Since I added another holder (which contains some outer - shading styles) the
> page no longer centers in firefox or netscape.
>
> The site can be seen at http://www.munzamedia.co.uk/testsite/index.htm
>
> Any ideas as to why?
>
> Thanks,
> Mark
>

Murray *TMM*

2005-07-29, 7:17 pm

A div is a block tag. As such it occupies the full width of its container.
If the container is the whole page, and if the div occupies the full width,
it cannot center, capiche?

Add -

width:760px

to your styles and see what happens.

By the way, you would only need that position:relative if you are trying to
also center internal absolutely positioned elements. If you are not doing
that, you can eliminate this style.

--
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
==================

"15266" <webforumsuser@macromedia.com> wrote in message
news:dcdbcg$eo5$1@forums.macromedia.com...
>I have used:
>
> position: relative;
> margin-left: auto;
> margin-right: auto;
> text-align: left;
>
> in my holder div (which contains all the content and design of the page),
> in
> order to center the design in browsers.
>
> Since I added another holder (which contains some outer - shading styles)
> the
> page no longer centers in firefox or netscape.
>
> The site can be seen at http://www.munzamedia.co.uk/testsite/index.htm
>
> Any ideas as to why?
>
> Thanks,
> Mark
>

fobi

2005-07-29, 7:19 pm

Hi,you need that :
<BODY>
<div align="center">
<DIV id=outerholder>
<DIV id=leftshader>
<DIV id=rightshader>
................................
</div></BODY></HTML>
For the text, maybe you need to make new class for his align

.: Nadia :. *TMM*

2005-07-29, 7:19 pm

#outerholder{
width: 760px;
margin: 0 auto;
}

see if the above works for you

--
Nadia
--------------------------------------------
Templates | CSS Templates | http://www.DreamweaverResources.com
Dropdown Menu Designs | SEO Articles |Tutorials
Web: http://www.perrelink.com.au
---------------------------------------------
Team MM Volunteer for Dreamweaver
http://tinyurl.com/aa3ne
MM Dreamweaver Tutorials
http://macromedia.com/devnet/mx/dreamweaver/
---------------------------------------------

"15266" <webforumsuser@macromedia.com> wrote in message
news:dcdbcg$eo5$1@forums.macromedia.com...
>I have used:
>
> position: relative;
> margin-left: auto;
> margin-right: auto;
> text-align: left;
>
> in my holder div (which contains all the content and design of the page),
> in
> order to center the design in browsers.
>
> Since I added another holder (which contains some outer - shading styles)
> the
> page no longer centers in firefox or netscape.
>
> The site can be seen at http://www.munzamedia.co.uk/testsite/index.htm
>
> Any ideas as to why?
>
> Thanks,
> Mark
>

15266

2005-07-29, 7:19 pm

Thanks all for you ideas.

I tried changing the holder to a width of 760, but I can' see the logic in
that - it just messed up the whole layout of the page.

Fobi - that was the best suggestion yet - this worked. The problem is that the
solution you offered only works for 1 page, meaning I would have to enter that
code into all my html pages.

Is there not a way I can define your 'div align = center' into my css style
sheet somehow? - That way all pages would relflect the changes.

Anyway,
Thanks for the help guys.

.: Nadia :. *TMM*

2005-07-29, 7:19 pm

"15266" <webforumsuser@macromedia.com> wrote in message
news:dcdfsa$lml$1@forums.macromedia.com...
> Thanks all for you ideas.
>
> I tried changing the holder to a width of 760, but I can' see the logic in
> that - it just messed up the whole layout of the page.
>
> Fobi - that was the best suggestion yet - this worked. The problem is that
> the
> solution you offered only works for 1 page, meaning I would have to enter
> that
> code into all my html pages.
>
> Is there not a way I can define your 'div align = center' into my css
> style
> sheet somehow? - That way all pages would relflect the changes.

did you try and add the margin: 0 auto; to the #outholder div

Murray *TMM*

2005-07-29, 7:19 pm

I gave the logic in my previous post. You can't center a block tag without
knowing how wide it is.

--
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
==================

"15266" <webforumsuser@macromedia.com> wrote in message
news:dcdfsa$lml$1@forums.macromedia.com...
> Thanks all for you ideas.
>
> I tried changing the holder to a width of 760, but I can' see the logic in
> that - it just messed up the whole layout of the page.
>
> Fobi - that was the best suggestion yet - this worked. The problem is that
> the
> solution you offered only works for 1 page, meaning I would have to enter
> that
> code into all my html pages.
>
> Is there not a way I can define your 'div align = center' into my css
> style
> sheet somehow? - That way all pages would relflect the changes.
>
> Anyway,
> Thanks for the help guys.
>

15266

2005-07-29, 7:19 pm

Nadia - thanks , this worked with a little modifying. The key to it was using
your 'margin: 0 auto;' - I am not sure why, but it works!

I had to change the width back to 720px instead of the suggested 760px though.
This is because #outerholder contains divs on either side of it which 'draw'
the shading parts to both sides of the design.

When I used 760px, the shading graphics became separated from the design.

Thanks all for the suggestions,
Mark

Murray *TMM*

2005-07-29, 7:19 pm

margin:0 auto is CSS shorthand for -

margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;

and it tells the browser to use 0px for the top and bottom margin, and to
take whatever is left on the horizontal space and allocate it evenly between
left and right - of course, it needs to know the width to be able to do
this. That's why assigning a width is also essential.

--
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
==================

"15266" <webforumsuser@macromedia.com> wrote in message
news:dcdith$qdk$1@forums.macromedia.com...
> Nadia - thanks , this worked with a little modifying. The key to it was
> using
> your 'margin: 0 auto;' - I am not sure why, but it works!
>
> I had to change the width back to 720px instead of the suggested 760px
> though.
> This is because #outerholder contains divs on either side of it which
> 'draw'
> the shading parts to both sides of the design.
>
> When I used 760px, the shading graphics became separated from the design.
>
> Thanks all for the suggestions,
> Mark
>