1

I'm trying to build a header/navigation system for a web template that I'm making, and here's an overview of what I'm trying to do: https://i.stack.imgur.com/NDwok.png

This is my CSS code.

#header {
    margin:0 auto;
    width:1000px;
    height:auto;
    background-color:#666;
}

#header .navimg {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(../images/header_img.png) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

#header ul {
    list-style-type: none;
}

#header ul li {
    display: inline;
}

Here's my HTML that I'm using.

<body>
    <div id="header">
        <ul>
            <li><a href="">Durka Durk</a></li>
            <li><a href="">Durka Durk</a</li>
            <li><div class="navimg"></div></li>
            <li><a href="">Durka Durk</a></li>
            <li><a href="">Durka Durk</a></li>
        </ul>
    </div>
</body>

This is what I get when I run it: https://i.stack.imgur.com/T2teh.png (looks choppy because I'm just starting it).

I want the middle image to be displayed in the same line as the links, and not on a new one. How can I achieve this?

0

3 Answers 3

1

If you change the display: inline; to float: left; then you will achieve your desired effect.

You will need to add the image height to your header div to allow the color to show.

I have a fiddle to show you how it'll look.

#header ul li {
  float: left;
}

#header {
  margin:0 auto;
  width:1000px;
  height: 300px;
  background-color:#666;
}

JSFIDDLE

1
  • No problem mate! I am glad I could have helped and best of luck in your design. Oct 18, 2013 at 15:10
0

Showing stuff in one line, which be achieved using display: inline for those both elements. In your case ul and img.

You can also try to alter the width and height of the image.

0

Try this. You have to "float left li" rather than using "display inline". And add padding on anchor tag to adjust.

Something like that. Click Here

    #header ul li {
    float: left;
}

    #header ul li a
{
    display:inline-block;
    padding:100px 1px; /*set it or margin on it.*/
}
2
  • How can I float the lis floating to the left but still keep everything centered? Oct 18, 2013 at 15:35
  • @BrandonJackson you have to give the "UL" margin:0 auto; it will make it center. But the parent(<div id="header">) of "UL" should floating . so that your design do not get problem in all browsers
    – user2021917
    Oct 19, 2013 at 4:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.