Navigation with Centered Logo

StackOverflow https://stackoverflow.com/questions/11616921

Вопрос

I am using dynamic content (WordPress) and would like to center a logo in the middle of a list like: http://www.munto.net/queed-v1/.

I tested it out and my theory works, provided the number of items on both sides is the same...but if they're different it messes up the navigation.

You can see a live example at: http://joshrodgers.com/.

What I did was made my logo a background image and centered that to my unordered-list, then I set a width on each list-item (so that if there was a super-long one it wouldn't mess up the navigation), and finally after the third link I put a 200px margin on to the right of the list-item (that way there is no list-item over the logo)...but like I said this works perfectly if the number of items is even, if the items equal an odd number it looks funny.

Not sure what the best way to do this, so - what would be the best way to fix this?

Page Code:

<html>
    <head>
        <title>Josh Rodgers - El Paso, Texas</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <ul>
            <li>Home</li>
            <li>About Us</li>
            <li class="example">super new lodge</li>
            <li>Programs</li>
            <li>Events</li>
            <li>Contact Us</li>
           <li>Contact Us</li>
        </ul>
    </body>
</html>

CSS Style:

/* Reset */
@import url("reset.css");

body {
    margin: 0 auto;
    position: relative;
    width: 1000px;
}

ul {
    background: #ff0000 url("images/example.jpg") top center no-repeat;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    width: 1000px;
}

li {
    background: #ffff00;
    color: #ff0000;
    display: inline-block;
    font-size: 20px;
    padding: 20px 0;
    position: relative;
    top: 70px;
    width: 100px;
}

li.example {
    margin-right: 200px;
}

*Figured I'd work on a normal php solution before integrating it into WordPress.

Thanks, Josh

Это было полезно?

Решение

From a design point of view i would maybe consider making the logo the home link. A lot of web users are accustomed to clicking the logo and it taking them home. You could still incorporate the home text underneath the logo.

I would probably not use your method of margin-right: 200px to not cover the logo, anything you change before that list item will shift the margin.

Ultimately i would suggest rethinking having the logo set as a background-image and make it one of the list items.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top