ul ajustar seu tamanho em relacao ao conteudo

guitarro17 · Dezembro 1, 2009

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 Dezembro 2, 2009 por guitarro17

Entrar

ul ajustar seu tamanho em relacao ao conteudo

Pergunta

guitarro17

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades