Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

cashtter

Estilo frams com divs

Por , em Desenvolvimento frontend

Recommended Posts

cashtter    0

cashtter
Postado

Bom dia pessoal, preciso de ajuda com o código... Minha intenção é fazer como se fosse o e-mail, quando clicar na "Caixa de Entrada" aparece as mensagens na div do lado, e quando eu clicar na mensagem, ela vai abrir a mensagem na div do lado com os detalhes.

Minha dificuldade é fazer das divs como se fossem frames, pois uma só vai aparecer quando clicar em um dos botões.

Abaixo vou deixar meu código da página que quero fazer isso.

att, e agradeço desde já.

<style type="text/css">
/* ----- TABELAS -----  */

.tabelatable2{
    position:relative;
    top:-3px;
    left:-1px;
    width:100%; 
    margin-left:auto; 
    margin-right:auto;
    border-collapse:collapse;
    z-index:1;
}
.tabelatable2 thead th {
    margin-top:-100; 
    background:#124c75;
    font-size:16px;;
    text-align:center;
    padding-top:5px;
    height:60px;
    padding-left:30px;

}
.tabelatable2 th {
    background:#124c75;
    font-size:16px;;
    text-align:center;
    padding-top:5px;
    height:60px;
    padding-left:30px;

}
.tabelatable2 tr td input{
    font-size:14px;
    background:#fff;
    text-align:right;
    padding-top:5px;
    height:50px;
    border-right:#BBBBBB solid 1px;
    border-bottom:#BBBBBB solid 0px;
    border-top:#BBBBBB solid 0px;
    padding-right:15px;
    padding-left:25px;
}
.tabelatable2 tr td input:hover{
    width:100%;
    border-right:#BBBBBB solid 1px;
    color:#fff;
    background:#124c75;
    opacity:0.6;
    cursor:pointer;
}
.over {
    background: #B7D7F0;
}
/* ----- TABELAS 3 -----  */

.tabelatable3{
    position:relative;
    top:-38px;
    width:100%; 
    margin-left:auto; 
    margin-right:auto;
    border-collapse:collapse;
    z-index:88;
}
.tabelatable3 thead th {
    position:relative;
    margin-top:-100; 
    background:#1761ac;
    font-size:16px;;
    text-align:left;
    padding-top:5px;
    padding-bottom:5px;
    height:20px;
    padding-left:30px;
    width:100%;
    color:#fff;

}
.over {
    background: #B7D7F0;
}

/* ----- TABELAS -----  */

.tabelatable4{
    position:relative;
    top:-10px;
    width:100%; 
    margin-left:auto; 
    margin-right:auto;
    border-collapse:collapse;
    z-index:1;
}
.tabelatable4 tr td input{
    font-size:14px;
    background:#fff;
    text-align:left;
    padding-top:5px;
    height:50px;
    border-right:#BBBBBB solid 1px;
    border-bottom:#BBBBBB solid 0px;
    border-top:#BBBBBB solid 0px;
    padding-right:15px;
    padding-left:25px;
}
.tabelatable4 tr td input:hover{
    width:100%;
    border-right:#BBBBBB solid 1px;
    color:#fff;
    background:#124c75;
    opacity:0.6;
    cursor:pointer;
}
.over {
    background: #B7D7F0;
}
/* ----- TABELAS -----  */

.tabelatable5{
    position:relative;
    top:-40px;
    width:100%; 
    margin-left:auto; 
    margin-right:auto;
    border-collapse:collapse;
    z-index:1;
}
.tabelatable5 thead th {
    margin-top:-100; 
    background:#ccc;
    font-size:16px;;
    text-align:right;
    padding-top:5px;
    height:40px;
    padding-right:30px;
}
.tabelatable5 tr td {
    font-size:14px;
    text-align:left;
    padding-top:25px;
    height:20px;
    border-right:#BBBBBB solid 1px;
    padding-right:15px;
    padding-left:45px;
    
}
.tabelatable5 tr td img{
    height:60px;
    width:60px;
    border-radius:100%;
}
.tabelatable5 tr td strong{
    position:relative;
    top:-30px;
}
.tabelatable5 tr td .p1{
    position:relative;
    top:-30px;
    left:65px;
    font-size:10px;
}.mensagem{
    position:relative;
    left:15px;
}
.over {
    background: #B7D7F0;
}
.acoesSuporte{
    max-width:300px;
    position:absolute;
    margin-top:-32px;
    ;
}
.msgSuporte{
    width:200px;
    position:absolute;
    margin-top:-32px;
    margin-left: 124px;
}
.cabecalho{
    ;
    padding:0px;
}
.viewSuporte{
    position: relative;
    margin-top:0px;
    margin-left: 314px;
    padding-left:10px;	
}
</style>
<div class="cabecalho">
        <table class="tabelaTable3" border="0">
                <tr>
            <thead>
                <th>Suporte</th>
            </thead>
                </tr>
        </table>

</div>
<div class="acoesSuporte">
        <table class="tabelaTable2" border="0">
                <tr>
            <td><a href=""><input class="tabelatable2" name="" type="button" value="Caixa de Entrada"></a></td>
                </tr>
                <tr>
            <td><a href=""><input class="tabelatable2" name="" type="button" value="Caixa de Saida"></a></td>
                </tr>
                <tr>
            <td><a href=""><input class="tabelatable2" name="" type="button" value="Não Lidos"></a></td>
                </tr>
                <tr>
            <td><a href=""><input class="tabelatable2" name="" type="button" value="Lixo"></a></td>
                </tr>
        </table>
</div>
<div class="msgSuporte">
    <table class="tabelaTable4" border="0">
                <tr>
            <td><a href=""><input class="tabelatable4" name="" type="button" value="Mensagem 1"></a></td>
                </tr>
                <tr>
            <td><a href=""><input class="tabelatable4" name="" type="button" value="Mensagem 2"></a></td>
                </tr>
                <tr>
            <td><a href=""><input class="tabelatable4" name="" type="button" value="Mensagem 3"></a></td>
                </tr>
    </table>
</div>
<div class="viewSuporte">
    <form action="" method="post">
        <table class="tabelaTable5" border="0">
                <tr>
            <thead>
                <th>Lixo</th>
            </thead>
                </tr>
                <tr>
            <td>
                <img src="css/img/user.png">
                <strong>E-Mail: emaildoremetente@hotmail.com</strong>
                <p class="p1">Enviado dia 25/11/2015 às 00:57</p>
            </td>
                </tr>
                <tr>
            <td>   <b>Asuunto da mensagem</b></td>
                </tr>
                <tr>
            <td class="mensagem">Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.</td>
                </tr>
        </table>
    </form>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giihh    6

Giihh
Postado

eu sei que html e css não fazem isso, por isso vim perguntar como se faz, eu não sei fazer isso.

 

Para fazer isso sugiro estudar sobre javascript, jquery, etc.

 

Atualmente existem projetos pré prontos (frameworks) que ajudam os desenvolvedores, no seu caso acho que TABS são melhores do que usar frames que já é ultrapassado (na minha opinião).

 

Veja alguns exemplos:

 

http://jsfiddle.net/tj_vantoll/nn2qw/

http://www.bootply.com/74926

http://dbtek.github.io/bootstrap-vertical-tabs/demo.html

 

A diferença é que todo o conteudo estara em uma unico arquivo html (a não ser que esteja programando em php e queira uma organização melhor) não em varios arquivos html como seria se usar frames

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito