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

Estilo frames com div

cashtter

Perguntado por cashtter,

 Share

Pergunta

cashtter

cashtter

Postado
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;
    margin-left: -21px;
}
.msgSuporte{
    width:200px;
    position:absolute;
    margin-top:-32px;
    margin-left: 124px;
}
.cabecalho{
    margin-left:-21px;
    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>&nbsp;&nbsp;&nbsp;<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>

 

Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0
cashtter

cashtter

Postado
  • Autor
Postado

ainda não coloquei nada em php, pois eu montei toda a estrutura primeiro, para começar a encaixar o php nos lugares certinhos.... Neste caso, sera nos lugares onde se encontram as divs (as mensagens)... mas isso eu sei fazer, só queria saber como posso usar essas divs como frames, pois quando clicar em por exomplo: Caixa de entrada, ele vai aparecer todas as mensagens da caixa de entrada na: 

<div class="msgSuporte">

 E quando clicar na mensagem, ela vai abrir os detalhes da mensagem na: 

<div class="viewSuporte">
Link para o comentário
Compartilhar em outros sites
  • 0
lowys

lowys

Postado
Postado

Ôppa! beleza?

Faz assim:

Você vai colocar duas variáveis na url, uma para o conteúdo a ser carregado em <div class="msgSuporte">

E a outra para o conteúdo a ser carregado em: <div class="viewSuporte">

Link para o comentário
Compartilhar em outros sites

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.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

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