I have a logo image that I want to center regardless of window size.
Despite trying auto margins, I haven't been successful in achieving this.
The logo image needs to overlap the bottom of my navigation bar, which is positioned above the logo.
HTML:
<div id="logo">
<img src="images/logorz.png" alt="logo" width="180px" />
</div>
CSS:
#logo {
position: absolute;
margin-left: 41%;
margin-top: -7%;
}
Navigation HTML:
<div id="nav">
<ul>
<li><img src="images/kranznav.png" alt="kranz" /><a href="index.php">COMPETE</a></li>
<li><img src="images/thumbnav.png" alt="thumb" /><a href="index.php">SCORE</a></li>
<li><img src="images/bagnav.png" alt="bag" /><a href="index.php">SHOP</a></li>
<li><img src="images/morenav.png" alt="more" /><a href="index.php">MORE</a></li>
</ul>
</div>
<div class="clear">
</div>
Navigation CSS:
#nav {
background: #ffffff;
width: 100%;
margin-top: -2em;
}
#nav ul {
list-style-type: none;
}
#nav li {
display: inline;
float: left;
width: 20%;
margin-left: 2%;
margin-right: 2%;
margin-top: 5%;
text-align: center;
}
#nav a {
display: block;
margin-right: 0 auto;
padding-left: 0 auto;
color: #5E09CB;
text-decoration: none;
}