Grow your CSS skills. Land your dream job.

Image float(?) right on a header

  • # October 6, 2009 at 9:22 am

    Here’s the site URL:
    http://staceybertrand.info/

    What I’d like to do is get an image to be right flush on top of the header. I’m not quite sure where I’m going wrong and I am just starting to learn CSS…so please bear with my ineptitude! I appreciate any and all help, tips and comments. [Please don’t judge my design yet…it’s still a work in progress and this is just a test site until I get used to wp and hard coding everything.]

    Here’s what I’ve got in the header file (well the relevant bit anyways):

    Code:


    And here’s my CSS:

    Code:
    #header {
    margin: 20px 0 20px 0
    }

    h1#logo {
    float:left;
    text-transform:lowercase;
    letter-spacing: 1px;
    font-size: 36px;
    margin:0 80px 0 0;
    background: url(style/images/ilovechocolatelogo.jpg) top left no-repeat;
    width:323px;
    height:92px;
    }

    #header2 {
    margin: 0 0 0 0;
    float: right;
    }

    h1#imageright {
    float: right;
    margin: 0 0 0 0;
    background: url(style/images/upperrightimage.jpg) top right no-repeat;
    width: 433px;
    height: 232px;
    }

    # October 6, 2009 at 12:10 pm

    Someone may disagree with this but I don’t think floats are the way to go with what you are trying to do. You would have to really work at getting them to be cross browser supported and then cleared properly for the menu and content to flow correctly down the page.

    The way I would do it is I would separate the menu into it’s own div and place it below the header div. Then we’ll nest the two header images into the main header div. How we’ll do that is set the main header with a position of relative, and the two sub header divs with position:absolute and then tell them to adjust left and right:

    Code:
    #header {
    margin: 20px 0 20px 0;
    position:relative;
    }

    #headergraphic1 {
    position:absolute;
    left:0;
    text-transform:lowercase;
    letter-spacing: 1px;
    font-size: 36px;
    margin:0 80px 0 0;
    background: url(style/images/ilovechocolatelogo.jpg) top left no-repeat;
    width:323px;
    height:92px;
    }

    #headergraphic2 {
    position:absolute;
    right:0;
    margin: 0;

    }

    h1#imageright {
    float: right;
    margin: 0 0 0 0;
    background: url(style/images/upperrightimage.jpg) top right no-repeat;
    width: 433px;
    height: 232px;
    }

    *** NEW NAV ***

    #nav {
    background: url(style/images/nav_bg.jpg) repeat-x;
    height: 30px;
    text-align:right;
    }

    Code:

    # October 6, 2009 at 12:48 pm

    I think getting closer…but still not quite there…maybe I’m missing something? Thanks again for all the help – I REALLY appreciate it. I’m a designer at heart and the coding is just seeming to eat me alive.

    URL: http: staceybertrand.info

    Header.php code:

    Code:

    < ?php /*
     


    */ ?>

    Styles.CSS code: [note-ignore the commented areas, but that’s what I was playing with…just for reference]

    Code:
    /***General Styles***/
    /**rightimage {
    background:url(style/images/rightimage.png) top right no-repeat;
    width: 433px ;
    height: 202px;
    float: right;
    clear: both;
    }
    **/
    body{
    bg-color:#309;
    font-family: Arial, Helvetica, sans-serif;
    background: url(style/images/repeatinghorizontal.png) top repeat-x;
    }

    #wrap {
    width: 960px;
    margin: 0 auto;
    }
    # {
    text-decoration:none;
    }

    /**Header Styles**//**
    #header {
    margin: 00px 0 20px 0
    }

    h1#logo {
    float:left;
    text-transform:lowercase;
    letter-spacing: 1px;
    font-size: 36px;
    margin:0 80px 0 0;
    background: url(style/images/ilovechocolatelogo.jpg) top left no-repeat;
    width:323px;
    height:92px;
    }

    #rightimage {
    float: right;
    background:url(style/images/rightimage.png) top right no-repeat;
    width: 433px;
    height 202px;
    clear: right;
    }

    h1#logo a {
    color:#FFC;
    }
    *//*
    ul#floatright {
    float:right;
    clear:right;
    }
    */
    ul#nav {
    letter-spacing: 1px;
    line-height:260px;
    font-size: 13px;
    color:#FFC
    font-weight:bold;
    }

    ul#nav li {
    float: left;
    display: in-line;
    margin: 0 20px 0 0;
    font-weight:normal;
    }

    ul#nav li a {
    color:#FFC;
    display:in-line;
    margin: 0 20px 0 0;
    text-decoration:none;
    }

    ul#nav li a:hover {
    color:#EEB0C0;
    display: in-line;
    margin: 0 20px 0 0;
    font-weight:normal;
    }

    ul#nav li.current_page_item a{
    font-weight:bold;
    }

    /**Featured Styles**//**
    #featured_section {
    background:transparent url(style/images/rightimage.png) width: 433px height: 202px no-repeat scroll;
    margin: 0 -25 0 0;
    }
    **/

    #header {
    margin: 00px 0 20px 0;
    position:relative;
    }

    #headergraphic1 {
    position:absolute;
    left:0;
    text-transform:lowercase;
    letter-spacing: 1px;
    font-size: 36px;
    margin:0 0px 0 0;
    background: url(style/images/ilovechocolatelogo.jpg) top left no-repeat;
    width:323px;
    height:92px;
    }

    #headergraphic2 {
    position:absolute;
    right:0;
    margin: 0;

    }

    h1#imageright {
    float: right;
    margin: 0 0 0 0;
    background: url(style/images/rightimage.png) top right no-repeat;
    width: 433px;
    height: 232px;
    }

    *** NEW NAV ***

    #nav {
    background: url(style/images/nav_bg.jpg) repeat-x;
    height: 30px;
    text-align:right;
    }

    # October 6, 2009 at 1:42 pm

    well, you are kind of mixing the code up now :)

    You have both my example and your original code working at the same time which is confusing it a little more I think. You probably need to redefine the structure of the page.

    Seeing the image you want to use kind of makes me rethink my advice. What I was saying to do kind of looks like this from a more visual perspective.

    [attachment=1]img1.jpg[/attachment]

    But if your image is going to kind of overlap the top header and kind of sit on top of it, what you’re going to need to do is something like this:

    [attachment=0]img2.jpg[/attachment]

    Depending on whether or not you want a fixed width, you’ll need to adjust where the div is placed or just remove the width from the wrapper.

    Does that make any sense?

    # October 6, 2009 at 6:56 pm

    Woot woot! It’s working! I don’t know if I coded it the most appropriate way or not, but it’s now working and starting to look the way that I want it to! Thanks so much for the last post. The diagrams totally helped. It strangely enough illustrated how to nest (don’t know if that’s the right phrase or not) everything and I got it working. Thanks thank thanks! :D

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".