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

ul ajustar seu tamanho em relacao ao conteudo


guitarro17

Pergunta

Bom, eu fiz esse menu em accordion de acordo com uns tutoriais por ai, mas eu estou com um problema que eu acho melhor voces verem pra ententer.

Sei que devo ter feito coisa errada, mas não manjo muito de CSS e queria a ajuda de vocês pra tentar resolver isso.

Valeu!

Codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Javascript Accordions - by www.dezinerfolio.com</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
    list-style:none;
}
body {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    overflow-x:hidden;
}

#basic-accordian{
    width:100%;
    position:relative;
    margin-top:-10px;
    text-align:center;
}

.accordion_headings{
    color:#FFFFFF;
    border:1px solid #18333A;
    cursor:pointer;
    width:100% -1px;
    height:35px;
    text-align:center;
}

.accordion_headings:hover{
    background:#00CCFF;
}

.empresa{
    background:#6CA8B5;
}

.abraSuaConta{
    background:#3090A6;
}

.assessoria{
    background:#148CA8;
}

.produtos{
    background:#076980;
}

.cursos{
    background:#6CA8B5;
}

.educacional{
    background:#3090A6;
}

.negociacao{
    background:#148CA8;
}

.contato{
    background:#076980;
}

.menu_interno{
    padding:5px;
    color:#FFFFFF;
    border:1px solid #18333A;
    cursor:pointer;
    font-size:11px;
    color:#FFF;
    width:30%;
    height:16px;
    text-align:right;
}

.div_interno{
    color:#FFFFFF;
    width:30%;
    text-align:justify;
    float:right;
    margin-right:37%;
}
.menu_interno_escuro{
    background-color:#076980;
}

.menu_interno_claro{
    background-color:#148CA8;
}
.menu_interno:hover{
    background:#00CCFF;
}

</style>
&lt;script src="jquery-1.2.1.min.js" type="text/javascript"></script>
&lt;script src="menu-collapsed.js" type="text/javascript"></script>
&lt;script type="text/javascript">
    function centraliza(){
        
        var wTela = screen.width;
        var wPic = 1847;
        if(wPic > wTela){
            var wDif = wPic - wTela;
            window.scrollTo(wDif/2,0);
        }
    }
</script>
</head>

<body onload="centraliza();">
<center>
<table height="100%" width="100%">
    <tr>
        <td ><img src="cabecalho.jpg" /></td>
    </tr>
    <tr>
        <td>
            <div id="basic-accordian">
                <ul id="menu">
                    <li class="empresa">
                        <div class="accordion_headings" >Empresa</div>
                        
                        <ul style="height:auto">
                            <li id='empresa_apresentacao' class="div_interno" style="display:none;" >
                            texto texto texto texto texto texto texto texto texto texto texto texto <br />
                            texto texto texto texto texto texto texto texto texto texto texto texto 
                            texto texto texto texto texto texto texto texto texto texto texto texto <br />
                            texto texto texto texto texto texto texto texto texto texto texto texto 
                            texto texto texto texto texto texto texto texto texto texto texto texto <br />
                            texto texto texto texto texto texto texto texto texto texto texto texto 
                            texto texto texto texto texto texto texto texto texto texto texto texto <br />
                            texto texto texto texto texto texto texto texto texto texto texto texto  <br /><br /></li>
                            <li class="menu_interno menu_interno_claro" 
                                onclick="document.getElementById('empresa_apresentacao').style.display='block'">Apresentação</li>
                            <li class="menu_interno menu_interno_escuro" >Diferencial</li>
                            <li class="menu_interno menu_interno_claro">Visão, Missão e Valores</li>
                            <li class="menu_interno menu_interno_escuro">Parcerias</li>
                        </ul>
                        
                    </li>
                    
                    <li class="abraSuaConta">
                        <div class="accordion_headings">Abra sua conta</div>
                        <ul>
                            <li class="menu_interno menu_interno_claro" >Pessoa física</li>
                            <li class="menu_interno menu_interno_escuro" >Pessoa jurídica</li>
                        </ul>
                    </li>
                    
                    <li class="assessoria">
                        <div class="accordion_headings">Assessoria</div>
                        <ul>
                            <li class="menu_interno menu_interno_claro" >Como funciona</li>
                            <li class="menu_interno menu_interno_escuro" >Home Broker</li>
                            <li class="menu_interno menu_interno_claro" >Mesa de operações</li>
                            <li class="menu_interno menu_interno_escuro" >Apuração de IR</li>
                        </ul>
                    </li>
                    
                    <li class="produtos">
                        <div class="accordion_headings">Produtos</div>
                        <ul>
                            <li class="menu_interno menu_interno_claro" >Mercados de Ações</li>
                            <li class="menu_interno menu_interno_escuro" >Mercado de Opções</li>
                            <li class="menu_interno menu_interno_claro" >Mercado a Termo</li>
                            <li class="menu_interno menu_interno_escuro" >Aluguel de ações</li>
                            <li class="menu_interno menu_interno_claro" >BM&F</li>
                            <li class="menu_interno menu_interno_escuro" >Clubes de Investimento</li>
                            <li class="menu_interno menu_interno_claro" >Títulos Públicos</li>
                            <li class="menu_interno menu_interno_escuro" >Câmbio</li>
                            <li class="menu_interno menu_interno_claro" >Conta Margem</li>
                            <li class="menu_interno menu_interno_escuro" >Ofertas Públicas (IPO)</li>
                            <li class="menu_interno menu_interno_claro" >Seguros</li>
                        </ul>
                    </li>
                    
                    <li class="cursos">
                        <div class="accordion_headings">Cursos e Palestras</div>
                        <ul>
                            <li class="menu_interno menu_interno_claro" >Cursos</li>
                            <li class="menu_interno menu_interno_escuro" >Monte um curso na sua cidade</li>
                            <li class="menu_interno menu_interno_claro" >Turmas particulares</li>
                            <li class="menu_interno menu_interno_escuro" >Agenda</li>
                        </ul>
                    </li>
                    
                    <li class="educacional">
                        <div class="accordion_headings">Educacional</div>
                        <ul>
                            <li class="menu_interno menu_interno_claro" >Perfil do Investidor</li>
                            <li class="menu_interno menu_interno_escuro" >Glossário</li>
                            <li class="menu_interno menu_interno_claro" >Ações</li>
                            <li class="menu_interno menu_interno_escuro" >Opções</li>
                            <li class="menu_interno menu_interno_claro" >Termo</li>
                            <li class="menu_interno menu_interno_escuro" >Tributação</li>
                            <li class="menu_interno menu_interno_claro" >Oferta pública de ações</li>
                            <li class="menu_interno menu_interno_escuro" >Aluguel de ações</li>
                            <li class="menu_interno menu_interno_claro" >BM&F </li>
                            <li class="menu_interno menu_interno_escuro" >Tesouro direto</li>
                            <li class="menu_interno menu_interno_claro" >Dúvidas Frequentes</li>
                            <li class="menu_interno menu_interno_escuro" >Regulamentos e normas</li>
                            <li class="menu_interno menu_interno_claro" >Biblioteca</li>
                        </ul>
                    </li>
                    
                    <li class="negociacao">
                        <div class="accordion_headings">Negociação Eletrônica</div>
                        <ul>
                            <li class="menu_interno menu_interno_claro" >Home Broker</li>
                            <li class="menu_interno menu_interno_escuro" >Plataforma</li>
                            <li class="menu_interno menu_interno_claro" >TOVmóbile</li>
                        </ul>
                    </li>
                    
                    <li class="contato">
                        <div class="accordion_headings">Contato</div>
                        <ul>
                            <li class="menu_interno menu_interno_claro" >Fale Conosco</li>
                            <li class="menu_interno menu_interno_escuro" >Horários de Atendimento</li>
                            <li class="menu_interno menu_interno_claro" >Trabalhe Conosco</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
    <tr>
        <td ><img src="rodape.jpg" style="margin-top:-2px"/></td>
    </tr>
</table>

</center>
</body>
&lt;script>
    function mudaCor(cor){
        alert(cor);
        document.getElementById('basic-accordian').style.backgroundColor = cor;
    }
</script>
</html>

Editado por guitarro17
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

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