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

Popular posts from this blog

c# - Update a combobox from a presenter (MVP) -

How to understand 2 main() functions after using uftrace to profile the C++ program? -

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -