locked
Junção de CSS RRS feed

  • Pergunta

  •  

    Pessoal, boa tarde!

    Estou com um problemão aqui!

    Seguinte, tenho 2 css que utilizava em 2 sistemas distintos. Acontece que tive que juntar os 2 sistemas e para não precisar refazer toda a parte visual eu fui juntando os códigos e os CSS.

    Esta tudo okay, menos uma parte que utilizo Java Script  para montar abas como menu.

    Tentei de toda maneira juntar os dois CSS abaixo sem que um interfira no outro, mas ao juntar os trechos abaixo o layout fica errado....não estou conseguindo fazer e preciso de uma força.

    Grato desde já

    Gustavo

     

    O trecho que eu preciso juntar no CSS principal segue abaixo:

     

    Code Snippet

    .Menu {

    width: 100px;

    }

    .Menu ul {

    list-style: none;

    margin: 0;

    padding: 0;

    }

    .Menu li

    {

    border-bottom: 1px solid;

    border-color: #ffffff;

    font-family: Arial;

    font-weight: bold;

    font-size:10px;

    text-align:left;

    }

    .Menu li a {

    display: block;

    background-color: #D1DDE9;

    color: #555555;

    text-decoration: none;

    padding: 5px 5px 5px 0.5em;

    border-left: 12px solid #D1DDE9;

    }

    .Menu li a:hover {

    background-color: #aec3d8;

    font-family: Arial;

    font-size:10px;

    color: #555555;

    border-left: 12px solid #aec3d8;

    }

     

     

     

     

    .tabs

    {

    position:relative;

    top:1px;

    left:10px;

    font-size: 12px;

    }

    .tab

    {

    border:solid 1px black;

    background-color:#eeeeee;

    padding:2px 10px;

    font-size: 12px;

    }

    .selectedTab

    {

    background-color:white;

    border-bottom:solid 1px white;

    }

    .tabContents

    {

    border:solid 1px black;

    padding:10px;

    background-color:white;

    font-size: 12px;

    }

    .paddedList li

    {

    padding:10px;

    }

     

    .tabs

    {

    position:relative;

    top:1px;

    left:10px;

    font-size: 12px;

    }

    .tab

    {

    border:solid 1px black;

    background-color:#eeeeee;

    padding:2px 10px;

    font-size: 12px;

    }

    .selectedTab

    {

    background-color:white;

    border-bottom:solid 1px white;

    font-size: 12px;

    }

    .tabContents

    {

    border:solid 1px black;

    padding:10px;

    background-color:white;

    font-size: 12px;

    }

    .grid th, .grid td

    {

    padding:8px;

    border-bottom:solid 1px black;

    }

     

     

    .floatPanel

    {

    display:none;

    position:absolute;

    top:100px;

    left:100px;

    padding:10px;

    border:solid 4px black;

    background-color:white;

    }

     

    .webWindow

    {

    width:400px;

    border:Outset;

    background-color:white;

    font-size: 12px;

    }

    .webWindowBody

    {

    padding:10px;

    font-size: 12px;

    }

    .webWindowTitleBar

    {

    font:14px Verdana,Sans-Serif;

    padding-left:10px;

    background-color:Blue;

    color:white;

    cursor:move;

    }

    .webWindowTitleText

    {

    float:left;

    }

    .webWindowClose

    {

    background-color:Maroon;

    font-weight:bold;

    cursor:pointer;

    }

     

     

    quinta-feira, 27 de novembro de 2008 20:23

Todas as Respostas

  • O CSS principal segue abaixo:

     

    Code Snippet

    .ColunaDireita{

    background-color:white;

    width:12%;

    float:right;

    margin-right:13.7%;

    }

    .ColunaEsquerda{

    background-color:white;

    width:12%;

    float:left;

    margin-left:14%;

    }

    .ColunaCentro{

    background-image: url(controHoras3.png);

    background-color:white;

    width:47.9%;

    margin-left:1%;

     

    }

    .ColunaCentro1{

     

    background-color:white;

    width:47.9%;

    margin-left:1%;

     

    }

     

     

    .Geral{

    min-width:760px;

    }

     

     

    /******************

    HTML Tags

    ******************/

    body{

    color:#000000;

    margin:1px;

    font:.75em/160% Arial,Helvetica,sans-serif;

    background:#FFFFFF;

    }

    #content p,#content-side p,table{

    margin:0px 0px 20px 0px;

    }

    #content-side img{

    border:none;

    }

    #breadcrumb-right label{

    display:none;

    }

    /******************

    FORM STYLES

    ******************/

    #content-container form{

    margin:20px 0px;

    padding:0px 0px 0px 0px;

    }

    #content-container fieldset{

    margin:10px 0px 10px 0px;

    padding:0px 10px 10px 15px;

    }

    /* a nested fieldset */

    #content-container fieldset fieldset{

    margin:15px 0px 5px 0px;

    padding:0px 5px 5px 5px;

    }

    #content-container legend{

    margin-bottom:0px;

    padding:0px 10px 5px 5px;

    color:#666666;

    font-weight:bold;

    }

    /* a nested legend */

    #content-container fieldset fieldset legend{

    margin-bottom:0px;

    padding:0px;

    font-weight:normal;

    }

    #content-container label{

    display:block;

    padding-top:8px;

    }

    #breadcrumb-right form{

    margin:0px;

    padding:0px;

    text-align:center;

    }

    #breadcrumb-right form fieldset{

    margin:0px;

    padding:0px;

    border:none;

    }

    #breadcrumb-right form legend{

    display:none;

    }

    /******************

    LINKS

    ******************/

    /* LINK VISTED HOVER ACTIVE selectors must remain in this order to work */

    a:link{

    color:#0071BC;

    text-decoration:none;

    }

    a:visited{

    color:#004EB7;

    text-decoration:none;

    }

    a:hover{

    color:#999999;

    text-decoration:none;

    }

    a:active{

    color:#B70000;

    text-decoration:none;

    }

    /* LINK VISTED HOVER ACTIVE selectors must remain in this order to work */

    #mainnav-container a:link{

    color:#FFFFFF;

    text-decoration:none;

    font-weight:bold;

    }

    #mainnav-container a:visited{

    color:#FFFFFF;

    text-decoration:none;

    font-weight:bold;

    }

    #mainnav-container a:hover{

    text-decoration:underline;

    }

    #mainnav-container a:active{

    color:#CCCCCC;

    text-decoration:none;

    }

    /* LINK VISTED HOVER ACTIVE selectors must remain in this order to work */

    #breadcrumb-container a:link{

    color:#FFFFFF;

    text-decoration:underline;

    font-weight:bold;

    }

    #breadcrumb-container a:visited{

    color:#FFFFFF;

    text-decoration:underline;

    font-weight:bold;

    }

    #breadcrumb-container a:hover{

    text-decoration:none;

    }

    #breadcrumb-container a:active{

    color:#CCCCCC;

    }

    quinta-feira, 27 de novembro de 2008 20:25
  • Continuação do css principal:

     

    Code Snippet

    /******************

    HEADINGS

    ******************/

    h1 {

    font-size:1.3em;

    padding-top:4px;

    }

    h2 {

    font-size:1.1em;

    }

    h3 {

    font-size:1em;

    }

    h4 {

    font-size:.9em;

    }

    h5 {

    font-size:.8em;

    }

    h6 {

    font-size:.75em;

    }

    #three-column-container h2{

    margin:0px 0px 10px 0px;

    padding:0px;

    }

    /******************

    LAYOUT DIVS

    ******************/

    #header-container

    {

    background: background;

    height: 50px;

    color: #FFFFFF;

    font-size: 1.8em;

    width: 72%;

    margin-left : 14%;

    }

    #header-container a{

    text-decoration:none;

    color:#FFFFFF;

    }

    #header-name

    {

    float: left;

    width: 50%;

    height: 34px;

    padding: 10px 0px 0px 0px;

    font-weight: bold;

    }

    #header-slogan{

    margin:0px 0px 0px 90px;

    height:35px;

    padding:0px 0px 0px 0px;

    text-align:right;

    font-size:.75em;

    font-weight:normal;

    }

    #mainnav-container

    {

    background-image: url(untitled.bmp);

    background-position:center ;

    color: #FFFFFF;

    border-top: 1px solid #FFFFFF;

    border-bottom: 1px solid #FFFFFF;

    height: 60px;

    width: 72%;

    margin-left : 14%;

    }

    #mainnav

    {

    float: left;

    width: 15%;

    text-align: left;

    padding: 5px;

    height: 50px;

    border-right: 1px solid #FFFFFF;

    background: background; /*url(bg-mainnav-left.gif) repeat-y lado esquerdo */

    }

     

     

    #mainnav-side

    {

    float: right;

    width: 15%;

    padding: 5px;

    border-left: 1px solid #FFFFFF;

    height: 50px;

    background: background; /*url(bg-mainnav-right.gif) silver repeat-y right 50%; lado direito */

    }

    #mainnav-side-side

    {

    float: right;

    width: 140px;

    padding: 5px;

    border-left: 1px solid #FFFFFF;

    height: 50px;

    background: url(cantodireito.JPG) repeat-y right 50%;

    }

    #posterphoto{

    margin:0px 15% 0px 15%;

    padding:0px;

    text-align:left;

    background:url(poster-photo-busineswoman.jpg) no-repeat;

    height:196px;

    }

    /*coluna abaixo da figura

    #breadcrumb-container

    {

    color: #FFFFFF;

    height: 25px;

    padding: 0px 44px;

    margin: 0px;

    background: silver;

    }*/

    #breadcrumb-left{

    float:left;

    width:70%;

    height:28px;

    padding:7px 0px 0px 0px;

    }

    /*coluna abaixo da figura canto direito

    #breadcrumb-right

    {

    float: right;

    height: 0px;

    width: 155px;

    padding: 7px 0px 0px 0px;

    border-left: 1px solid #FFFFFF;

    border-right: 1px solid #FFFFFF;

    background: green;

    }*/

    #content-container{

    padding:10px 3% 0px 44px;

    }

     

     

     

    quinta-feira, 27 de novembro de 2008 20:27
  • Continuação do css principal:

     

    Code Snippet

    #content{

    float:right;

    width:70%;

    }

    #content-side{

    width:20%;

    padding-left:25px;

    }

    #content-side-rigth{

    float: right;

    width:24%;

    padding-left:25px;

    }

    #three-column-container{

    width:100%;

    margin:30px 0px;

    text-align:justify;

    }

    #three-column-left{

    float:left;

    width:30%;

    }

    #three-column-right{

    float:right;

    width:30%;

    }

    #three-column-middle{

    width:30%;

    margin:0px 31% 0px 35%;

    }

    #footer-container

    {

    /*#C53333 url(bg-footer-left.gif) repeat-y left rodap‚ direito e central*/

    color: #FFFFFF;

    background: background;

    margin-top: 20px;

    height:25px;

    width: 72%;

    margin-left : 14%;

    }

    #footer-right{

    margin-left:15%;

    padding:10px 15px;

    border-left:1px solid #FFFFFF;

    background:background;/*url(bg-mainnav-right.gif) repeat-y right rodap‚ esquerdo*/

    height:5px;

    }

    /******************

    Menu Items

    ******************/

    #mainnav-container ul{

    margin:0px;

    padding:0px;

    }

    #mainnav-container li{

    margin:0px;

    padding:0px;

    list-style:none;

    }

    /******************

    LISTS - IN THE CONTENT DIV

    ******************/

    #content ul.list,#content ul.link-list-vertical{

    margin:10px 0px 10px 10px;

    padding:0px;

    }

    #content ul.list li{

    list-style:none;

    padding:1px 0px 1px 12px;

    margin:0px;

    background:url(bullet.gif) no-repeat;

    background-position:0 .4em;

    }

    #content ul.link-list-vertical li{

    list-style:none;

    margin:0px;

    }

    #content ul.link-list-vertical li a:link{

    padding:1px 0px 1px 12px;

    background:url(bullet-link.gif) no-repeat;

    background-position:0 .4em;

    }

    #content ul.link-list-vertical li a:visited{

    padding:1px 0px 1px 12px;

    background:url(bullet-link-visited.gif) no-repeat;

    background-position:0 .4em;

    }

     

     

     

    quinta-feira, 27 de novembro de 2008 20:31
  • Continuação do css principal:

     

    Code Snippet

    #content ul.link-list-vertical li a:hover{

    padding:1px 0px 1px 12px;

    background:url(bullet-link-hover.gif) no-repeat;

    background-position:0 .4em;

    }

    #content ul.link-list-vertical li a:active{

    padding:1px 0px 1px 12px;

    background:url(bullet-link-active.gif) no-repeat;

    background-position:0 .4em;

    }

    /******************

    LISTS - IN THE SIDE COLUMN

    ******************/

    #content-side ul.list,#content-side ul.link-list-vertical{

    margin:10px 0px 20px 10px;

    padding:0px;

    }

    #content-side ul.list li{

    list-style:none;

    padding:1px 0px 1px 12px;

    margin:0px;

    background:url(bullet.gif) no-repeat;

    background-position:0 .4em;

    }

    #content-side ul.link-list-vertical li{

    list-style:none;

    margin:0px;

    }

    #content-side ul.link-list-vertical li a:link{

    padding:1px 0px 1px 12px;

    background:url(bullet-link.gif) no-repeat;

    background-position:0 .4em;

    }

    #content-side ul.link-list-vertical li a:visited{

    padding:1px 0px 1px 12px;

    background:url(bullet-link-visited.gif) no-repeat;

    background-position:0 .4em;

    }

    #content-side ul.link-list-vertical li a:hover{

    padding:1px 0px 1px 12px;

    background:url(bullet-link-hover.gif) no-repeat;

    background-position:0 .4em;

    }

    #content-side ul.link-list-vertical li a:active{

    padding:1px 0px 1px 12px;

    background:url(bullet-link-active.gif) no-repeat;

    background-position:0 .4em;

    }

    /******************

    TABLE STYLES

    ******************/

    .table{

    width:100%;

    border:1px solid #C53333;

    }

    .table td {

    padding:8px;

    border-left:1px solid #C53333;

    border-right:1px solid #C53333;

    }

    thead th, tfoot th

    {

    background: gray;

    padding: 8px;

    color: #FFFFFF;

    border-left: 1px solid #C53333;

    border-right: 1px solid #C53333;

    border-top: 1px solid #C53333;

    border-bottom: 1px solid #C53333;

    }

    .table-row-1 td,.table-row-1 th{

    background:#F7E0E0;

    border:1px solid #C53333;

    }

    .table-row-2 td,.table-row-2 th,thead{

    background:#F4F4F4;

    border:1px solid #C53333;

    }

    /******************

    CLASSES & TABLE STYLES

    ******************/

    .button-big{

    margin-top:8px;

    }

    img.photobig,img.photosmall{

    border:1px solid #A87171;

    padding:5px 5px 30px 5px;

    background:#EBE9E1;

    }

    img.photosmall{

    margin-right:10px;

    margin-bottom:2px;

    float:left;

    }

    .searchbox{

    height:13px;

    margin:0px;

    padding:0px;

    width:6em;

    color:#666666;

    font:11px Verdana,Arial,Helvetica,sans-serif;

    }

    .button-search{

    height:17px;

    margin:0px;

    padding:0px 1px;

    color:#000000;

    border:1px solid #000000;

    font:bold 10px Verdana,Arial,Helvetica,sans-serif;

    background:#FAEEEE;

    }

    .separator-side-column{

    border-top:1px solid #D0D0BF;

    width:100%;

    height:2px;

    font-size:1px;

    background:transparent;

    }

    .small-text{

    font-size:.8em;

    }

    .none{

    display:none;

    }

    .clear{

    clear:both;

    }

    IMG

    {

    border:0;

    }

     

     

     

    quinta-feira, 27 de novembro de 2008 20:32
  • Dividi o css principal, pois não cabia de uma só vez!!

    Conto com a ajuda de vcs!

    Grato desde já

    Gustavo

     

    quinta-feira, 27 de novembro de 2008 20:33
  • Alguem?

     

    sexta-feira, 28 de novembro de 2008 12:39
  • Existe a possibilidade de ver o html, ou a pagina em funcionamento, ou os dois sistemas antigos, fica complexo ver somente o css sem ter nocao do que realmente deseja, se puder, coloca os links ai pra gente.

    Valeu
    terça-feira, 30 de dezembro de 2008 19:34
  • Boa tarde.

    Tiago,   infelizmente não existe essa possibilidade, pois o sistema roda dentro de uma intranet e não tenho como disponibiliza-lo, no entanto se não for abusar eu posso encaminhar por email printscreen das telas. O print screen da tela usando o 1º CSS e o print da mesma tela usando o 2º CSS , dessa maneira vc entenderá melhor como eu gostaria que ficasse juntando os 2.

    De qualquer forma fico no aguardo de alguma ajuda.

    Grato desde já

    Gustavo

     

    segunda-feira, 5 de janeiro de 2009 12:12
  • Envie para: contato@tiagoborges.net

     

    CSS e PRINT SCREENS

    segunda-feira, 5 de janeiro de 2009 16:03
  • Mnadei no seu email!

    Por favor de uma olhada.

    Muito obrigado pela força;

    Grato desde já

    Gustavo

     

    segunda-feira, 5 de janeiro de 2009 17:25
  • Tiago ou Alguem, será que temos uma solução/sugestão?

    Grato desde já

    Gustavo

     

    terça-feira, 6 de janeiro de 2009 15:14
  • Acho q vc mesmo pode resolver o problema tendo em mente o seguinte:
    por padrão as linhas de código de baixo no css sobrescrevem as de cima, quando tenho esse tipo de problema eu vou apagando cada linha para ver qual está interferindo para que tudo desande.
    Se vc quer que uma propriedade acima sobrescreva a de baixo coloque a instrução "IMPORTANT" antes do ";".
    Espero ter ajudado.
    sexta-feira, 9 de janeiro de 2009 21:51
  • Estou esperando resposta por email desde o dia em que vc me enviou os arquivos, sem ter nocao exata do que quer fica complicado ajudar.
    domingo, 11 de janeiro de 2009 14:08
  •  

    Tiago, bom dia!

    Lhe encaminhei 2 vezes todos os arquivos que vc me pediu.

    Eu é que estou no aguardo ! Wink vc não recebeu? Será que foi bloqueado pela empresa? verifique senão chegou como spam....

    Fico no aguardo!

    Att

    Gustavo

    segunda-feira, 12 de janeiro de 2009 11:48
  • Querido,

     

    Tente enviar para:

     

    ouvidoria@pontobsb.com.br

    ou

    tbnet@uol.com.br

    ou

    topled@topled.com.br

     

    Fico no aguardo!

     

    segunda-feira, 12 de janeiro de 2009 21:36
  • Acho q seria interessante upar os arquivos tipo pro skydrive e postar o link aqui, assim outras pessoas podem te ajudar também.
    terça-feira, 13 de janeiro de 2009 16:19
  • Vou fazer isso.

    Hoje a noite eu passo o link.

    Grato pela a ajuda!

     

    terça-feira, 13 de janeiro de 2009 19:04
  • Nenhuma, tente para:

     

    topled@topled.com.br

    tbnet@uol.com.br

    contato@pontobsb.com.br

     

    No aguardo.

     

    • Marcado como Resposta gusbr quarta-feira, 6 de maio de 2009 17:48
    • Não Marcado como Resposta gusbr quarta-feira, 6 de maio de 2009 17:48
    sábado, 17 de janeiro de 2009 00:29