Apologies if this has been asked elsewhere - perhaps you'd be kind enough to point me to the relevant thread if it has:
I have a web page template with four distinct vertical sections (menubar, submenubar, content, footer)
I want them absolutely positioned vertically, so that there are no gaps etc. and I'm using <DIV> to separate and position each section, with position: absolute and top: [value] attributes.
However ... I would like the whole page centered horizaontally (therefore based on the browser window width).
Is there such a way of doing this? It won't work with an align="center" tag in the DIV itself as it's overriden by the 'absolute' positioning in the style sheet file (even if no "left" attribute is specified). At least, that seems to be the case.
The only convoluted and messy way I thought, if there is no style sheet way, is to use Javascript to check the browser window width, then dynamically generate the CSS DIV absolute positioning based on that - euch!
Obviously, a CSS-based solution would be much better!
Thanks in advance for your feedback
Andy<style type="text/css">
.col {border: 1pt solid black; position: absolute; top: 0px; width: 25%; height: 100%;}
</style>
<div class="col" style="left: 0px; background-color: #FFFFC0">This is DIV 1</div>
<div class="col" style="left: 25%; background-color: red">This is DIV 2</div>
<div class="col" style="left: 50%; background-color: blue">This is DIV 3</div>
<div class="col" style="left: 75%; background-color: green">This is DIV 4</div>The DIVs don't touch, but it's a start.Apologies - I now realise that I've explained what I want really badly! Mixed up horizontal and vertical and my question is ambiguous.
Let me try again!
I have a web page template with a width of 750 pixels (ie horizontal, left to right)
Within this template, there are four distinct *horizontal* sections, the bottom of each section touches the top of the next section: i.e.:
-------------------------------
Section 1 menubar
-------------------------------
Section 2 submenubar
-------------------------------
Section 3 content
-------------------------------
Section 4 footer
<------------------------------>
750 pixels
So, section 1 at the moment is: postiion: absolute; left: 5px; top: 5px; (to allow for some margin)
if section 1 is 100 pixels high, then section 2 is defined as: position: absolute; left: 5px; top: 105px;
and so on down to section 4, with appropriate vertical measurements.
But, of course, it's far over to the left. Even percentages don't help in the 'left' attrbiute as the browser window width is unknown, but the actual width of the content is static (ie it doesn't stretch/expand with increased browser width, it should just move to be centered but still at 750px width)
Should I be using relative positioning instead? Would this allow the use of the 'align="center"' attribute in the <DIV> tag itself?
I hope that explained it a little better.
AndyThe style "align: left" only affects things inside the object, not where the object is positioned.
Don't use absolute positioning at all. DIVs will naturally flow that way.<div style="width: 750; height: 100; background-color: #FFFFC0">This is div 1</div>
<div style="width: 750; height: 120; background-color: red">This is div 2</div>
<div style="width: 750; height: 80; background-color: blue">This is div 3</div>
<div style="width: 750; height: 120; background-color: green">This is div 4</div>You are thinking way too hard.You are thinking way too hard.
Not surprising!
OK I'll try that - although I did try it before and there were vertical gaps between the sections which is not what I want. Is it worth using relative and specifying top: 0 or should I just leave it alone and put it down to (as usual) different browsers rendering slightly differently?Is it worth using relative and specifying top: 0It would probably be better (and more repeatable) to specify the margins of the BODY tag to be 0. Even if you specify relative and 0, you are still offset inside the container.Hmmmm....
Or there's always: body { width: 100%; text-align: center; } which seems to work fine!!! Doh!
Thanks for your replies, gil.Originally posted by andymerrett
Or there's always: body { width: 100%; text-align: center; } which seems to work fine!!! Doh!
Works only in IE because of a bug.
Couple of ways I can think of:
1. div {width: 750px; left: 50%; margin-left: -375px}
2. div {text-align: center; left: auto; right: auto}
I'd prefer #1.Hi,
If you have absolutely positioned elements in your page and you want to centre the page then you will need to surround the page in a div that has a value for the property "position" other than static. If no such ancestor exists, then the containing block is the root element of the document (i.e. the html element).
Basically that means that any absolutely positioned elements will be offset from the html element and not the div that you are centering.
Therefore in your surrounding div (as pointed out in option 2 above post) you need to add position: relative; to the surrounding div which will then force any descendant absolutely positioned elements to be placed absolutely from the top left of the centreing div.
e.g.
<style type="text/css" media="screen">
.centre {
width: 750px;
margin-right: auto;
margin-left: auto;
position: relative;
text-align: center;
}
</style>
& then in the body :
<div class="centre">
<all your other divs and content etc.......>
</div>
Hope this helps
PaulI'd like very much to use style positioning but, since support for positioning tags is (afaik) limited to IE 5.5+ and Netscape 6, I'm not sure if it's time to make the switch from tables.since support for positioning tags is (afaik) limited to IE 5.5+ and Netscape 6I think you should do some serious research. Positioning has been available since version 4 browsers and CSS1.<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/academy/browser_support/page_layout.html">http://www.westciv.com/style_master/aca ... ayout.html</a><!-- m -->
Is this incorrect?
I would like to use style for layout more.Originally posted by McGruff
Is this incorrect?
No, its correct. However, the support for CSS is much better than what "partial" and "buggy" would imply. The only real pain in the butt is NS4.x, which positions some divs correctly, while messes up others.
I especially find it quite queer that people use javascript popup menus but are averse to using CSS (both have issues with 4- browsers).
I also find it queer that ppl find learning javascript easier than CSS.
I also find it queer that people are willing to use browser workarounds for javascripts but can't digest that CSS-rendering engines of various browsers differ from one another (read buggy).
And finally, I also find it queer that my own website uses tables. But thats becoz I am lazy. Well, so is rest of the world. Or is it?BTW, who made me "Supreme Master of the Web"? I like the title.It comes with the number of posts you have made.
You can change it to something else, if you like. It's in your preferences.Thanks for the info.
I have a web page template with four distinct vertical sections (menubar, submenubar, content, footer)
I want them absolutely positioned vertically, so that there are no gaps etc. and I'm using <DIV> to separate and position each section, with position: absolute and top: [value] attributes.
However ... I would like the whole page centered horizaontally (therefore based on the browser window width).
Is there such a way of doing this? It won't work with an align="center" tag in the DIV itself as it's overriden by the 'absolute' positioning in the style sheet file (even if no "left" attribute is specified). At least, that seems to be the case.
The only convoluted and messy way I thought, if there is no style sheet way, is to use Javascript to check the browser window width, then dynamically generate the CSS DIV absolute positioning based on that - euch!
Obviously, a CSS-based solution would be much better!
Thanks in advance for your feedback
Andy<style type="text/css">
.col {border: 1pt solid black; position: absolute; top: 0px; width: 25%; height: 100%;}
</style>
<div class="col" style="left: 0px; background-color: #FFFFC0">This is DIV 1</div>
<div class="col" style="left: 25%; background-color: red">This is DIV 2</div>
<div class="col" style="left: 50%; background-color: blue">This is DIV 3</div>
<div class="col" style="left: 75%; background-color: green">This is DIV 4</div>The DIVs don't touch, but it's a start.Apologies - I now realise that I've explained what I want really badly! Mixed up horizontal and vertical and my question is ambiguous.
Let me try again!
I have a web page template with a width of 750 pixels (ie horizontal, left to right)
Within this template, there are four distinct *horizontal* sections, the bottom of each section touches the top of the next section: i.e.:
-------------------------------
Section 1 menubar
-------------------------------
Section 2 submenubar
-------------------------------
Section 3 content
-------------------------------
Section 4 footer
<------------------------------>
750 pixels
So, section 1 at the moment is: postiion: absolute; left: 5px; top: 5px; (to allow for some margin)
if section 1 is 100 pixels high, then section 2 is defined as: position: absolute; left: 5px; top: 105px;
and so on down to section 4, with appropriate vertical measurements.
But, of course, it's far over to the left. Even percentages don't help in the 'left' attrbiute as the browser window width is unknown, but the actual width of the content is static (ie it doesn't stretch/expand with increased browser width, it should just move to be centered but still at 750px width)
Should I be using relative positioning instead? Would this allow the use of the 'align="center"' attribute in the <DIV> tag itself?
I hope that explained it a little better.
AndyThe style "align: left" only affects things inside the object, not where the object is positioned.
Don't use absolute positioning at all. DIVs will naturally flow that way.<div style="width: 750; height: 100; background-color: #FFFFC0">This is div 1</div>
<div style="width: 750; height: 120; background-color: red">This is div 2</div>
<div style="width: 750; height: 80; background-color: blue">This is div 3</div>
<div style="width: 750; height: 120; background-color: green">This is div 4</div>You are thinking way too hard.You are thinking way too hard.
Not surprising!
OK I'll try that - although I did try it before and there were vertical gaps between the sections which is not what I want. Is it worth using relative and specifying top: 0 or should I just leave it alone and put it down to (as usual) different browsers rendering slightly differently?Is it worth using relative and specifying top: 0It would probably be better (and more repeatable) to specify the margins of the BODY tag to be 0. Even if you specify relative and 0, you are still offset inside the container.Hmmmm....
Or there's always: body { width: 100%; text-align: center; } which seems to work fine!!! Doh!
Thanks for your replies, gil.Originally posted by andymerrett
Or there's always: body { width: 100%; text-align: center; } which seems to work fine!!! Doh!
Works only in IE because of a bug.
Couple of ways I can think of:
1. div {width: 750px; left: 50%; margin-left: -375px}
2. div {text-align: center; left: auto; right: auto}
I'd prefer #1.Hi,
If you have absolutely positioned elements in your page and you want to centre the page then you will need to surround the page in a div that has a value for the property "position" other than static. If no such ancestor exists, then the containing block is the root element of the document (i.e. the html element).
Basically that means that any absolutely positioned elements will be offset from the html element and not the div that you are centering.
Therefore in your surrounding div (as pointed out in option 2 above post) you need to add position: relative; to the surrounding div which will then force any descendant absolutely positioned elements to be placed absolutely from the top left of the centreing div.
e.g.
<style type="text/css" media="screen">
.centre {
width: 750px;
margin-right: auto;
margin-left: auto;
position: relative;
text-align: center;
}
</style>
& then in the body :
<div class="centre">
<all your other divs and content etc.......>
</div>
Hope this helps
PaulI'd like very much to use style positioning but, since support for positioning tags is (afaik) limited to IE 5.5+ and Netscape 6, I'm not sure if it's time to make the switch from tables.since support for positioning tags is (afaik) limited to IE 5.5+ and Netscape 6I think you should do some serious research. Positioning has been available since version 4 browsers and CSS1.<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/academy/browser_support/page_layout.html">http://www.westciv.com/style_master/aca ... ayout.html</a><!-- m -->
Is this incorrect?
I would like to use style for layout more.Originally posted by McGruff
Is this incorrect?
No, its correct. However, the support for CSS is much better than what "partial" and "buggy" would imply. The only real pain in the butt is NS4.x, which positions some divs correctly, while messes up others.
I especially find it quite queer that people use javascript popup menus but are averse to using CSS (both have issues with 4- browsers).
I also find it queer that ppl find learning javascript easier than CSS.
I also find it queer that people are willing to use browser workarounds for javascripts but can't digest that CSS-rendering engines of various browsers differ from one another (read buggy).
And finally, I also find it queer that my own website uses tables. But thats becoz I am lazy. Well, so is rest of the world. Or is it?BTW, who made me "Supreme Master of the Web"? I like the title.It comes with the number of posts you have made.
You can change it to something else, if you like. It's in your preferences.Thanks for the info.