Dinamicamente dimensionamento guia feito de imagens
-
05-07-2019 - |
Pergunta
Eu estou tentando adicionar uma guia à minha página web que se parece com esta:
Usando este exemplo como base, eu comecei-o parcialmente trabalhando. Meus difere de caso, porque eu quero seção de texto para ser um fixo com, mas a cauda para dinamicamente redimensionar para assumir o resto do recipiente da guia.
Parece bom no IE 6, mas realmente não ocupam toda a largura do recipiente. No Firefox 3 não tornar bem em tudo: (o vermelho é uma área em branco entre os vãos ).
Como faço para obter este para processar corretamente tanto em IE6 e Firefox para ocupar toda a largura especificada para #Tab? # TAB4 é a área que eu gostaria de tamanho para ocupar tanto espaço quanto possível.
<style type="text/css">
#Tab
{
width: 300px;
}
#Tab1
{
background: #000 url(BlueTabSprite.png) no-repeat 0 -136px;
display: inline-block;
height: 23px;
padding-left: 4px;
}
#Tab2
{
background: #000 url(BlueTabSprite.png) repeat-x 0 -242px;
display: inline-block;
overflow: hidden;
padding-top: 4px;
height: 19px;
width: 100px;
}
#Tab3
{
background: #000 url(BlueTabSprite.png) no-repeat right -30px;
display: inline-block;
height: 23px;
padding-right: 6px;
}
#Tab4
{
background: #000 url(BlueTabSprite.png) repeat-x 0 -83px;
display: inline-block;
height: 23px;
width:60%
}
#Tab5
{
background: #000 url(BlueTabSprite.png) no-repeat right -189px;
display: inline-block;
height: 23px;
padding-right:6px;
}
</style>
<div id="Tab">
<span id="Tab1">
<span id="Tab3">
<span id="Tab2">Test Tab</span>
</span>
</span>
<span id="Tab5">
<span id="Tab4"></span>
</span>
</div>
Solução
Esta é uma versão simplificada que funciona:
<div style="background: url('BlueTabSprite.png') no-repeat; width: 290px; min-width: 120px; max-width: 290px; height: 23px;">
<div style="float: right; background: url('BlueTabSprite.png') top right no-repeat; width: 10px; height: 23px;"></div>
Test
</div>
Outras dicas
Eu acho que a Portas de correr Técnica pode ser o que você está procurando.
Este ferramenta pode ser uma ajuda.