Greetings,
This might only be possible in theory but i was wondering...
is it possible to position what's inside a block element, such as what's inside
a <p>, based upon the master container that it's inside of, like the <body> container,
and NOT the boundaries of the web browser?
I hope that makes sense. I ask this question because i'm trying to center everything
on my webpage so that when the browser is resized by the user everything still remains
centered. But i have a banner, table, and some other images that i'm trying to place
on top of another image and I want ALL of this to be centered.
If it is possible can someone PLEASE post some sample code.
Thank you for your time,
*Nick*i dont fully understand your picture but do you mean something like
text-align:center;
??The text-align property aligns text and inline elements within a block element. You apply this property to a block element and it aligns the inline elements within it. This property is inherited, meaning you can apply this property to the <body> tag and all other block elements get this property, unless you specify otherwise.
Block-level elements, like <p>, <div>, etc, can be centered within other block elements by setting the left and right margins of the centered element to auto.
body {
text-align: center;
}
div#wrapper {
width: 700px;
margin: 0 auto;
text-align: left;
}
The #wrapper <div> will be centered within the body tag. The browser will automatically calculate the left and right margins needed to center the DIV horizontally. The goofy thing is, if the screen is narrower than 700 pixels, the browser will still center #wrapper horizontally by using negative left and right margins. Content on the left and right edges can be cut off and viewers can't scroll sideways to see it. Internet Explorer doesn't have this problem, because yet again, it's not standards compliant. Though it seems to be handy in this case.
The workaround is simple:
body {
background-color: #fff;
text-align: center;
}
#wrapper {
width: 700px;
margin: -1px auto 0 auto;
text-align: left;
border: 1px solid #fff;
}
First, give your body tag a background color. Then add a border to #wrapper with the same color as your background. Standards browsers will slide the layout into view when an auto-margined element has a border. Again, IE-Win doesn't have this problem, but it doesn't hurt.
But since you've added one pixel to the height of the whole DIV, place a negative one pixel top margin to pull the layout up and hide the top border.
You'll also notice the text-align: center; in the body tag. IE5-Win, and IE6-Win in quirks mode, won't center a block element horizontally using auto left and right margins. But they will using text-align - not per standard I might add.
So text-align: center; in the body tag centers #wrapper in IE5/Win and IE6/Win in quirks mode, and the auto left and right margins on #wrapper center that DIV horizontally in standards browsers. The border gets applied to #wrapper so that standards browsers won't bump the layout out of view, and out of the scrollable area, when the window is too narrow to show the whole DIV.
Now place all your page's content inside #wrapper and it will be centered within the window too. If you want to use absolute positioning for some things, add position: relative; to #wrapper. Then setting the left and top properties of an absolutely-positioned element inside #wrapper will cause the element to be positioned in relation to #wrapper.THANK YOU SO MUCHfor your help! I successfully implemented what was once just a theory thanks to your input.
The only annoyance i have is that i wish a border didn't have to be applied to the <DIV> in order for the content within it to display properly in standards compliant browsers.
Thanks again for your help.
*Nick*That's only if the screen is too narrow to display the whole layout. You can also use a transparent background color, but IE doesn't support that and displays a black border instead. So just hide it from IE:
body {
margin: 0;
padding: 0;
text-align: center;
}
#wrapper {
width: 770px;
margin: 0 auto;
text-align: left;
}
html>body #wrapper {
border: 1px solid transparent;
}
This might only be possible in theory but i was wondering...
is it possible to position what's inside a block element, such as what's inside
a <p>, based upon the master container that it's inside of, like the <body> container,
and NOT the boundaries of the web browser?
I hope that makes sense. I ask this question because i'm trying to center everything
on my webpage so that when the browser is resized by the user everything still remains
centered. But i have a banner, table, and some other images that i'm trying to place
on top of another image and I want ALL of this to be centered.
If it is possible can someone PLEASE post some sample code.
Thank you for your time,
*Nick*i dont fully understand your picture but do you mean something like
text-align:center;
??The text-align property aligns text and inline elements within a block element. You apply this property to a block element and it aligns the inline elements within it. This property is inherited, meaning you can apply this property to the <body> tag and all other block elements get this property, unless you specify otherwise.
Block-level elements, like <p>, <div>, etc, can be centered within other block elements by setting the left and right margins of the centered element to auto.
body {
text-align: center;
}
div#wrapper {
width: 700px;
margin: 0 auto;
text-align: left;
}
The #wrapper <div> will be centered within the body tag. The browser will automatically calculate the left and right margins needed to center the DIV horizontally. The goofy thing is, if the screen is narrower than 700 pixels, the browser will still center #wrapper horizontally by using negative left and right margins. Content on the left and right edges can be cut off and viewers can't scroll sideways to see it. Internet Explorer doesn't have this problem, because yet again, it's not standards compliant. Though it seems to be handy in this case.
The workaround is simple:
body {
background-color: #fff;
text-align: center;
}
#wrapper {
width: 700px;
margin: -1px auto 0 auto;
text-align: left;
border: 1px solid #fff;
}
First, give your body tag a background color. Then add a border to #wrapper with the same color as your background. Standards browsers will slide the layout into view when an auto-margined element has a border. Again, IE-Win doesn't have this problem, but it doesn't hurt.
But since you've added one pixel to the height of the whole DIV, place a negative one pixel top margin to pull the layout up and hide the top border.
You'll also notice the text-align: center; in the body tag. IE5-Win, and IE6-Win in quirks mode, won't center a block element horizontally using auto left and right margins. But they will using text-align - not per standard I might add.
So text-align: center; in the body tag centers #wrapper in IE5/Win and IE6/Win in quirks mode, and the auto left and right margins on #wrapper center that DIV horizontally in standards browsers. The border gets applied to #wrapper so that standards browsers won't bump the layout out of view, and out of the scrollable area, when the window is too narrow to show the whole DIV.
Now place all your page's content inside #wrapper and it will be centered within the window too. If you want to use absolute positioning for some things, add position: relative; to #wrapper. Then setting the left and top properties of an absolutely-positioned element inside #wrapper will cause the element to be positioned in relation to #wrapper.THANK YOU SO MUCHfor your help! I successfully implemented what was once just a theory thanks to your input.
The only annoyance i have is that i wish a border didn't have to be applied to the <DIV> in order for the content within it to display properly in standards compliant browsers.
Thanks again for your help.
*Nick*That's only if the screen is too narrow to display the whole layout. You can also use a transparent background color, but IE doesn't support that and displays a black border instead. So just hide it from IE:
body {
margin: 0;
padding: 0;
text-align: center;
}
#wrapper {
width: 770px;
margin: 0 auto;
text-align: left;
}
html>body #wrapper {
border: 1px solid transparent;
}