Jump to content
Fórum Script Brasil
  • 0

Estilo frames com div


cashtter
 Share

Question

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: [email protected]</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 to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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 to comment
Share on other sites

  • 0

Ô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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.6k
    • Total Posts
      646.2k
×
×
  • Create New...