Grow your CSS skills. Land your dream job.

Image positioning problem

  • # January 4, 2010 at 6:54 pm

    Take a look at the site here: http://clients.ekcetera.com/thunderhook/thunderhook

    I’m a novice at CSS. On this site, the words "Welcome to the Wilderness" is an image that is 85 px tall. I had it inside a div, but that didnt’ seem to do anything for me. What I want is for that image to bump up right underneath the navigation, but there’s about 20-30px of white space there now.

    Here’s the CSS:

    Code:
    body {
    background-color: #C2B59B;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: Arial, Helvetica, sans-serif;
    }
    .container {
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    }
    .logo {
    position: absolute;
    top: 25px;
    }
    .whitebackground {
    background-color: #FFF;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    height: 1000px;
    padding-top: 55px;
    }
    .mininav {
    text-align: right;
    width: 835px;
    margin-right: auto;
    margin-left: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    height: 25px;
    color: #036;
    }

    .header {
    background-image: url(images/header.jpg);
    width: 835px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 155px;
    background-repeat: no-repeat;
    }
    .mainnav {
    background-image: url(images/transparent.png);
    background-repeat: repeat;
    height: 25px;
    width: 835px;
    }

    /* Dropdown Menu Styling */

    .dropdown {
    float: left;
    position: relative;
    left: 123px;
    top: -16px;
    }

    .dropdown dt {
    cursor:pointer;
    padding-right: 15px;
    padding-left: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    line-height: 25px;
    }
    .dropdown dt:hover {
    background-color: #C2B59B;
    }
    .dropdown dd {
    overflow:hidden;
    width:200px;
    display:none;
    z-index:200;
    opacity:.6;
    background-color: #DED8C9;
    position: absolute;
    left: -40px;
    }
    .dropdown ul {
    list-style-position: outside;
    margin-left: -40px;
    font-size: 13px;

    }
    .dropdown li {
    display: inline;

    }
    .dropdown a, .dropdown a:active, .dropdown a:visited {
    display:block;
    color:#333;
    text-decoration:none;
    width:200px;
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-left: 15px;
    }
    .dropdown a:hover {
    color:#000;
    font-weight: bold;
    background-color: #C2B59B;
    }
    .dropdown .underline {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #999;
    }
    .welcomewilderness {
    text-align: center;
    height: 85px;
    }

    My questions are:
    1) Does that image need to be in a DIV?
    2) How do I get it to bump up to the bottom of the navigation? There seems to be something there that’s preventing it from doing so.

    HELP!!!

    # January 5, 2010 at 3:20 am

    Oo! There are some default values of margin in the browsers, in this case browser has positive margin-top at img tag, so you shilud add to your css file line: .welcomewilderness img { margin: 0; }
    or if you want to eliminate problem of default values you should make same reset ( * {margin: 0; padding: 0;} ).

    # January 5, 2010 at 1:59 pm

    Thanks for the suggestion, however, I don’t think it’s a margin issue. Take a look at the result of changing the div to margin:0.

    # January 5, 2010 at 2:51 pm

    Did you use Firebug? I recommand you!
    You have navigation built in weird way (a lot of dl-s) but it isn’t a problem. Each of those dl-s is too high. It is the margin problem but I think you sholud rebuild html code first.

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

You must be logged in to reply to this topic.

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