Need help with Scribble header and image border css

Community Forums Forums Design Tips and Tricks Need help with Scribble header and image border css

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  SoZo 1 year, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #14763

    djw2
    Participant
    Post count: 31

    I have modified Scribble a bit and am now having trouble making the header work.

    http://darlingchampagne.com/

    I had a nice graphical header designed, but it won’t work with the responsive design, it just disappears when screen is reduced. So I just made the header area to be a darker red and the header text font white. (after trying to use Nick the Geek’s responsive header plugin which I couldn’t get to work properly for some reason).

    Still the header won’t work. I have done every conceivable thing I can think of with the css and I just need someone with more css skill and fresh eyes to look at it for me.

    With a cell phone you can see how strange it appears.

    Here is the css I have for the header.

     

    /* Header
    ———————————————————— */

    #header {
    background-color: #7f0707 repeat x;
    min-height: 105px;
    margin: 0 352px 10px;
    overflow: hidden;
    }

    #header .wrap {
    margin: 0 auto;
    width: 1260px;
    }

    #title-area {
    background-color: #7f0707;
    float: left;
    height: 90px;
    overflow: hidden;
    padding: 20px 0 0 20px;
    text-align: left;
    width: 260px;
    }

    #title {
    font-family: ‘Great Vibes’, cursive, Arial, sans-serif;
    font-size: 66px;
    text-shadow: #938d84 2px 2px
    line-height: 42px;
    margin: 15px 0 0;
    }

    #title a,
    #title a:hover {
    color: #fff;
    text-decoration: none;
    }

    #description {
    color: #999;
    font-size: 12px;
    text-transform: uppercase;
    }

    #header .widget-area {
    float: right;
    width: 700px;
    }

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

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

    .header-image #description {
    display: block;
    overflow: hidden;
    }

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

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

    ~~~ END of CSS ~~~

    Ideally I would like to use a graphic image and have it respond to re-sizing properly.

    AND …

    If you can tell me how to remove the white border around the social icons images too, I would be ecstatic! (Or I will start a new thread for that questions …)

    Any help is appreciated.

    Thanks

    DJ

    #14785

    SoZo
    Moderator
    Post count: 1573

    Set the margin of #header to “0 auto” and adjust your width in #header .wrap or move it to #header


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #14813

    djw2
    Participant
    Post count: 31

    Hey that worked!  Thanks so much, SoZo.

    Could I post the image css here too for some help with the social icons border, or do I need to start a new thread for that?

     

     

    #14820

    SoZo
    Moderator
    Post count: 1573

    Ya, probably best to create a new topic


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #14841

    djw2
    Participant
    Post count: 31

    Will do right now then.

    Thank you.

    #14848

    SoZo
    Moderator
    Post count: 1573

    You’re welcome


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

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

The topic ‘Need help with Scribble header and image border css’ is closed to new replies.