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

Figura no fundo da tela


rafaeldorazio

Pergunta

Eu estou tentando desenvolver uma tb em css.

Porem eu gostaria de uma ajudinha, pois a figura da tab direita está em uma img e eu gostaria que ficace como background no css, como eu faria ?

Esta parte do codigo

<div style="width: 500px; max-height: 200px; overflow: auto;">
                <div class="tabPane">
                <div class="tabActive">
                <span class="titulo_tab">Contatos</span>
                <img src="../images/tab/tab_right_active.gif" alt="" />
                </div>
                </div>
                <div class="aTab">
contem a img da tab direita, mas eu queria fazer tudo certinho colandoco o codigo no css, como eu faria ?
.tabPane{
        height:21px;    /* Height of tabs */
        border-bottom:1px solid #919b9c;
    }
    
    .titulo_tab 
    {   
        position: relative; 
        padding-left: 4px; 
        padding-right: 4px;   
    }

    .tabPane .tabActive{
        background-image:url('../images/tab/tab_left_active.gif');
        margin-left:0px;
        margin-right:0px;    
        z-index:10;    
    }    
    
    .tabPane .tabInactive{
        background-image:url('../images/tab/tab_left_inactive.gif');
        margin-left:0px;
        margin-right:0px;
        z-index:1;
    }

    .tabPane .inactiveTabOver{
        background-image:url('../images/tab/tab_left_over.gif');
        margin-left:0px;
        margin-right:0px;
    }
    
    input[type=checkbox] 
    {       
        padding: 0 0 17px 0;
    }
    
    .aTab{
        border-left:1px solid #919b9c;
        border-right:1px solid #919b9c;
        border-bottom:1px solid #919b9c;
        font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
        
    }
    .tabPane DIV{
        float:left;
        height:100%;    /* Height of tabs */
        padding-left:3px;
        vertical-align:middle;
        background-repeat:no-repeat;
        background-position:bottom left;
        cursor:pointer;
        position:relative;
        bottom:-1px;
        margin-left:0px;
        margin-right:0px;
    }

    .tabPane span{
        font-family:arial;
        vertical-align:top;
        font-size:11px;
        padding-left:3px;
        padding-right:3px;        
        line-height:21px;
        float:left;
    }
    .tabPane .tabActive span{
        padding-bottom:1px;
        line-height:20px;
    }
    
    .tabPane img{
        float:left;
    }
<div style="width: 500px; max-height: 200px; overflow: auto;">
                <div class="tabPane">
                <div class="tabActive">
                <span class="titulo_tab">Contatos</span>
                <img src="../images/tab/tab_right_active.gif" alt="" />
                </div>
                </div>
                <div class="aTab">


                /* BEGIN: PESQUISA */
                divListaContatos += "<div id='divPesquisaContatos' style='padding: 12px 0 12px 15px; font-size: 11px; font-family: Verdana; background-color: #F4F8F6; border-bottom: 1px solid #CCC;'>";
                divListaContatos += "<input type='checkbox' id='chbTodosContatos' name='TodosContatos' style='padding: 0 0 0 5px; outline: 0;' /> Select all";
                divListaContatos += "<span style='margin: 11px 0 11px 50px;'><input type='text' id='txtBusca' style='border: 1px solid #444444; height: 15px; font-size: 11px; padding-top: 3px; padding-left: 3px; background-image: url(images/pesquisa.png); background-repeat: no-repeat; background-position: right;' size='45' /></span>";
                divListaContatos += "</div>";
                /* END: PESQUISA */

                $.each(array, function (row, itemListaContatos) {

                    var varEmail = itemListaContatos.Email;
                    var varNome = itemListaContatos.Nome;
                    var varEmailReplace = varEmail.replace(/@/g, "").replace(/[.]/g, "");

                    check = selecionaCheckboxBusca(varEmail);

                    /* BEGIN: LISTA CONTATOS */
                    divListaContatos += "<div style='padding: 12px 0 12px 20px; border-bottom: 1px solid #CCC;'><div style='font-size: 11px; font-family: Verdana; width: 60%; float: left;'>";
                    divListaContatos += "<input type='checkbox' id='chb" + varEmailReplace + "' name='chbPara' style='outline: 0;' " + check + " value='" + varEmail + "' class='' />";
                    divListaContatos += "<span style='position: absolute; padding: 0 0 2px 5px;'>" + varEmail + "</span></div>";
                    divListaContatos += "<span style='font-size: 11px; font-family: Verdana;'>" + varNome + "</span></div>";
                    /* END: LISTA CONTATOS */

                });

                </div>
                </div>

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

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,2k
    • Posts
      651,9k
×
×
  • Criar Novo...