Help - Search - Members - Calendar
Full Version: CSS Hybird layout centering issue
Pixel2Life Forum > Help Section > HTML, XHTML, CSS and General Web Design
Duc Su
I think that is what I have. My website contain both CSS and tables layout. The two tables consist of my content and my footer. I can't seem to center the whole layout when view in the browser. Here is what I have done.

I center my text-align to center in my css body. I also center my two tables using the properties inspector. It views center in dreamweaver but when I view it in IE or firefox only the footer is center and the rest is still left.


CSS Stylesheet

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 25px 0px 0px;
padding: 0px;
background-color: #CCCCCC;
text-align: center;
}
#divLogo {
background-color: #FFFFFF;
width: 760px;
}
#divWelcome {
background-image: url(../images/welcome_bg.jpg);
background-repeat: repeat;
margin: 0px;
padding: 0px;
width: 760px;
height: 145px;
}
#logo {
float: right;
margin: 20px 3px 0px;
display: ;
}
#table {
float: left;
height: 135px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 35px;
border: 2px solid #000000;
}
#ulMainNav {
margin: 0px;
padding: 0px;
list-style-type: none;
background-image: url(../images/nav_bar_bg.jpg);
background-repeat: repeat;
height: 31px;
width: 760px;
}
#ulMainNav li {
display: inline;
float: left;
}
#ulMainNav a:link, #ulMainNav a:visited, #ulMainNav a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
background-image: url(../images/nav_out.jpg);
background-repeat: no-repeat;
background-position: left bottom;
display: block;
padding-top: 0px;
padding-right: 5px;
padding-left: 40px;
text-align: center;
padding-bottom: 0px;
letter-spacing: 5px;
height: 31px;
margin: 0px;
width: 80px;
line-height: 2.5em;
}
#ulMainNav a:hover {
background-repeat: no-repeat;
background-image: url(../images/nav_ro.jpg);
}
#ulMainNav a.current:link, #ulMainNav a.current:visited {
color: #FFCC66;
}
#divContainer {
clear: both;
width: 760px;
}
#tdSidebarHeader {
background-image: url(../images/sidebarheader.jpg);
background-repeat: no-repeat;
width: 191px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
height: 41px;
}
#tdSiderbarMain {
background-image: url(../images/sidebarmain_bg.jpg);
background-repeat: repeat;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
height: 200px;
vertical-align: top;
padding: 0px 5px;


5px; 5px; 5px;
margin: 0px;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.5em;
margin: 0px 0px 7px;
padding: 0px;
}
#tdContentHeader {
padding-left: 26px;
background-image: url(../images/content_header_bg.jpg);
background-repeat: repeat;
}
#tdContent {
background-repeat: repeat;
vertical-align: top;
margin: 0px;
background-image: url(../images/content_main_bg.jpg);
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
line-height: 1.5em;
text-indent: 1.5em;
}
#divFooter {
text-align: center;
width: 760px;
}
#tdFooterTop {
background-image: url(../images/footer_top.jpg);
background-repeat: no-repeat;
height: 19px;
}
#tdFooterBottom {
background-image: url(../images/footer_bg.jpg);
background-repeat: repeat;
text-align: center;
vertical-align: top;
font-size: 0.8em;
margin: 0px;
padding: 0px;
}
#navlink a:link, #navlink a:visited {
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
margin: 0px;
padding: 0px;
}
#navlink a:hover, #navlink a.current:hover {
color: #996633;
}
#navlink a.current:link, #navlink a.current:visited {
color: #FFCC66;
}


Jurnky
margin: 0px auto; will do.
Duc Su
I am new to this. Can you tell me where I need to insert the margin? Thank you.
Duc Su
I got it thanks. I didn't define my width and height in my CSS body. Thank for the tip.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.