Header image resizing problem

Community Forums Forums Design Tips and Tricks Header image resizing problem

This topic is: resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Gary Jones 10 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #61405

    lclark.ca
    Participant

    Hello – I am having a problem getting my header to display properly. My site is lisaclark.ca. The image I’ve got in there is just a place holder – I’ve saved the header as 960 x 134 pixels, which is the size of my previous header. Something seems to be cutting it off on the right hand side.

    This is the original code related to headings that I can see. Is there something that I am missing? I changed the url for the background to the new file.

    Any help would be greatly appreciated. Thanks.

    /***** Header ********************/

    #header {
    background: url(http://lisaclark.ca/wp-content/uploads/2011/02/lisaclark.jpg);
    width: 960px;
    height: 134px;
    margin: 0;
    padding: 0;
    }

    #header .wrap {
    }

    #title-area {
    width: 650px;
    float: left;
    margin: 0;
    padding: 30px 0 0 0;
    overflow: hidden;
    }

    #title-area #title {
    font-size: 36px;
    font-family: Verdana, Arial, Tahoma;
    margin: 0;
    padding: 0 0 25px 20px;
    text-decoration: none;
    }

    #title-area #title a {
    color: #FFFFFF;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
    }

    #title-area #title a:hover {
    color: #FFFFFF;
    text-decoration: none;
    }

    #title-area #description {
    color: #FFFFFF;
    font-family: Verdana, Arial, Tahoma;
    font-size: 14px;
    font-style: italic;
    margin: 0;
    padding: 0 0 5px 20px;
    line-height: 20px;
    }

    #header .widget-area {
    width: 280px;
    float: right;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    }

    #header .widget-area a, #header .widget-area a:visited {
    color: #FFFFFF;
    text-decoration: underline;
    }

    #header .widget-area a:hover {
    color: #FFFFFF;
    text-decoration: none;
    }

    #header .widget-area p {
    color: #FFFFFF;
    margin: 0;
    padding: 0 0 5px 0;
    line-height: 18px;
    }

    #header .widget-area h4 {
    color: #A6B9C5;
    font-family: Verdana, Arial, Tahoma;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding: 22px 0 0 0;
    text-decoration: none;
    }

    #header .widget-area ul {
    margin: 0;
    padding: 0;
    }

    #header .widget-area ul li {
    list-style-type: square;
    margin: 0 0 0 20px;
    padding: 0;
    }

    /***** Image Header – Partial Width ********************/

    .header-image #header #title-area {
    background: url() left top no-repeat;
    }

    .header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a {
    display: block;
    float: left;
    width: 570px;
    height: 115px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    overflow: hidden;
    }

    .header-image #title-area #description {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    }

    /***** Image Header – Full Width ********************/

    .header-full-width #title-area, .header-full-width #title-area #title, .header-full-width #title-area #title a {
    width: 960px;
    }

    http://www.lisaclark.ca
    #67512

    Gary Jones
    Moderator
    Post count: 686

    :-)


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1 and 2.1.1 (all 88 of them!) | @GaryJ

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Header image resizing problem’ is closed to new replies.