How do I center the header and get rid of a background image in my site?

O

oksk89

New member
Jun 18, 2009
239
1
0
I've searched google and looked at like 5 sites, changing code around, and none of them seem to center the header of my site, the "Pure Resveratrol" part.

Also, I'd like to take out that greyish ugliness on the top. Does anyone know how to do that too?

Here's my site: Pure Resveratrol

Thanks!


*/

*{
padding: 0;
margin: 0;
}
a {
color: #d45500;
text-decoration: none;
}
a:hover {
color: #88aa00;
}
p {
margin: 15px 0;
}
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
background: #4c1e69 url(img/bkg.jpg) repeat-x;
color: #474747;
}
.clear{
clear: both;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #d45500;
text-align: center;
background-color: #f4e3d7;
padding-top: 4px;
margin: 10px;
}
.wp-caption img {
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/*----------[WRAPER]----------*/
#bg-wraper {
height: 93px;
background: url(img/toppattern.jpg) repeat-x;
}
#wraper{
width: 885px;
margin: 0 auto;
background: url(img/wraper.jpg) repeat-y;
}
#searchwraper {
width: 885px;
margin: 0 auto;
background: transparent;
}
#menunlogo{
width: 885px;
height: 100px;
margin: 0 auto;
}
#header{
height: 19px;
text-align: center;
background: url(img/toppattern2.jpg) repeat-x;
}
#logo {
border: 0;
float: left;
margin-top: 20px;
}
#logo h1 a{
font: bold 38px 'Times New Roman', Times, serif;
color: white;
text-transform: uppercase;
}
#logo h2{
font: bold 13px Tahoma, Verdana;
color: #b050c7;
}
/*----------[MENU]----------*/
#menu {
float: right;
height: 36px;
line-height:36px;
background: url(img/lmenu.jpg) no-repeat left;
}
#menu ul{
display: inline;
padding: 0;
margin: 0;
}
#menu ul li{
float: left;
list-style-type: none;
text-align: center;
padding: 0 5px;
}
#menu a{
color: #54545e;
text-decoration: none;
}
#menu a:hover{
color: #54545e;
text-decoration: underline;
}

/*----------[CONTENT]----------*/
#content{
margin: 15px 0;
}
#posts{
width: 550px;
text-align: justify;
line-height: 18px;
}

.post {
border-bottom: 1px dotted #d45500;
margin: 5px 15px;
padding: 10px;
width: 550px;
overflow: hidden;
background: #edeff1;
border-top: solid 2px #e4e4e5;
}
.post ul, .post ol{
margin-left:30px;
}
.post img{
padding: 6px;
border: 1px solid #d45500;
}

.titull {
width: 615px;
font: 16px 'Arial';
text-transform: uppercase;
color: #bababa;
margin-left: 5px;
font-weight: bold;
}

.titull a{
width: 615px;
font: 20px 'Arial';
text-transform: uppercase;
color: #8149a0;
}

.meta {
font-size: 11px;
padding: 0 5px;
color: #878a8d;
}
.meta a{
color: #fb9c38;
font-weight: bold;
}
.tags{
font-style: italic;
}
.navigation{
overflow: hidden;
margin: 15px auto;
width: 550px;
}
/*----------[SIDEBAR]----------*/
#sidebar {
width: 280px;
float: right;
overflow: hidden;
background: url(img/sidebar.jpg) repeat-y;
padding: 15px 0;
}
#sidebar a {
color: #797b7e;
text-decoration: none;
}
#sidebar a:hover {
color: #797b7e;
font-weight: bold;
}
.widget{
margin: 0 15px 15px 15px;
color: #797b7e;
}
.textwidget{
}
.header {
text-align: center;
font: bold 16px Arial;
text-transform: uppercase;
padding-top: 10px;
height: 27px;
background: url(img/widgetheader.jpg) no-repeat center;
}
.widget ul {
list-style: none;
margin-left: 25px;
margin-top: 10px;
}
.widget ul li{
margin-bottom: 5px;
}

/*----------[COMMENTS]----------*/
#comments{
margin: 25px 25px;
width: 550px;
}
.comments, .commens ul{
padding: 0;
margin: 0;
list-style: none;
}
.comment{
overflow: hidden;
}
.avatar{
margin: 8px 0 8px 8px;
}
#postcomment {
border-bottom: 1px solid #d45500;
font-size: 18px;
font-weight: normal;
padding: 3px 0;
letter-spacing: 2px;
}
#nocomments{
border: 1px solid #d45500;
padding: 5px;
margin: 5px 0;
}

/*----------[FOOTER]----------*/
#footer {
clear: both;
font-size: 11px;
width: 885px;
height: 60px;
line-height: 24px;
color: #fff;
background: url(img/footer.jpg) repeat-x;
}
#credits{
width: 855px;
margin: 0 auto;
padding-top: 10px;
}
#footer a{
color: #fff;
font-weight: bold;
}
fieldset {
margin: 0;
padding: 0;
border: none;
}

#search #ok {
display: none;
}

#search #s {
width: 180px;
height: 18px;
background: transparent;
border: none;
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
margin-right: 38px;
margin-top: 7px;
margin-left: 10px;
}

#search br {
display: none;

}
 


I think the center is not working for you because your logo id (#logo) is float.
try to remove the float:left; line it should work.

In order to remove the gray pattern from the top, just delete the <div id="bg-wraper"> block from your HTML.

Good luck
 
Try replacing your stylesheet code with this (save your original):

Code: 
/*
Theme Name: Ethnic Purple
Theme URI: http://www.bingowebdesign.info/themes/EthnicPurple.zip
Description: Widget ready, gravatar ready, valid css and html clean design purple theme.
Version: 1.5
Author: Bingo
Author URI: http://www.bingowebdesign.info
Tags: purple, fixed-width, right-sidebar, purple, white, two-columns, dark

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php

*/

*{
    padding: 0;
    margin: 0;
    }
a {
        color: #d45500;
        text-decoration: none;
        }
a:hover {
        color: #88aa00;
        }
p         {
        margin: 15px 0;
        }
body {
        font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
        font-size: 12px;
        background: #4c1e69 url(img/bkg.jpg) repeat-x;
        color: #474747;
        }
.clear{
        clear: both;
        }
.aligncenter, div.aligncenter {
       display: block;
       margin-left: auto;
       margin-right: auto;
}
.alignleft {
       float: left;
}
.alignright {
       float: right;
}
.wp-caption {
       border: 1px solid #d45500;
       text-align: center;
       background-color: #f4e3d7;
       padding-top: 4px;
      margin: 10px;
}
.wp-caption img {
       border: 0 none;
}
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}
/*----------[WRAPER]----------*/
#bg-wraper {
       height: 0px;
       
       }
#wraper{
        width: 885px;
        margin: 0 auto;
        background: url(img/wraper.jpg) repeat-y;
        }
#searchwraper {
        width: 885px;
        margin: 0 auto;
        background: transparent;
        }
#menunlogo{
        width: 885px;
        height: 100px;
        margin: 0 auto;
        }
#header{
        height: 19px;
text-align: center;
        background: url(img/toppattern2.jpg) repeat-x;
        }
        
#logo {
        border: 0;
        margin: 0 auto;
        }        

#logo h1 a{
        font: bold 38px 'Times New Roman', Times, serif;
        color: white;
        text-transform: uppercase;
        }
#logo h2{
        font: bold 13px Tahoma, Verdana;
        color: #b050c7;
        }
/*----------[MENU]----------*/
#menu {
        float: right;
        height: 36px;
        line-height:36px;
        background: url(img/lmenu.jpg) no-repeat left;
        }
#menu ul{
        display: inline;
        padding: 0;
        margin: 0;
        }
#menu ul li{
        float: left;
        list-style-type: none;
        text-align: center;
        padding: 0 5px;
        }
#menu a{
        color: #54545e;
        text-decoration: none;
        }
#menu a:hover{
        color: #54545e;
        text-decoration: underline;
        }
        
/*----------[CONTENT]----------*/
#content{
        margin: 15px 0;
        }
#posts{
        width: 550px;
        text-align: justify;
        line-height: 18px;
        }
            
.post {
        border-bottom: 1px dotted #d45500;
        margin: 5px 15px;
        padding: 10px;
        width: 550px;
        overflow: hidden;
        background: #edeff1;
        border-top: solid 2px #e4e4e5;
        }
.post ul, .post ol{
        margin-left:30px;
        }
.post img{
        padding: 6px;
        border: 1px solid #d45500;
        }
        
.titull {
        width: 615px;
        font: 16px 'Arial';
        text-transform: uppercase;
        color: #bababa;
        margin-left: 5px;
        font-weight: bold;
        }
        
.titull a{
        width: 615px;
        font: 20px 'Arial';
        text-transform: uppercase;
        color: #8149a0;
        }
        
.meta {
        font-size: 11px;
        padding: 0 5px;
        color: #878a8d;
        }
.meta a{
        color: #fb9c38;
        font-weight: bold;
        }
.tags{
        font-style: italic;
        }
.navigation{
        overflow: hidden;
        margin: 15px auto;
        width: 550px;
        }
/*----------[SIDEBAR]----------*/
#sidebar {
        width: 280px;
        float: right;
        overflow: hidden;
        background: url(img/sidebar.jpg) repeat-y;
        padding: 15px 0;
        }
#sidebar a {
        color: #797b7e;
        text-decoration: none;
        }
#sidebar a:hover {
        color: #797b7e;
        font-weight: bold;
        }        
.widget{
        margin: 0 15px 15px 15px;
        color: #797b7e;
                }
.textwidget{
        }
.header {
        text-align: center;
        font: bold 16px Arial;
        text-transform: uppercase;
        padding-top: 10px;
        height: 27px;
        background: url(img/widgetheader.jpg) no-repeat center;
        }
.widget ul {
        list-style: none;
        margin-left: 25px;
        margin-top: 10px;
        }
.widget ul li{
        margin-bottom: 5px;
        }
        
/*----------[COMMENTS]----------*/
#comments{
        margin: 25px 25px;
        width: 550px;
        }
.comments, .commens ul{
        padding: 0;
        margin: 0;
        list-style: none;
        }
.comment{
        overflow: hidden;
        }
.avatar{
        margin: 8px 0 8px 8px;
        }        
#postcomment {
        border-bottom: 1px solid #d45500;
        font-size: 18px;
        font-weight: normal;
        padding: 3px 0;
        letter-spacing: 2px;
        }
#nocomments{
        border: 1px solid #d45500;
        padding: 5px;
        margin: 5px 0;    
        }

/*----------[FOOTER]----------*/        
#footer {
        clear: both;
        font-size: 11px;
        width: 885px;
        height: 60px;
        line-height: 24px;
        color: #fff;
        background: url(img/footer.jpg) repeat-x;
        }
#credits{
        width: 855px;
        margin: 0 auto;
        padding-top: 10px;
        }
#footer a{
        color: #fff;
        font-weight: bold;
        }
fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#search #ok {
    display: none;
}

#search #s {
    width: 180px;
    height: 18px;
    background: transparent;
    border: none;
    font: normal 10pt Arial, Helvetica, sans-serif;
    color: #000;
    margin-right: 38px;
    margin-top: 7px;
    margin-left: 10px;
}

#search br {
    display: none;

}
 
You must log in or register to reply here.
Top Bottom