html - Text inside navigation bar automatically moved to the right on other screen sizes -


i've been trying figure out days now. have problem text on navigation bar (this happens other lists between <div>s) behaves weirdly , keeps moving right when @ website on screen other 1 i'm programming on though use percentages. think problem lays in divdoesn't adjust correctly smaller or bigger getting screen.

this how looks on laptop , how want on screens of bigger or smaller size said on different screens moves right.

i'm new programmer if u see useless code please ignore i'm still learning lot, seems can't figure out.

html:

<div id="navbar">  <ol id="navbartext">      <a href="buynow.html"><li class="navbarhover" >buy now</li></a>     <li>&nbsp;</li>     <li class="lijn"></li>     <li>&nbsp;</li>     <a href="news.html"><li href="news.html" class="navbarhover">news</li></a>     <li>&nbsp;</li>     <li class="lijn"></li>     <li>&nbsp;</li>     <a href="media.html"><li href="media.html" class="navbarhover">media</li></a>     <li>&nbsp;</li>     <li class="lijn"></li>     <li>&nbsp;</li>     <a href="contact.html"><li href="contact.html" class="navbarhover">contact</li></a>     <li>&nbsp;</li>     <li class="lijn"></li>     <li>&nbsp;</li>     <a href="aboutus.html"><li href="aboutus.html" class="navbarhover">about us</li></a>  </ol></div>  

css:

#navbartext{ color: white; font-family: futura, verdana, arial; position: absolute; margin-left: 11%; margin-top: 1%; font-size: 120%; padding: 0%; }  #navbar{ position: absolute; height: 5%; width: 50%; top: 20%; left:50%; margin-left: -25.1%; padding: 5px; border: 3px solid #008cba; background-color: #333; margin-top: 2.5%; font-size: 100%; }     li{ list-style-type: none; display: inline; font-size: 102%; } 

if need see more code please tell me. reading need this. thanks

ul{    background-color:orange;    list-style-type: none;    display:block  }  li{    color:white;    display:inline-block;  }  #wrapper{    margin-top:5%;    height:5%;    margin-left:18%;    margin-right:18%;  }
<div id="wrapper">  <ul>  <a href="#"><li>arma</li></a>  <li>&nbsp;</li>  <li>sar</li>  <li>&nbsp;</li>  <li>vcs</li>  <li>&nbsp;</li>  <li>vcs</li>  <li>&nbsp;</li>  <li>vcs</li>  <li>&nbsp;</li>  <li>vcs</li>  <li>&nbsp;</li>  <li>vcs</li>  <li>&nbsp;</li>  </ul>  </div>

this example.other style put yourself.


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -