went through the tutorial http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/ and tried the same to make a fixed top bar (just like Facebook,twitter,techCrunch and any other popular sites out there),but the bar fails on ZOOM.
Here’s an example of what i mean — http://rtabl.es/designingforstartups — if you zoom in that link,you can see that the content on the right disappears from the screen . Same thing is happening with me,and i dont want the content to disappear on zoom..
Here’s the test code,followed the tutorial and gave the container a position:fixed and the contents have position:relative with a float:left — wondering where i’m going wrong.
Code —
<html>
<style type="text/css">
#Contianer{
position: fixed;
height: 35px;
width: 100%;
z-index: 9999;
color: white;
background-color: #474747;
}
.x{
float: left;
text-align: center;
position: relative;
line-height: 35px;
border:1px solid white;
}
#a{
width:20%;
text-align: left;
min-width: 100px;
}
#b{
width:20%;
min-width: 100px;
text-align: left;
height: 35px;
display: table-cell;
}
#c{
min-width: 200px;
width:40%;
}
#d,#e{
min-width: 50px;
width:10%;
}
body{
border:0;
margin: 0;
}
</style>
<body>
<div class="Contianer" id="Contianer">
<div id="a" class="x">
foo
</div>
<div id="b" class="x">
bar
</div>
<div id="c" class="x">
tom
</div>
<div id="d" class="x">
jerry
</div>
<div id="e" class="x">
Out
</div>
</div>
</body>
After dwelling with this issue,finally found a solution — thanks to stackoverflow community!!.. here’s the link(had posted another question as this ques dint gain any output)
unable to get the scroll when position:fixed — elements disappears form the screen