html - Horizontal Nav Bar coming up as vertical -
<html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <style> .topnav { background-color: #333; overflow: hidden; position: fixed; } .topnav1 { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; width: 100%; height: auto; } .topnav1:hover { background-color: #ddd; color: black; } .topnav1.active { background-color: #4caf50; color: white; } .homebutton { width: 5%; height: auto; border: solid; border-color: white float: left; align: center; } </style> </head> <body> <div class="topnav topnav1"> <a href="/" class="topnav topnav1"><img src="imagesource" class="homebutton"></img> </a> <a href="/about" class="topnav topnav1">about</a> <a href="/updates" class="topnav topnav1">updates</a> <a href="/contact" class="topnav topnav1">contact</a> </div> </body> </html> i trying design navigation bar photo home button, bar trying design horizontal , fixed @ top of page. keeps coming vertical , centered top of page. how can fixed.
please follow below show structure. need work lot on css. , wherever learning, check properties , current support browsers.
.topnav { background-color: #333; overflow: hidden; position: fixed; width: 100%; left: 0; top: 0; } .topnav1 { float: left; display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; height: auto; } .topnav1:hover { background-color: #ddd; color: black; } .topnav1.active { background-color: #4caf50; color: white; } .homebutton { width: 5%; height: auto; border: solid; border-color: white float: left; text-align: center; /* align:center obsolete */ } <div class="topnav"> <a href="/" class="topnav1"><img src="imagesource" class="homebutton"> </a> <a href="/about" class="topnav1">about</a> <a href="/updates" class="topnav1">updates</a> <a href="/contact" class="topnav1">contact</a> </div>
Comments
Post a Comment