I have a web site made mostly from a template, but some pages
are just made with layers not from a template. I would like to have
my page centered when viewed in a browser. Right now when I preview
in dreamweaver, all the pages are justified to the left. Any ideas?
ThanksCentering Pages in Browser
On Tue, 27 Mar 2007 23:10:49 +0000 (UTC), ''geragotelis''
%26lt;webforumsuser@macromedia.com%26gt; wrote:
%26gt;I have a web site made mostly from a template, but some
pages are just made
%26gt;with layers not from a template. I would like to have my
page centered when
%26gt;viewed in a browser. Right now when I preview in
dreamweaver, all the pages
%26gt;are justified to the left. Any ideas?
%26gt; Thanks
show us the code or a link to the site - otherwise we are
just
guessing
--
~Malcolm N....
~
Centering Pages in Browser
Change this -
%26lt;/head%26gt;
to this -
%26lt;style type=''text/css''%26gt;
%26lt;!--
body { text-align:center; }
#wrapper { text-align:left; width:760px; margin:0
auto;position:relative; }
/* 760px will display on an 800px screen maximized browser
window without */
/* horizontal scrollbars. */
--%26gt;
%26lt;/style%26gt;
%26lt;/head%26gt;
change this -
%26lt;body ...%26gt;
to this -
%26lt;body ...%26gt;
%26lt;div id=''wrapper''%26gt;
and this -
%26lt;/body%26gt;
to this -
%26lt;!-- /wrapper --%26gt;
%26lt;/div%26gt;
%26lt;/body%26gt;
and see if that helps.
--
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 %26amp; Resources
http://www.dwfaq.com - DW FAQs,
Tutorials %26amp; Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
''geragotelis'' %26lt;webforumsuser@macromedia.com%26gt; wrote in
message
news:euc89p$ire$1@forums.macromedia.com...
%26gt;I have a web site made mostly from a template, but some
pages are just made
%26gt; with layers not from a template. I would like to have my
page centered
%26gt; when
%26gt; viewed in a browser. Right now when I preview in
dreamweaver, all the
%26gt; pages
%26gt; are justified to the left. Any ideas?
%26gt; Thanks
%26gt;
Do you mean the template code? Sorry, I'm new at this. What
code do you need to see?
I don't know if geragotelis has the same question I have, but
maybe. I'm sort of new to Dreamweaver, and can figure out how to
center a table to a page, but how about a layer? How do you center
a layer so that it will actually appear in the center of all
browsers? About the best I can do is guess the percentage from the
left. Isn't there an easy way as with centering tables?
Hi,
Using css there are two techniques that I use to center a
design. The choice is a matter of preference but both do the job
well enough.
Start by wrapping your entire content in a div and name it
something semantic, like ''wrapper''. The code shouls look like this:
%26lt;body%26gt;
%26lt;div id=''wrapper''%26gt;%26lt;/div%26gt;
%26lt;/body%26gt;
Then add the following css to center the content.
#wrapper{
width: 720px;
margin: 0 auto;
}
The width is whatever you require based on your design. The
margin uses 0 for the top and bottom margin values and auto to
center the wrapper in the browser viewport. Win IE does not behave
as it should here and pre V7 browsers when in quirks mode will not
apply the auto margins setting. IE also misunderstands text-align:
center; it basically centers everything including the text when you
use this. However, you can use this to your advantage but centering
everything in the body tag with text-align: center; You can then
set the text alignment back to the left by adding text-align: left;
to the #wrapper, like this:
#wrapper{
width: 720px;
margin: 0 auto;
text-align: left;
}
The body css looks like this:
body{
text-align: center;
}
This code is is hack but no too intrusive. However, if you
don't want to use a hack then you can use the second option, which
uses relative positioning and margin settings to center the page.
Here is the code:
#wrapper{
width: 720px;
position: relative;
left: 50%
}
This code sets the left edge of the wrapper 50% across the
viewport, or in other words in the center of the viewport. To get
the page centered you apply a negative margin to the wrapper that
is half the total width of the wrapper. In this example that is
margin-left: -360px;
The complete code looks like this:
#wrapper{
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
Nick Barling
www.barkingweb.com
No need to do all that. You can do it without hacks....
--
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 %26amp; Resources
http://www.dwfaq.com - DW FAQs,
Tutorials %26amp; Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
''Nick Barling'' %26lt;webforumsuser@macromedia.com%26gt; wrote in
message
news:eucapb$lot$1@forums.macromedia.com...
%26gt; Hi,
%26gt;
%26gt; Using css there are two techniques that I use to center
a design. The
%26gt; choice
%26gt; is a matter of preference but both do the job well
enough.
%26gt;
%26gt; Start by wrapping your entire content in a div and name
it something
%26gt; semantic,
%26gt; like ''wrapper''. The code shouls look like this:
%26gt;
%26gt; %26lt;body%26gt;
%26gt; %26lt;div id=''wrapper''%26gt;%26lt;/div%26gt;
%26gt; %26lt;/body%26gt;
%26gt;
%26gt; Then add the following css to center the content.
%26gt;
%26gt; #wrapper{
%26gt; width: 720px;
%26gt; margin: 0 auto;
%26gt; }
%26gt;
%26gt; The width is whatever you require based on your design.
The margin uses 0
%26gt; for
%26gt; the top and bottom margin values and auto to center the
wrapper in the
%26gt; browser
%26gt; viewport. Win IE does not behave as it should here and
pre V7 browsers
%26gt; when in
%26gt; quirks mode will not apply the auto margins setting. IE
also
%26gt; misunderstands
%26gt; text-align: center; it basically centers everything
including the text
%26gt; when
%26gt; you use this. However, you can use this to your
advantage but centering
%26gt; everything in the body tag with text-align: center; You
can then set the
%26gt; text
%26gt; alignment back to the left by adding text-align: left;
to the #wrapper,
%26gt; like
%26gt; this:
%26gt;
%26gt; #wrapper{
%26gt; width: 720px;
%26gt; margin: 0 auto;
%26gt; text-align: left;
%26gt; }
%26gt;
%26gt; The body css looks like this:
%26gt;
%26gt; body{
%26gt; text-align: center;
%26gt; }
%26gt;
%26gt; This code is is hack but no too intrusive. However, if
you don't want to
%26gt; use
%26gt; a hack then you can use the second option, which uses
relative positioning
%26gt; and
%26gt; margin settings to center the page. Here is the code:
%26gt;
%26gt; #wrapper{
%26gt; width: 720px;
%26gt; position: relative;
%26gt; left: 50%
%26gt; }
%26gt;
%26gt; This code sets the left edge of the wrapper 50% across
the viewport, or in
%26gt; other words in the center of the viewport. To get the
page centered you
%26gt; apply
%26gt; a negative margin to the wrapper that is half the total
width of the
%26gt; wrapper.
%26gt; In this example that is margin-left: -360px;
%26gt;
%26gt; The complete code looks like this:
%26gt;
%26gt; #wrapper{
%26gt; width: 720px;
%26gt; position: relative;
%26gt; left: 50%;
%26gt; margin-left: -360px;
%26gt; }
%26gt;
%26gt; Nick Barling
%26gt; www.barkingweb.com
%26gt;
Hi,
Referring to Murry's quote ''No need to do all that. You can
do it without hacks''.
Please read the entire thread. I offered two solutions, one
of which does not use hacks.
Also, the ''no need to do all that'' seems an odd comment if it
refers to either of my code snippets. Both snippets are short and
will validate. Please let me see any css that you may have that
achieves the same thing with less code. I am always open to new and
exciting ways of achieving great things with minimal css.
Nick Barling
You say their are two ways to do it, but only one of the ways
you present
will work if there are absolutely positioned elements
involved.
You say the final state for this method is this -
The complete code looks like this:
#wrapper{
width: 720px;
text-align:left;
position: relative;
left: 50%;
margin-left: -360px;
}
I say that the better way is -
#wrapper{
width: 720px;
text-align:left;
position: relative;
margin:0 auto;
}
No left:50%, no negative margins. So, no need to do all that.
--
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 %26amp; Resources
http://www.dwfaq.com - DW FAQs,
Tutorials %26amp; Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
''Nick Barling'' %26lt;webforumsuser@macromedia.com%26gt; wrote in
message
news:eucf8r$r75$1@forums.macromedia.com...
%26gt; Hi,
%26gt;
%26gt; Referring to Murry's quote ''No need to do all that. You
can do it without
%26gt; hacks''.
%26gt;
%26gt; Please read the entire thread. I offered two solutions,
one of which does
%26gt; not
%26gt; use hacks.
%26gt;
%26gt; Also, the ''no need to do all that'' seems an odd comment
if it refers to
%26gt; either
%26gt; of my code snippets. Both snippets are short and will
validate. Please
%26gt; let me
%26gt; see any css that you may have that achieves the same
thing with less code.
%26gt; I
%26gt; am always open to new and exciting ways of achieving
great things with
%26gt; minimal
%26gt; css.
%26gt;
%26gt; Nick Barling
%26gt;
Win IE pre v7 in quirks mode does not apply auto margin
settings correctly. Are you implying in your code snippet that by
positioning the wrapper relatively this will cause pre V7 Win IE
browsers to render the auto margin setting correctly?
Saying that only one of my examples works when absolute
positioning is involved is misleading.
I fully understand that absolutely positioned elements take
their positioning reference point from their nearest positioned
ancestor and, indeed, if the designer wished to absolutely position
an element/s using the wrapper div as a reference point then that
wrapper div would need to be positioned. However, to center a
design as I described in my first snippet works perfectly within
the context of a simple case of centering the wrapper as I
described. One could quite easily absolutely position any number of
elements within other positioned elements within the wrapper div if
they so wished.
As an aside I think it is also worth pointing out to the less
capable fledgling css coders the reasoning behind any suggested
solutions as well as any known references that may help understand
the more intricate details of css. I have certainly, in the past,
found out the hard way how many seemingly simple css code additions
had a fundamental effect on my designs way beyond the issue that I
was trying to solve at hand. I have come to appreciate any advice
that also contains detail and reasoning/implications on the code
that is offered as a solution.
I am not suggesting that you do not do this but merely that
we all should offer reasoning/implications/considerations in our
code offerings.
My final point is to say that I don't think there is a better
way, in the context of what you offer in preference to my solution.
I would say that they are different and really make not a lot of
difference to the designer. You pays your money and you makes your
choice!
Nick Barling
%26gt; Win IE pre v7 in quirks mode does not apply auto margin
settings
%26gt; correctly.
%26gt; Are you implying in your code snippet that by
positioning the wrapper
%26gt; relatively this will cause pre V7 Win IE browsers to
render the auto
%26gt; margin
%26gt; setting correctly?
No. I neglected to mention the need for the body {
text-align:center; }.
--
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 %26amp; Resources
http://www.dwfaq.com - DW FAQs,
Tutorials %26amp; Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
''Nick Barling'' %26lt;webforumsuser@macromedia.com%26gt; wrote in
message
news:eue9u1$a7q$1@forums.macromedia.com...
%26gt; Win IE pre v7 in quirks mode does not apply auto margin
settings
%26gt; correctly.
%26gt; Are you implying in your code snippet that by
positioning the wrapper
%26gt; relatively this will cause pre V7 Win IE browsers to
render the auto
%26gt; margin
%26gt; setting correctly?
%26gt;
%26gt; Saying that only one of my examples works when absolute
positioning is
%26gt; involved is misleading.
%26gt; I fully understand that absolutely positioned elements
take their
%26gt; positioning
%26gt; reference point from their nearest positioned ancestor
and, indeed, if the
%26gt; designer wished to absolutely position an element/s
using the wrapper div
%26gt; as a
%26gt; reference point then that wrapper div would need to be
positioned.
%26gt; However, to
%26gt; center a design as I described in my first snippet works
perfectly within
%26gt; the
%26gt; context of a simple case of centering the wrapper as I
described. One
%26gt; could
%26gt; quite easily absolutely position any number of elements
within other
%26gt; positioned
%26gt; elements within the wrapper div if they so wished.
%26gt;
%26gt; As an aside I think it is also worth pointing out to the
less capable
%26gt; fledgling css coders the reasoning behind any suggested
solutions as well
%26gt; as
%26gt; any known references that may help understand the more
intricate details
%26gt; of
%26gt; css. I have certainly, in the past, found out the hard
way how many
%26gt; seemingly
%26gt; simple css code additions had a fundamental effect on my
designs way
%26gt; beyond the
%26gt; issue that I was trying to solve at hand. I have come to
appreciate any
%26gt; advice
%26gt; that also contains detail and reasoning/implications on
the code that is
%26gt; offered as a solution.
%26gt;
%26gt; I am not suggesting that you do not do this but merely
that we all should
%26gt; offer reasoning/implications/considerations in our code
offerings.
%26gt;
%26gt; My final point is to say that I don't think there is a
better way, in the
%26gt; context of what you offer in preference to my solution.
I would say that
%26gt; they
%26gt; are different and really make not a lot of difference to
the designer.
%26gt; You
%26gt; pays your money and you makes your choice!
%26gt;
%26gt; Nick Barling
%26gt;
%26gt;
%26gt;
Nick, I used the second option - easy to implement and works
like a charm.
Thanks,
Ed DiTomas
Subscribe to:
Post Comments
(Atom)
No comments:
Post a Comment