Does anybody have a second to look at this? My site is <!-- w --><a class="postlink" href="http://www.digitaleyesandears.com/testing/One">www.digitaleyesandears.com/testing/One</a><!-- w --> How can I get my site to center vertically? It does center it horizatally but not vertically?
css is here
<!-- w --><a class="postlink" href="http://www.digitaleyesandears.com/testing/One/css/general.css">www.digitaleyesandears.com/testing/One/css/general.css</a><!-- w -->
thanksCenter Page Content Horizontally and Vertically (without <table>s) (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/center_page_content_horizontally_and_vertically/">http://www.dynamicsitesolutions.com/css ... ertically/</a><!-- m -->)In your external *css you have
#container {
width: 750px;
margin: auto;
padding: 40px 0 0 0;
}
and in your local document you have
<div style="display: table; width: 750px; margin: 20px 0px 20px 0px;">
-These refer to the same DIV, do they not?
-Won't the margin: 20px (local) and padding(top): 40px values 'add up', forcing the content 'down' the page (and thus over-riding the margin:auto, and never being really centered vertically?).
Maybe try removing the padding:40px and see if that brings the whole thing 'up' and let the margin:auto (which controls all-four sides top-right-bottom-left) do it's business without interferance.
I just glanced at this, haven't tried it myself but this is something that I'd start with. I hope this helps.
-The site is looking very good, btw.
-JoelIn your external *css you have
#container {
width: 750px;
margin: auto;
padding: 40px 0 0 0;
}
and in your local document you have
<div style="display: table; width: 750px; margin: 20px 0px 20px 0px;">
-These refer to the same DIV, do they not?
-Won't the margin: 20px (local) and padding(top): 40px values 'add up', forcing the content 'down' the page (and thus over-riding the margin:auto, and never being really centered vertically?).
Maybe try removing the padding:40px and see if that brings the whole thing 'up' and let the margin:auto (which controls all-four sides top-right-bottom-left) do it's business without interferance.
I just glanced at this, haven't tried it myself but this is something that I'd start with. I hope this helps.
-The site is looking very good, btw.
-Joel
Hey Joel thanks for your help. I did that and now the page as you said is to the top but how do I actually center it now? I tested this locally I didn't upload it yet. But it does go to the very top and it seems like padding is the only thin i can use to push it down to be centerred?set the marging for the top of the div to 10-25%
if you want it dead center (on all resolutions) you will have to JavaScriptif you want it dead center (on all resolutions) you will have to JavaScript
No. You could either use the method I linked to or you could use a one-celled table to do it.I wonder if padding:auto would suffice then, but I looked at the site (centering horiz. & vert.) that kravvitz shared and that looks like the better option.
You want this centered vertically? What is your resolution, btw? I wonder if this will even fit on a 600-pixel high viewport as it is right now. I use 1024x768 and when I set to 800x600, vertical scrollbars appear and 'vertical centering' concern becomes moot.
I'll have another look at your site though. I didn't get a chance to look at it much earlier today.."auto" is not a valid value for the padding properties. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding">http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding</a><!-- m -->)
Top and bottom margins set to auto become 0. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#q17">http://www.w3.org/TR/REC-CSS2/visudet.html#q17</a><!-- m -->)ok guys I think I am better off with how it is now. Considering smaller res screens will have issues like Joel said. Thanks guys
css is here
<!-- w --><a class="postlink" href="http://www.digitaleyesandears.com/testing/One/css/general.css">www.digitaleyesandears.com/testing/One/css/general.css</a><!-- w -->
thanksCenter Page Content Horizontally and Vertically (without <table>s) (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/center_page_content_horizontally_and_vertically/">http://www.dynamicsitesolutions.com/css ... ertically/</a><!-- m -->)In your external *css you have
#container {
width: 750px;
margin: auto;
padding: 40px 0 0 0;
}
and in your local document you have
<div style="display: table; width: 750px; margin: 20px 0px 20px 0px;">
-These refer to the same DIV, do they not?
-Won't the margin: 20px (local) and padding(top): 40px values 'add up', forcing the content 'down' the page (and thus over-riding the margin:auto, and never being really centered vertically?).
Maybe try removing the padding:40px and see if that brings the whole thing 'up' and let the margin:auto (which controls all-four sides top-right-bottom-left) do it's business without interferance.
I just glanced at this, haven't tried it myself but this is something that I'd start with. I hope this helps.
-The site is looking very good, btw.
-JoelIn your external *css you have
#container {
width: 750px;
margin: auto;
padding: 40px 0 0 0;
}
and in your local document you have
<div style="display: table; width: 750px; margin: 20px 0px 20px 0px;">
-These refer to the same DIV, do they not?
-Won't the margin: 20px (local) and padding(top): 40px values 'add up', forcing the content 'down' the page (and thus over-riding the margin:auto, and never being really centered vertically?).
Maybe try removing the padding:40px and see if that brings the whole thing 'up' and let the margin:auto (which controls all-four sides top-right-bottom-left) do it's business without interferance.
I just glanced at this, haven't tried it myself but this is something that I'd start with. I hope this helps.
-The site is looking very good, btw.
-Joel
Hey Joel thanks for your help. I did that and now the page as you said is to the top but how do I actually center it now? I tested this locally I didn't upload it yet. But it does go to the very top and it seems like padding is the only thin i can use to push it down to be centerred?set the marging for the top of the div to 10-25%
if you want it dead center (on all resolutions) you will have to JavaScriptif you want it dead center (on all resolutions) you will have to JavaScript
No. You could either use the method I linked to or you could use a one-celled table to do it.I wonder if padding:auto would suffice then, but I looked at the site (centering horiz. & vert.) that kravvitz shared and that looks like the better option.
You want this centered vertically? What is your resolution, btw? I wonder if this will even fit on a 600-pixel high viewport as it is right now. I use 1024x768 and when I set to 800x600, vertical scrollbars appear and 'vertical centering' concern becomes moot.
I'll have another look at your site though. I didn't get a chance to look at it much earlier today.."auto" is not a valid value for the padding properties. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding">http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding</a><!-- m -->)
Top and bottom margins set to auto become 0. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#q17">http://www.w3.org/TR/REC-CSS2/visudet.html#q17</a><!-- m -->)ok guys I think I am better off with how it is now. Considering smaller res screens will have issues like Joel said. Thanks guys