oneman oneman - 28 days ago 8
CSS Question

Why does my nav bar affect the centering of my image?

If I have no nav bar, then my image is centred fine.

If I then add my nav bar (using an unordered list horizontal list) then my image is aligned more to the left of the page.

It's just a basic layout

<div>
<img ...>
<ul>....</ul>
</div>


Here is the full code (it isn't much, but it's still too much to post on here)
https://jsfiddle.net/ps84wbx0/

Unfortunately I can't add the image but I'm sure the case is the same for any image.

This is the page I am trying to create

enter image description here

Here's a snippet:


/* Logo Styling */
div.homepage {
position: fixed;
left: 50%;
}

img.homepage {
position: relative;
left: -50%;
}


/*Nav Bar Styling*/
ul {
list-style-type: none;
margin-left: -50%;
}

li.button {
display: inline-block;
margin: 0 1em 1em 0;
padding: 0 4em;
font: 300 1.5em/3em 'Open Sans', sans-serif;
letter-spacing: .08em;
color: #fff;
background: #0090C0;
border-radius: 2px;
}

li.button:hover{
background: #007DA7;
box-shadow: 0 0 3px rgba(black, .5) inset;
}

a:link, a:hover, a:active, a:visited {
text-decoration: none;
color: inherit;
}

<!DOCTYPE html>
<html>
<head>
<title>Template - Home</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="homepage">
<img src="images/homepage.png" class="homepage">
<ul>
<li class="button"><a href="index.html" data-text="Home">Home</a></li>
<li class="button"><a href="about.html" data-text="About">About</a></li>
<li class="button"><a href="services.html" data-text="Services">Services</a></li>
<li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
</ul>
</div>
</body>
</html>




Answer

There are multiple ways to solve this, but I think this one is one of the simplest. I've only changed the CSS of div.homepage, img.homepage and ul. Here's the code:

/* Logo Styling */
div.homepage {
    position: fixed;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
}

img.homepage {
    position: relative;
}


/*Nav Bar Styling*/
ul {
    list-style-type: none;
}

li.button {
    display: inline-block;
    margin: 0 1em 1em 0;
    padding: 0 4em;
    font: 300 1.5em/3em 'Open Sans', sans-serif;
    letter-spacing: .08em;
    color: #fff;
    background: #0090C0;
    border-radius: 2px; 
}

li.button:hover{
    background: #007DA7;
    box-shadow: 0 0 3px rgba(black, .5) inset;
}
 
a:link, a:hover, a:active, a:visited {
    text-decoration: none;
    color: inherit;
}
<div class="homepage">
    <img src="images/homepage.png" class="homepage">
    <ul>
        <li class="button"><a href="index.html" data-text="Home">Home</a></li>
        <li class="button"><a href="about.html" data-text="About">About</a></li>
        <li class="button"><a href="services.html" data-text="Services">Services</a></li>
        <li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
    </ul>
</div>

Comments