HTML/CSS テンプレートを使用して Web アプリを作成しています。何らかの理由で、必要なウィンドウのサイズを変更すると、要素がテンプレート上にスライドバックしません。たとえば、右側にボタンをフロートさせると、全画面の左端に配置されます。次に、ウィンドウを水平に縮小すると、ボタンは元に戻りませんが、単に「ウィンドウによって隠されている」だけです。私はテンプレート CSS コードを何日も見ていて、どこでもグーグルで検索していますが、何が原因なのかまだわかりません。
テンプレートの CSS コードは次のとおりです。
body, html {
padding:0;
margin:0;
font-family: BBAlpha Sans;
font-size: 15pt;
overflow:visible;
}
body {
background-image: url('../images/stripes.png');
overflow:hidden;
}
.listSeparator
{
border-bottom: solid 1px Silver;
}
.label
{
display:inline;
float:left;
line-height:40px;
margin-left: 5px;
}
.row
{
height: 40px;
width:100%;
vertical-align: middle;
}
.tab
{
position:absolute;
top:70px;
padding: 10px;
}
.main-panel
{
position:relative;
}
.panel-top-left {
margin-right: 4px;
height: 4px;
background-image: url('../images/panel.png');
}
.panel-top-right {
margin-top: -4px;
margin-left: 4px;
background-position: 100% 0;
height: 4px;
font-size: 2px;
background-image: url('../images/panel.png');
}
.panel-bottom-left {
margin-right: 9px;
background-position: 0 -7px;
height: 9px;
font-size: 2px;
background-image: url('../images/panel.png');
}
.panel-bottom-right {
margin-top: -9px;
margin-left: 9px;
background-position: 100% -7px;
height: 9px;
font-size: 2px;
background-image: url('../images/panel.png');
}
.panel-inside {
border-left: 2px solid #D6D3D6;
border-right: 2px solid #D6D3D6;
background: White;
padding-left: 0px;
padding-right: 0px;
overflow:auto;
}
.panel-nogap {
margin-top: -3;
margin-bottom: -3;
}
.panel-nogap input
{
display:inline;
float:left;
font-family: BBAlpha Sans;
font-size: 16pt;
border: none;
padding-top: 0px;
width: 10px;
margin-top: 7px;
}
.buttonPanel
{
margin-top: 5px;
margin-left: 8px;
margin-bottom: 0px;
text-align:center;
position:relative;
}
a.tabButton {
background: transparent url('../images/tabs/tabRight.png') no-repeat scroll top right;
color: White;
display: block;
float: left;
height: 64px;
margin-right: 5px;
padding-right: 10px;
text-decoration: none;
width: 28%;
}
a.tabButton div {
background: url('../images/tabs/tab.png') no-repeat top left;
display: block;
height: 64px;
padding: 0px 0px 0px 10px;
line-height: 0px;
}
a.tabButton p
{
font-size: 10pt;
margin-top: 0px;
padding: 0px;
}
a.tabButton img
{
position:relative;
height:35px;
width:35px;
margin-top: 5px;
margin-bottom: 0px;
padding: 0px;
}
.tabSeparator
{
position: absolute;
top:69px;
background-color:#014EBE;
height:5px;
width: 100%;
z-index: -1;
}
テンプレートは次のようになります。
これを引き起こしている原因、または少なくとも私が何を探すべきかを誰かが知っている場合は、どんな助けでも大歓迎です。前もって感謝します！