Ir para conteúdo
Fórum Script Brasil
  • 0

Border Do Li Do Mesmo Tamanho Da Ul

kuroi

Perguntado por kuroi,

 Share

Pergunta

kuroi

kuroi

Postado
Postado

tenho uma tabela que fiz dentro de uma div, usando ul e li:

<div id="faq_mostra_respostas_lista">
    <ul class="linha">
        <li style="width: 50%; border-left: 0; text-align: left;"><script><br>function checkLength(areaObject, maxLength) {<br>  if (areaObject.value.length>maxLength){<br>    areaObject.value=areaObject.value.substr(0, maxLength);<br>    alert("O número máximo de caracteres é " + maxLength +".");<br>  }<br>        }<br></script><br><textarea cols=70 rows=10 name=MEN_texto class=formu onkeyup="checkLength(this, 255)"></textarea><br></li>
        <li style="width: 25%;">Reinaldo  </li>
        <li style="width: 22%">13/08/2003 10:31</li>
        <li style="width: 2.9%;">X</li>                    
        
    </ul>
</div>
[/code]

essa tabela eu monto pegando dados de um banco usando asp. no caso, aqui so tem uma linha.
o style dela é assim:

[code].linha {background-color: #FFEFD0; color: #000000; font: 9px Verdana, sans-serif;}
#faq_mostra_respostas_lista
{
    position: relative;
    
    width: 90%;
    left: 5%;    

    margin-top: 1px;
}
 #faq_mostra_respostas_lista ul li
{
    display: inline;

    height: 20px;

    padding-top: 3px;
    padding-left: 3px;    

    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;

    text-align: center;
}

o problema é que a primeira li fica com o texto muito grande. ou seja o espaco da primeira coluna (height) fica maior que o os das otras. e o border-right vai ter sempre o tamanho exato da li. se uma li for maior que a outra a borda não chega no alto da ul (sendo que estou com vertical align center). preciso que a linha corte toda a ul.

o mesmo problema para a border-bottom, que fica imediatamente embaixo do texto da li, mas deveria ficar la embaixo, onde quebra a ul.

se não deu pra entender poste, mas da uma ajuda aí.

obs: não confundam, essa parte:

<script><br>function checkLength(areaObject, maxLength) {<br> if (areaObject.value.length>maxLength){<br> areaObject.value=areaObject.value.substr(0, maxLength);<br> alert("O número máximo de caracteres é " + maxLength +".");<br> }<br> }<br></script><br><textarea cols=70 rows=10 name=MEN_texto class=formu onkeyup="checkLength(this, 255)"></textarea><br>
não é codigo e sim o texto que vai aparecer dentro da li.
Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 0
kuroi

kuroi

Postado
  • Autor
Postado

é que o forum transformou as & lt ; em <.

tente assim e veja se você entende:

<html>
<head>
<style>
.linha {background-color: #FFEFD0; color: #000000; font: 9px Verdana, sans-serif;}
#faq_mostra_respostas_lista
{
    position: relative;
    
    width: 90%;
    left: 5%;    

    margin-top: 1px;
}
#faq_mostra_respostas_lista ul li
{
    display: inline;

    height: 20px;

    padding-top: 3px;
    padding-left: 3px;

    vertical-align: middle;

    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;

    text-align: center;
}
</style>
</head>

<body>
<div id="faq_mostra_respostas_lista">
    <ul class="linha">
        <li style="width: 50%; border-left: 0; text-align: left;">Xscript>Xbr>function checkLength(areaObject, maxLength) {<br>  if (areaObject.value.length>maxLength){<br>    areaObject.value=areaObject.value.substr(0, maxLength);<br>    alert("O número máximo de caracteres é " + maxLength +".");<br>  }<br>        }<br></script><br>Xtextarea cols=70 rows=10 name=MEN_texto class=formu onkeyup="checkLength(this, 255)"></textarea><br></li>
        <li style="width: 25%;">Reinaldo  </li>
        <li style="width: 22%">13/08/2003 10:31</li>
        <li style="width: 2.9%;">X</li>                    
        
    </ul>
</body>
</div>[/code]
valeu fercosmig
Link para o comentário
Compartilhar em outros sites
  • 0
kuroi

kuroi

Postado
  • Autor
Postado

valeu, resolvi usando uma funcao js:

function AjustaTamanho(oDiv)
{
    var i; var k;
//    var oWorkItem=event.srcElement;
    var aReturn=oDiv.getElementsByTagName("UL");

    for (i=0;i<aReturn.length;i=i+1)
    {
        if (aReturn[i].childNodes[3].scrollHeight>aReturn[i].childNodes[0].scrollHeight)
        {
            aReturn[i].childNodes[0].style.posHeight=aReturn[i].childNodes[3].scrollHeight;
            k=aReturn[i].childNodes[3].scrollHeight;
        }
        else
        {
            k=aReturn[i].childNodes[0].scrollHeight;
        }
        aReturn[i].childNodes[1].style.posHeight=k;
        aReturn[i].childNodes[2].style.posHeight=k;
        aReturn[i].childNodes[3].style.posHeight=k;

        if (aReturn[i].childNodes[0].scrollHeight>40)
        {
            aReturn[i].childNodes[1].style.paddingTop=aReturn[i].childNodes[0].scrollHeight/2;
            aReturn[i].childNodes[2].style.paddingTop=aReturn[i].childNodes[0].scrollHeight/2;
            aReturn[i].childNodes[3].style.paddingTop=aReturn[i].childNodes[0].scrollHeight/2;
        }
    }
}    [/code]


pra chamar é assim:

[code]        <script>
            AjustaTamanho(document.all.item('faq_mostra_respostas_lista'));
        </script>

mas se alguém tiver um jeito mais simples, posta aí.

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      652k
×
×
  • Criar Novo...