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> </li> <li class="lijn"></li> <li> </li> <a href="news.html"><li href="news.html" class="navbarhover">news</li></a> <li> </li> <li class="lijn"></li> <li> </li> <a href="media.html"><li href="media.html" class="navbarhover">media</li></a> <li> </li> <li class="lijn"></li> <li> </li> <a href="contact.html"><li href="contact.html" class="navbarhover">contact</li></a> <li> </li> <li class="lijn"></li> <li> </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> </li> <li>sar</li> <li> </li> <li>vcs</li> <li> </li> <li>vcs</li> <li> </li> <li>vcs</li> <li> </li> <li>vcs</li> <li> </li> <li>vcs</li> <li> </li> </ul> </div>
this example.other style put yourself.
Comments
Post a Comment