- This topic is empty.
-
AuthorPosts
-
April 1, 2009 at 12:41 pm #24473chrisMember
I am working on a new WordPress Theme and I am having trouble. I can center the content with margin: auto but I need to float the wrapper to be able to have all of the contents (sidebar, header, footer, content) w/in the wrapper. I have tried a lot of techniques including margin: 0 , auto ; margin: auto (left and right), and even center the wrapper text align. None of these get desired results. I want the wrapper centered in the middle of the page. My test site is at http://www.chriscarvergraphics.com/blog
here is my css
Code:body {
background-image:url(/images/htmlbground.jpg);
padding: 0;
margin: 0;
width: 100%;
display: table;
background-repeat: no-repeat;
background-position: center top;
}
/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE’s blue borders */
/* Page Layout */
#page-wrap {
width: 824px;
height: auto !imortant;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
background-position: center;
background-image:url(/images/notebook_paper.png);
z-index: 0;
float: left;
margin: 0 auto;
}
#header {
height: 110px;
width: 758px;
float: left;
background-image:url(/images/header_background.png);
background-repeat: no-repeat;
padding-top: 45px;
padding-right: 30px;
padding-bottom: 45px;
padding-left: 36px;
z-index: 1;
font-family: “Courier New”, Courier, monospace;
font-size: 16pt;
font-weight: bold;
color: #999999;
}
.post {
width: 550px;
z-index: 3;
float: left;
}
#sidebar {
float: left;
width: 207px;
z-index: 3;
margin-right: 10px;
}
#sidebarTop {
background-image:url(/images/note-bg-top.png);
float: left;
width: 207px;
background-repeat: no-repeat;
background-position: center top;
height: 138px;
padding-left: 15px;
}
#sidebarMid {
background-image:url(/images/note-bg.png);
float: left;
width: 207px;
background-repeat: repeat-y;
background-position: center center;
padding-left: 15px;
}
#sidebarBottom {
background-image:url(/images/note-bg-bottom.png);
float: left;
width: 207px;
background-repeat: no-repeat;
background-position: center top;
height: 30px;
padding-left: 15px;
}
#adbar {
float: left;
width: 207px;
z-index: 3;
margin-right: 10px;
}
#adbarTop {
background-image:url(/images/note-bg-top.png);
float: left;
width: 207px;
background-repeat: no-repeat;
background-position: center top;
height: 138px;
padding-left: 15px;
}
#adbarMid {
background-image:url(/images/note-bg.png);
float: left;
width: 207px;
background-repeat: repeat-y;
background-position: center center;
padding-left: 15px;
}
#adbarBottom {
background-image:url(/images/note-bg-bottom.png);
float: left;
width: 207px;
background-repeat: no-repeat;
background-position: center top;
height: 30px;
padding-left: 15px;
}
#footer {
height: 110px;
width: 758px;
float: left;
background-image:url(/images/footerbg.png);
background-repeat: no-repeat;
padding-top: 45px;
padding-right: 30px;
padding-bottom: 45px;
padding-left: 36px;
z-index: 1;
font-family: “Courier New”, Courier, monospace;
font-weight: bold;
color: #999999;
}
/* Menu Bar */
#menu-bar li {
background-image:url(/images/alink.png);
display: inline;
list-style: none;
margin: 0;
padding-top: 0em;
float: left;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-repeat: no-repeat;
background-position: center center;
height: 28px;
width: 75px;
margin-top: 50;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
font-size: 9pt;
}
#menu-bar a {
background-image:url(/images/alink.png);
display: inline;
list-style: none;
margin: 0;
padding-top: 0em;
float: left;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-repeat: no-repeat;
background-position: center center;
height: 28px;
width: 75px;
margin-top: 50;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#menu-bar a:active {
background-image:url(/images/alink.png);
display: inline;
list-style: none;
margin: 0;
padding-top: 0em;
float: left;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-repeat: no-repeat;
background-position: center center;
height: 28px;
width: 75px;
margin-top: 50;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#menu-bar a:hover {
background-image:url(/images/alink.png);
display: inline;
list-style: none;
margin: 0;
padding-top: 0em;
float: left;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-repeat: no-repeat;
background-position: center center;
height: 28px;
width: 75px;
margin-top: 50;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.post a {
color: #333333;
}
#page-wrap p {
padding-right: 5px;
padding-left: 5px;
}
.post a {
background-image:url(/images/linkbox.png);
color: #000000;
background-repeat: repeat-x;
background-position: center bottom;
height: 17px;
text-decoration: none;
background-color: #f9ed2b;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
}
.post a:hover {
color: #666666;
background-repeat: repeat-x;
background-position: center bottom;
height: 17px;
text-decoration: none;
background-color: #f9ed2b;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}Any help would be greatly appreciated. Thank you
-ChrisApril 1, 2009 at 1:27 pm #55699Chris CoyierKeymasterYeah the float is killing you. I don’t think you need it. Remove that and throw like overflow: hidden on it so it clears the internal floats (so it has a proper height and you can see the background.
April 1, 2009 at 1:30 pm #55700Rob MacKayParticipantlike apostrophe said – you have some crazy ideas going on in your CSS lol make that map image the background of your html tag and not your body tag…
April 1, 2009 at 10:23 pm #55705chrisMemberWhenever I remove that float on the Wrapper Div, My background Image "notebook paper" disapears. I don’t know why. I guess this is the real issue.
April 2, 2009 at 8:43 am #55743chrisMemberWOW! Chris Coyier You are a CSS Genius! I just removed the float and added the overflow hidden rule and it worked thank you very much. I’m looking forward to your book release.
Thank you everyone on this post very much. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.