0

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

1 Answer 1

1

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.

1
  • thom...yeah, this ended up being too complicated...I ended up going in another direction. Jan 11, 2013 at 22:42

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.