css - Can't align header (divs in divs in a container) -
i having trouble aligning header. want: , displaying me:
code:
<div class="banner"> <div id="portfolio"><a href="portfolio.html">portfolio</a></div> <div id="logo"><a href="index4.html"><img class="logo" src="images/mira-logo2.png" alt="mira-logo"></a></div> <div id="about"><a href="about.html">about</a></div> </div> </div>
css: #container{ margin: 0 auto; width: 100%; min-height: 100%; position: relative; }
#top { text-align: center; background-color:#fff; text-decoration: none; } .banner { margin-top: 14%; width: 100%; background-color:#000000; height: 28px; text-align: center; position: absolute; z-index: 1; left: 0; visibility: visible; } /*nav links*/ #portfolio { text-align: center; float: left; font-family: helvetica, arial; padding-top: 0.5%; padding-left: 25%; z-index: 2; top: 0; visibility: visible; } #logo { text-align: center; position: fixed; z-index: 2; top: 0; } img.logo { padding-top: 0.8%; width: auto; max-height: 100%; } #about { text-align: center; float: right; padding-top: 0.5%; font-family: helvetica, arial; padding-right: 25%; position: relative; z-index: 2; top: 0; visibility: visible; }
your #logo
fixed
. you'll need tell @ center of page manually, doing this:
#logo { left: 50%; margin-left: -100px; /* 1/2 of image width */ position: fixed; z-index: 2; top: 0; }
Comments
Post a Comment