how align logo navigation bar?
my html code is:
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="icon" type="image/png" href="sencor_logo.ico"> <title>sencor</title> </head> <body> <div class="bg-div"> <img class="logo-img" src="sencor_logo.jpg" alt="align box" align=center> <nav> <ul> <li><a href="#">monitoring</a></li> <li><a href="#">process</a></li> <li><a href="#">post , create email/excel</a></li> <li><a href="#">reports</a></li> <li><a href="#">tools</a></li> <li><a href="#">sales</a></li> </ul> </nav> </div> </body> </html> and heres style.css code:
body{ margin: 0; padding: 0; font-size: 15px; } /* navigation */ nav{ margin: 0; overflow:hidden; text-align: center; } nav ul{ margin: 0; padding: 0; } nav ul li{ display: inline-block; list-style-type: none; } nav > ul > li > a{ color: #aaa; display: block; line-height: 2em; padding: 0.5em 1em; text-decoration: none; } ----------- .logo-img{ position: relative; margin: 10px 15px 15px 10px; } .bg-div{ background:#333; } i want display logo @ left side , navigation bar right side.
here's pen:
http://codepen.io/toddmoore/pen/jgvvpb
.logo-img { float: left; position: relative; margin: 10px 15px 15px 10px; } .bg-div { overflow: hidden; } nav { float: left; } i assuming want them set in traditional way. if want nav on opposite side of page float right.
you implement using flex, stick float if you're new css.
the overflow hidden allows container of 2 floated elements expand height, otherwise because floats escape flow of document container collapses.
Comments
Post a Comment