Need help? Check out our Support site, then


Question about resizing header?

  1. completelybeing
    Member

    I have a bit of a problem: I have changed some code for my header, and I'm not entirely sure what I've done, but now my header is much bigger (bigger than I want it). The code I'm using for my header is:

    a,h2,h2 a,h2 a:hover,h2 a:visited,h3,h3 a,h3 a:hover,h3 a:visited,#sidebar h2,#wp-calendar caption,cite {
    font-size:140%;
    color:#C9BE62!important;
    }
    
    #headerimg .description {
    text-decoration:none;
    color:#C9BE62!important;
    }
    
    #title; font-face {
    font-family:'Reenie Beanie';
    font-style:normal;
    font-weight:normal;
    }
    
    @font-face {
    font-family:'Reenie Beanie';
    font-style:normal;
    font-weight:normal;
    }
    
    div.sidebar {
    float:left;
    overflow:hidden;
    width:140px;
    margin:0 0 0 -200px;
    }
    
    #sidebar {
    display:inline;
    float:right;
    width:180px;
    margin:80px 0 0 10px;
    }
    
    .clearfix:after {
    display:none;
    }
    
    #header {
    border-bottom:0 solid #C9BE62;
    background:transparent url('http://postwittycommentshere.files.wordpress.com/2010/09/tsvaatar2new2-e1283937406477.jpg');
    position:relative;
    width:920px;
    height:250px;
    padding:80px 0;
    }
    
    #header #title a {
    color:C9BE62!important;
    width:920px;
    height:250px;
    }
    
    #title {
    font:normal 35px/35px;
    font-family:"Times New Roman", Times, serif;
    border-bottom:solid 4px #C9BE62;
    padding-bottom:180px;
    margin-bottom:0;
    }
    
    #nav {
    font-size:180.5%;
    padding:0 1.2em;
    }
    
    body {
    font-size:67.5%;
    font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
    background:url('http://postwittycommentshere.files.wordpress.com/2010/09/blogbackgroundnewdimension.jpg');
    color:#C9BE62;
    text-align:center;
    }

    I'll link you to my blog as well:
    http://postwittycommentshere.wordpress.com/

    As you can see, the header touches the top border, and is quite thick - I want some space between the top of the header and the top of the page (so you can see the background behind at the top), and I want it to be slightly narrower. Can anybody suggest a way for me to do this? I would also like to center my navigation bar, and move it above the gold line (the one that it is currently underneath). Any help you guys could offer would be much appreciated, and please keep it as simple as possible - I am very new to this! Thanks guys =)

    The blog I need help with is postwittycommentshere.wordpress.com.

  2. First thing, is your header image is 483px high. If you want it shorter, you have to redo the header image for the size you want. Right now the height in #header is 250px, so if that is the height you want, then crop your header image to that height.

    Then the main thing to change is the padding-bottom value in #title, which currently is 180px. You will have to adjust that to get the spacing you want between the image and the yellow-green line above the navigation tabs.

  3. completelybeing
    Member

    Thanks very much dude! I've made a few changes and alllmost got it how I want, but I don't really like the way it looks like the top of the header has just been cut off you know? I think it would be better if there was some white (from the body) around the top of the header image - I don't suppose you know how I could do that?
    Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags