Hi everyone! I am trying to understand how do people layout their pages with the page content in a center of the screen. I know how to center the document canvas by using
body
{
text-align: center;
margin: auto;
width=".."
}
style properties. But how to position everything else withing that body with the relationship to the top left corner of the canvas not the window client area. Thank you.CSS-
body
{
text-align: center;
margin-left: auto;
margin-right:auto;
}what you said doesn't do much more then what I said. I know how to center the <body> of the document. But that wasn't my question. I am trying to find out how to position everything else withing that <body> with relationship to the top left corner of the <body> and not the top left corner of the window. You can't use the
position: absolute;
in this case, because it would position the element with the relationship to the top-left corner of the window, not <body>
position: relative;
doesn't do much either. So how in the world people position things when their output is centured.
Thank you.
George.erm can you show what you have nowI really don't have much to show. I am just trying to understand how do people position their elements, such as pictures <div>s and other objects inside of their <body> if their page is being centered using the script above.
For example, if I don't center the <body> I can specify the positin of the image, lets say left:50px, top:100px from the top left corner of the window by using position: absolute. But if I do center the <body> and I want that image to be, let's say, left:50px, top:100px from the top left corner of the <body> how can I do that?
Thank you.
George.Here's the basic HTML and CSS needed to center your layout:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. */
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>Ok, but what if I want to position something inside this <div id=wrapper> lets say, I have an image and I want to it to be displayed 100px from the right border of the <div> and 50px down from the top border. And then I have another image I want to center at the very bottom of the <div> wrapper. Thank you.
GeorgeThat all depends on what you are using the image for. Can you post or link to an example of what you want? If the image directly pertains to the content, then you can use absolute positioning. If it's purely decorative, place the image as a background image instead.But I don't think you can use absolute positioning in this case, because it would position the image with relation to the top-left corner of the client area of the browser, not the top-left corner of the <div id="wrapper">, so if someone has a wide screen, vs regular screen, it would look differentBy giving position: relative; to #wrapper, absolute positioning is done "relative" to the #wrapper.That doesn't sound like true either, because position: relative will cause the element to be offset from it's "original" position as opposed to be offset from the top-left corner of the #wrapper. And the most funny thing is that the original position is determined by the browser, and can be different for different browsers, so that won't do any good either. Does anyone know an answer to my question?
Thank you.
George.Personally I'd use a margin-left etc.Originally posted by etrader_x11
That doesn't sound like true either, because position: relative will cause the element to be offset from it's "original" position...
No no.
I didn't explain myself right. Add position: relative; to the style declarations for #wrapper. Then you can position the image absolutely in respect to the top, left position of #wrapper.Thank you Toicontien this seems to work, at least in IE6 so far. I hope it works in other browsers too. I appreciate all your help.
George.It seems to work only in IE, but it didn't work in Mozilla, Opera or Netscape. Is there a better solution?
Thank you.
George.Never mind! It works. The reason it didn't seem to work in other browsers because Mozilla and Opera don't seem to support
text-align: center;
Thanks again.
George.Internet Explorer supports it wrong. Text-align is used to align just that: text and images. But only in the current document flow (i.e. layer). Once you position an image absolutely, it no longer exists the the pages normal document flow, and is placed in it's own layer. Text-align should not center the image.
Now IE will use text-align to center block level elements like <div>, <p>, <table>, etc, but it's wrong. Setting the left and right margins of a block level element is supposed to be the only way a block element gets centered.
Bottom line when designing CSS layouts: Preview in Firefox and Opera first. Then hack the stylesheets to get things to work in IE because it gets so much of the CSS 2.0 spec wrong.Thank you. That helps a lot.By giving position: relative; to #wrapper, absolute positioning is done "relative" to the #wrapper.
How do I declare properly that something needs to be placed relative to another element?Thanx a ton toicontien,
I got it all working like it shoulkd look... THANX TO YOU!
I'll thank you on my other post too
body
{
text-align: center;
margin: auto;
width=".."
}
style properties. But how to position everything else withing that body with the relationship to the top left corner of the canvas not the window client area. Thank you.CSS-
body
{
text-align: center;
margin-left: auto;
margin-right:auto;
}what you said doesn't do much more then what I said. I know how to center the <body> of the document. But that wasn't my question. I am trying to find out how to position everything else withing that <body> with relationship to the top left corner of the <body> and not the top left corner of the window. You can't use the
position: absolute;
in this case, because it would position the element with the relationship to the top-left corner of the window, not <body>
position: relative;
doesn't do much either. So how in the world people position things when their output is centured.
Thank you.
George.erm can you show what you have nowI really don't have much to show. I am just trying to understand how do people position their elements, such as pictures <div>s and other objects inside of their <body> if their page is being centered using the script above.
For example, if I don't center the <body> I can specify the positin of the image, lets say left:50px, top:100px from the top left corner of the window by using position: absolute. But if I do center the <body> and I want that image to be, let's say, left:50px, top:100px from the top left corner of the <body> how can I do that?
Thank you.
George.Here's the basic HTML and CSS needed to center your layout:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. */
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>Ok, but what if I want to position something inside this <div id=wrapper> lets say, I have an image and I want to it to be displayed 100px from the right border of the <div> and 50px down from the top border. And then I have another image I want to center at the very bottom of the <div> wrapper. Thank you.
GeorgeThat all depends on what you are using the image for. Can you post or link to an example of what you want? If the image directly pertains to the content, then you can use absolute positioning. If it's purely decorative, place the image as a background image instead.But I don't think you can use absolute positioning in this case, because it would position the image with relation to the top-left corner of the client area of the browser, not the top-left corner of the <div id="wrapper">, so if someone has a wide screen, vs regular screen, it would look differentBy giving position: relative; to #wrapper, absolute positioning is done "relative" to the #wrapper.That doesn't sound like true either, because position: relative will cause the element to be offset from it's "original" position as opposed to be offset from the top-left corner of the #wrapper. And the most funny thing is that the original position is determined by the browser, and can be different for different browsers, so that won't do any good either. Does anyone know an answer to my question?
Thank you.
George.Personally I'd use a margin-left etc.Originally posted by etrader_x11
That doesn't sound like true either, because position: relative will cause the element to be offset from it's "original" position...
No no.
I didn't explain myself right. Add position: relative; to the style declarations for #wrapper. Then you can position the image absolutely in respect to the top, left position of #wrapper.Thank you Toicontien this seems to work, at least in IE6 so far. I hope it works in other browsers too. I appreciate all your help.George.It seems to work only in IE, but it didn't work in Mozilla, Opera or Netscape. Is there a better solution?
Thank you.
George.Never mind! It works. The reason it didn't seem to work in other browsers because Mozilla and Opera don't seem to support
text-align: center;
Thanks again.
George.Internet Explorer supports it wrong. Text-align is used to align just that: text and images. But only in the current document flow (i.e. layer). Once you position an image absolutely, it no longer exists the the pages normal document flow, and is placed in it's own layer. Text-align should not center the image.
Now IE will use text-align to center block level elements like <div>, <p>, <table>, etc, but it's wrong. Setting the left and right margins of a block level element is supposed to be the only way a block element gets centered.
Bottom line when designing CSS layouts: Preview in Firefox and Opera first. Then hack the stylesheets to get things to work in IE because it gets so much of the CSS 2.0 spec wrong.Thank you. That helps a lot.By giving position: relative; to #wrapper, absolute positioning is done "relative" to the #wrapper.
How do I declare properly that something needs to be placed relative to another element?Thanx a ton toicontien,
I got it all working like it shoulkd look... THANX TO YOU!
I'll thank you on my other post too