Essentially, I am attempting to replicate the functionality that Twitter has on their webpage when you use CTRL+ to zoom in or increase the size of the web page.
Currently, I am experiencing displacement of elements upon zoom in and have not yet found a solution. This issue has persisted for a while without a resolution.
Any assistance is highly appreciated.
HTML:
<div class="h_headerbar">
<div class="h_navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Publishing</a></li>
</ul>
</nav>
</div>
</div>
CSS:
body{
background-color:#565656;
max-height:750px;
min-height:545px;
right:0;
left:0;
}
.h_headerbar{
width:100%;
background-color:black;
height:125px;
}
.h_navbar{
width:100%;
text-align:center;
display:table;
vertical-align:middle;
}
.h_navbar li{
list-style-type:none;
display:inline-block;
width:100px;
height:35px;
background-color:black;
text-align:center;
border:3px solid #111;
margin:0px 25px 0px 25px;
border-radius:5px;
}
.h_navbar li:hover{
background-color:#191919;
}
.h_navbar a{
text-decoration:none;
display:table-cell;
color:white;
font-size:18px;
vertical-align:middle;
width:100px;
height:35px;
}
Your help is greatly appreciated. I have a project that I am eager to start, but I want to avoid designing an entire page only to discover that it will cause element displacement.