Criar barra de rolagem nos grupos

Detalhes da questão

Endereço do fórum: http://riseofheroes.forumeiro.com
Versão do fórum: PunBB

Descrição

Olá! Então, eu estou usando um theme que vem apenas com oito grupos inclusos no CSS originais, como vocês podem ver abaixo.

CSS

Código:

#ley1 a, #ley2 a, #ley3 a, #ley4 a, #ley5 a, #ley6 a, #ley7 a, #ley8 a {
color: #fff;
border-bottom: 2px solid #0d0d0d;
display: inline-block;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: 0px;
text-align: center;
width: 153px;
line-height: 31px;
}

#ley1 {background: #844629; }
#ley2 {background: #A82233; }
#ley3 {background: #5CA2A1; }
#ley4 {background: #799446; }
#ley5 {background: #2F3D43; }
#ley6 {background: #659065; }
#ley7 {background: #E8504D; }
#ley8 {background: #512E3F; }

Java

Código:

<table><tr>
     <td><div id="ley1"><a href="link">primer grupo</a></div>
     <div id="ley2"><a href="link">segundo grupo</a></div>
     <div id="ley3"><a href="link">tercer grupo</a></div>
     <div id="ley4"><a href="link">cuarto grupo</a></div></td>
     <td><div id="ley5"><a href="link">quinto grupo</a></div>
     <div id="ley6"><a href="link">sexto grupo</a></div>
     <div id="ley7"><a href="link">séptimo grupo</a></div>
     <div id="ley8"><a href="link">octavo grupo</a></div></td>
       </tr></table>

Porém quando eu fui adicionar mais grupos, ficou assim. Não sei se fiz certo ou errado. Então queria saber se tem como por uma barra de rolagem na área dos grupos para problema não persistir. Tem?

Você pode usar este código:
<div id="Layer1" style="position:absolute; left:10px; top:20px; width:100; height:50; z-index:1; overflow: auto">Você
 pode colocar o texto que quiser aqui.</div>

Opções:

overflow: visible, ou overflow: hidden, ou overflow: scroll, ou overflow: auto

visible: Todo o conteúdo da camada aparecerá indiferente do tamanho.

hidden: A parecerá apenas o conteúdo, que couber no tamanho especificado da camada.

scroll: A barra de rolagem aparece mesmo se não for necessário.

auto: A barra de rolagem aparecerá somente se necessário.

Atenciosamente, Vinael.

Onde necessariamente eu código, Vinael?

E aí, amiga? Beleza?

Coloquei uma barra de rolagem vertical, mas para isso tive que diminuir a largura dos "ícones" dos grupos. Espero que não se importe.

Substitua o CSS por esse.

Código:

#esta-con, #esta-ley, #esta-ult {
max-height: 155px;
overflow: auto;
}
#ley1 a, #ley2 a, #ley3 a, #ley4 a, #ley5 a, #ley6 a, #ley7 a, #ley8 a {
color: #fff;
border-bottom: 2px solid #0d0d0d;
display: inline-block;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: 0px;
text-align: center;
width: 145px;
line-height: 31px;
}
#ley1 {background: #844629; }
#ley2 {background: #A82233; }
#ley3 {background: #5CA2A1; }
#ley4 {background: #799446; }
#ley5 {background: #2F3D43; }
#ley6 {background: #659065; }
#ley7 {background: #E8504D; }
#ley8 {background: #512E3F; }

Funcionou perfeitamente, Key of Destiny. Obrigada mais uma vez, seu trabalho é excelente!