Grow your CSS skills. Land your dream job.

Header Content positioning question

  • # June 20, 2009 at 12:45 pm

    Hello,

    Can anyone take a look at the css for my header content (#header-content) and tell me if there is a better and/or more easily update-able way to position the images inside that div?
    My noob-ness is causing me to second guess myself and I get the feeling that I’m doing the positioning the hard way and need to set my mind at ease about it.

    Here’s a link http://parasolchute.com/btflynn/AmyBateman/index.html

    And here’s the part of the css I’m talking about:

    Code:
    /* Header */
    img#header-photo {
    float: left;
    width: 350px;
    margin: 65px 0 65px 45px;
    border: 1px solid #fff;
    }

    img#logo {
    float: right;
    margin: 200px 15px 0 0;
    }

    Thanks in advance for your time!

    # June 20, 2009 at 3:27 pm

    I would throw away the #header-content div altogether, give the .header div (why a class? How many headers are you going to have on one page?) a specific height and width and make it position: relative and absolutely position the image and logo inside it, with the nav ul after the header div in the markup.
    I’ll save Rob another piece of shameless self-promotion :D and point you towards this article http://tutshelf.com/the-art-of-css-positioning/

    # June 20, 2009 at 9:00 pm

    Thanks for the input. I’ll give that article a thorough read…

    BTW, I completely see your point about the wrapping div. I think I just had it in there as a by-product of experimenting with positioning. Also, point taken re: id vs. class on the header div. :oops:

    Thanks again!

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

You must be logged in to reply to this topic.

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