https://stackoverflow.com/questions/23483911
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianthe position on the tool_button is fixed. make it relative and it will stay inside the window
Responsive css to fit in any browser and resolution
-
16-07-2023 - |
Question
Hi everyone can you pls help me?? What Im trying to do is everytime i ZOOM IN the BROWSER i want it to still fit on the screen or browser SPECIALLY in IE! Please..
The problem is everytime i zoom in the tool_button fades and the other controls please help thanks!
this is what i have..
CSS
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background:#ecf0f1;
}
body {
font-family: helvetica, arial, sans-serif;
width: 100%;
overflow-y: scroll;
}
.main {
width: 100%;
height: 100%;
}
.panel {
min-height: 100%;
}
.sidebar {
width: 8%;
background-color: #111;
text-align: center;
position: fixed;
}
.sidebar ul {
padding: 24px 0;
}
.main-box {
float: right;
width: 75%;
margin-right:15%;
margin-top:2%;
background:rgba(255,255,255,0.2);
box-shadow:rgba(0,0,0,0.6) 0 1px 4px 0;
border-bottom:10px solid #0dabc9;
}
h2
{
font-size: 10pt;
font-weight: bold;
}
img
{
height:50px;
width:50px;
}
.tabletextgroup
{
margin-top:20px;
margin-bottom:20px;
}
.textgroup
{
position:relative;
font-weight:bold;
font-size:11px;
color:#555;
padding:4px;
}
.textgroup span
{
display:inline-block;
width:10%;
border:1px solid #2980b9;
padding:5px;
/*background:#bdc3c7;*/
background:#2980b9;
border-radius:2px;
}
.textgroup span img
{
vertical-align:bottom;
width:16px;
height:16px;
padding:0px 1px;
}
.textgroup input[type=textbox]
{
border:1px solid #b0b0b0;
padding:5px;
margin-left:-1px;
width:75%;
}
.checkgroup, .emptygroup
{
vertical-align:top;
font-weight:bold;
font-size:10px;
color:#444;
display:block;
}
.emptygroup
{
vertical-align: top;
font-weight:bold;
font-size:10px;
color:#444;
display: block;
margin-top:-11px;
}
.checkgroup, .emptygroup
{
padding:5px;
}
.checkgroup input[type="checkbox"]
{
display:none;
}
.emptygroup input[type="checkbox"]
{
display:none;
}
.checkgroup span
{
display:inline-block;
width:15%;
border:1px solid #ccc;
padding:4px;
border-radius:2px 0 0 2px;
text-align: left;
background:#2980b9;
color:#fff;
font-size:7pt;
}
.emptygroup span
{
display:inline-block;
width:15%;
padding:4px;
text-align:left;
background:none;
margin-left:2px;
}
.checkgroup span img, .emptygroup span img
{
vertical-align:bottom;
width:16px;
height:16px;
padding:0px 5px;
}
.checkgroup label, .emptygroup label
{
vertical-align:top;
margin-left:-1px;
width:18%;
text-align:left;
text-indent:5px;
display:inline-block;
border:1px solid #ccc;
padding:6px 5px;
font-size:7pt;
}
.emptygroup label
{
vertical-align: top;
margin-left:-1px;
width:18%;
text-align:left;
text-indent:5px;
display:inline-block;
border:1px solid #ccc;
border-top:0;
padding:6px 5px;
font-size:7pt;
}
.checkgroup input[type="checkbox"]:checked + label
{
background: #555;
//box-shadow: inset 0 -10px 20px -10px rgba(0,0,0,.3);
color: #fff;
}
.emptygroup input[type="checkbox"]:checked + label
{
background:#555;
color:#fff;
}
.no_ne
{
height:11px;
}
.tool_button{
float:right;
position:fixed;
width:90px;
background:#0DABC9;
margin-left:1100px;
margin-top:-590px;
border-top:30px solid #555;
border-radius:5px;
}
HTML
<body>
<div class="main">
<div class="sidebar panel">
<ul>
<li><img src="images/add.png" id="add"><p class="txt-add"></p></li>
<li><img src="images/view.png" id="view"><p class="txt-view"></p></li>
<li><img src="images/setting.png" id="setting"><p class="txt-setting"></p></li>
<li><img src="images/logout.png" id="logout"><p class="txt-logout"></p></li>
</ul>
</div>
<div class="main-box ">
<table class = "tabletextgroup">
<tr>
<td class = "textgroup"><span><img src = "images/platform2.png"></span><input type = "textbox" placeholder = "Platform"></td>
<td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Version / Length"></td>
<td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Telecast date"></td>
</tr>
<tr>
<td class = "textgroup"><span><img src = "images/platform2.png"></span><input type = "textbox" placeholder = "Agency"></td>
<td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Cost"></td>
<td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Account Executive"></td>
</tr>
<tr>
<td class = "textgroup"><span><img src = "images/platform2.png"></span><input type = "textbox" placeholder = "Advertiser"></td>
<td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Reference Number"></td>
</tr>
<tr>
<td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Product"></td>
<td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Program"></td>
</tr>
</table>
</div>
<div class="main-box ">
<p class="checkgroup"><span><img src = "images/program.png">PROGRAM :</span><input type="checkbox" id="program-replaced"/><label for='program-replaced'>SAMPLE </label><input type="checkbox" id="program-blocktimer"/><label for='program-blocktimer'>SAMPLE </label><input type="checkbox" id="not-in-bms"/><label for='not-in-bms'>SAMPLE</label></p>
<p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="1"/><label for='1'>SAMPLE</label><input type="checkbox" id="2"/><label for='2' class = "no_ne"></label><input type="checkbox" id="3"/><label for='3' class = "no_ne"></label></p>
<p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="4"/><label for='4'>TO & BG DO NOT TALLY</label><input type="checkbox" id="5"/><label for='5'>SAMPLE</label><input type="checkbox" id="6" /><label for='6' class = ""></label></p>
<p class="checkgroup"><span><img src = "images/program.png">SAMPLE</span><input type="checkbox" id="6"/><label for='6'>SAMPLE</label><input type="checkbox" id="7"/><label for='7' class = "no_ne"></label><input type="checkbox" id="not-in-bms"/><label for='not-in-bms' class = "no_ne"></label></p>
<p class="checkgroup"><span><img src = "images/program.png">SAMPLE</span><input type="checkbox" id="8"/><label for='8'>SAMPLE</label><input type="checkbox" id="9"/><label for='9' class = "no_ne"></label><input type="checkbox" id="10"/><label for='11' class = "no_ne"></label></p>
<p class="checkgroup"><span><img src = "images/program.png">SAMPLE</span><input type="checkbox" id="12"/><label for='12'>SAMPLE</label><input type="checkbox" id="13"/><label for='13'>SAMPLE</label><input type="checkbox" id="14"/><label for='14'>SAMPLE</label></p>
<p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="15"/><label for='15'>SAMPLE</label><input type="checkbox" id="16"/><label for='16'>SAMPLE</label><input type="checkbox" id="17"/><label for='17'>SAMPLE</label></p>
<p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="18"/><label for='18'>SAMPLE</label><input type="checkbox" id="19"/><label for='19'>SAMPLE</label><input type="checkbox" id="20"/><label for='20'>SAMPLE</label></p>
<p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="21"/><label for='21'>SAMPLE</label><input type="checkbox" id="22"/><label for='22'>SAMPLE</label><input type="checkbox" id="23"/><label for='23'>WITH CP / INV</label></p>
<p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="24"/><label for='24'>SAMPLE</label><input type="checkbox" id="25"/><label for='25'>SAMPLE</label><input type="checkbox" id="26"/><label for='26'>SAMPLE</label></p>
</div>
<div style="clear: both;"></div>
<div class = "tool_button">
<input type = "submit" id = "formsubmit" text = "SUBMIT">
<input type = "submit" id = "formclear" text = "CLEAR">
</div>
</div>
</body>
</html>
La solution
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
