Placement issue in header

programming web dev
1

Ok, can someone help with this… It’s probably simple, but i little bit green in this field.

I want my header to look like this (nevermind the background):

Right now i get the telephone and mail way below the header, and <H6> is probably coded to something not right…

Here’s my HTML:

<!DOCTYPE HTML>
<html>
<head>
<!--Call CSS files--><link rel="stylesheet" href="css/style.css"/><link rel="stylesheet" href="css/960_24_col.css"/>

</head>
<body>
<header class="container_24">
    <img class="prefix_1" src="images/header_logo.png" />        <headerMenu>        <ul id="contact">            <li>                <a href="mailto:post@bilfoto.no">                    <img src="images/envelope.png" /> <h6>Email</h6>                </a>            </li>            <li>                <img src="images/telephone.png" /> <h6>(+47) 918 45 891</h6>            </li>         </ul>    </headerMenu>        </header>
</body>
</html>

And here’s my CSS:

/* Makeshift CSS Reset */{
    margin: 0;
    padding: 0;
}


/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
    display: block;
}


a {
    text-decoration: none;
}


h6 {
    margin: 0;
    display: inline;
    padding-right: 15px;
    color: #b8b8b8;
    font-size: 10px;
    font-family: sans-serif;
}


.container_24 {
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
}


/* HEADER */


header {
    background: url(../images/header.png) repeat-x;




}


/* HEADER MENU */


headerMenu li {
    list-style: none;
    display: inline;
    float: right;
}

Images that i use: