Ir para conteúdo
  • Cadastre-se

Problema Com Conflito Em Tabela [Css]

Igor B
 Compartilhar

Posts Recomendados

Igor B

Igor B

Postado
Postado

Boa noite pessoal. Estou precisando um pouco da ajuda dos designs de plantão.

O problema é o seguinte:

Eu possuo duas folhas de estilo em meu site:

estilo.css

tabeladepreco.css

No estilo.css, há códigos de tabela, como por exemplo <td>, <th>, <tr> e etc.

Semana passada eu comprei uma tabela de preços HTML/CSS e o CSS dela dá conflito com os códigos do estilo.css.

Vejam:

estilo.css


table { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; }

td,th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; }

table th { border-left:0px solid #cacaca; color:#ccc; }

table td { border-left:0px solid #cacaca; }

table td:first-child, table th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; }

.first { border-left:none; text-align:left; color:#F30;}

.first2 { border-left:none; text-align:left; }

.td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; }

th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

table a { text-decoration:none; }

thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }



<tbody>

		 <thead>

		 <tr>

		 <th><img class="alignleft" src="images/icons/dominio.png" />Domínios</th>

		 <th>INICIANTE</th>

		 <th>PLUS</th>

		 <th>PROFISSIONAL</th>

		 <th>EMPRESARIAL</th>

		 </tr>

		 </thead>


		 <tr>

		 <td>Domínios Adicionais</td>

		 <td>1</td>

		 <td>3</td>

		 <td>5</td>

		 <td>ILIMITADO</td>

		 </tr>
tabeladepreco.css 

.pricing-table { min-width: 670px; }

.pricing-table td {

position: relative;

display: inline-block;

margin: 0 5px;

vertical-align: text-top;

}

/* Plan Title */

.pricing-table thead .plan td {

width: 210px;

height: 42px;

padding: 15px 0;

text-align: center;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

}

.pricing-table thead .plan h2 {

font-family: 'Arial Black', Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 22px;

text-transform: uppercase;

line-height: 24px;

}

.pricing-table thead .plan em {

font-family: Georgia, Arial, Helvetica, sans-serif;

font-style: italic;

font-size: 14px;

line-height: 16px;

}

.pricing-table thead .plan .green {

color: #36611e;

text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: url(../images/green_pattern.png) repeat-x 0 0;

}

.pricing-table thead .plan .orange {

color: #fafafa;

text-shadow: 1px 1px 2px rgba(0,0,0, .4);

background: url(../images/orange_pattern.png) repeat-x 0 0;

}

/* Plan Price Section */

.pricing-table thead .price td {

position: relative;

width: 210px;

padding: 25px 0;

font-family: 'Arial Black', Arial, Helvetica, sans-serif;

font-weight: bold;

text-transform: uppercase;

text-align: center;

color: #b6b07c;

background: #f9f8f1;

background: -moz-linear-gradient(top, #f9f8f1 0%, #f4f2e2 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f8f1), color-stop(100%,#f4f2e2));

background: -webkit-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%);

background: -o-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%);

background: -ms-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%);

background: linear-gradient(to bottom, #f9f8f1 0%,#f4f2e2 100%);

}

.pricing-table thead .price p {

display: table;

margin: 0 auto;

font-size: 50px;

line-height: 60px;

}

.pricing-table thead .price p span {

font-size: 0.5em;

display: table-cell;

vertical-align: middle;

}

.pricing-table thead .price span { font-size: 14px; }

.pricing-table thead .price a {

display: block;

position: absolute;

top: 41px;

right: -5px;

height: 32px;

padding: 0 10px;

line-height: 32px;

font-size: 12px;

text-decoration: none;

}

.pricing-table thead .price .green a {

color: #37621f;

text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: #82d344;

background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#51af34));

background: -webkit-linear-gradient(top, #82d344 0%,#51af34 100%);

background: -o-linear-gradient(top, #82d344 0%,#51af34 100%);

background: -ms-linear-gradient(top, #82d344 0%,#51af34 100%);

background: linear-gradient(to bottom, #82d344 0%,#51af34 100%);

}

.pricing-table thead .price .orange a {

color: #fafafa;

text-shadow: 1px 1px 2px rgba(0,0,0, .3);

background: #ff8042;

background: -moz-linear-gradient(top, #ff8042 0%, #f55a0e 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8042), color-stop(100%,#f55a0e));

background: -webkit-linear-gradient(top, #ff8042 0%,#f55a0e 100%);

background: -o-linear-gradient(top, #ff8042 0%,#f55a0e 100%);

background: -ms-linear-gradient(top, #ff8042 0%,#f55a0e 100%);

background: linear-gradient(to bottom, #ff8042 0%,#f55a0e 100%);

}

.pricing-table thead .price .green a:before,

.pricing-table thead .price .orange a:before,

.pricing-table thead .price .green a:after,

.pricing-table thead .price .orange a:after {

display: block;

position: absolute;

content: '';

}

.pricing-table thead .price .green a:before,

.pricing-table thead .price .orange a:before {

width: 8px;

height: 32px;

top: 0;

left: -8px;

background: url(../images/badge.png) no-repeat;

}

.pricing-table thead .price .green a:after,

.pricing-table thead .price .orange a:after {

width: 0;

height: 0;

bottom: -5px;

right: 0;

border-bottom: 5px solid transparent;

}

.pricing-table thead .price .green a:before { background-position: 0 0; }

.pricing-table thead .price .orange a:before { background-position: 0 -32px; }

.pricing-table thead .price .green a:after { border-left: 5px solid #1c5d40; }

.pricing-table thead .price .orange a:after { border-left: 5px solid #88330a; }

/* Plan Features Section */

.pricing-table tbody tr:first-child td:before {

position: absolute;

display: block;

content: '';

width: 100%;

height: 5px;

top: -25px;

left: 0;

background: url(../images/stripe.png) repeat-x 0 0;

}

.pricing-table tbody td {

width: 170px;

padding-left: 40px;

line-height: 30px;

border-top: 1px solid #f2f2f2;

font-family: Helvetica, Arial, sans-serif;

font-size: 11px;

color: #828282;

}

.pricing-table tbody tr:first-child td { border-top: 20px solid #ffffff; }

.pricing-table .clock-icon td,

.pricing-table .basket-icon td,

.pricing-table .star-icon td,

.pricing-table .heart-icon td { background: #ffffff url(../images/icons.png) no-repeat 0 0; }

.pricing-table .clock-icon td { background-position: 0 0; }

.pricing-table .basket-icon td { background-position: 0 -30px; }

.pricing-table .star-icon td { background-position: 0 -60px; }

.pricing-table .heart-icon td { background-position: 0 -90px; }


/* Plan Description Section */

.pricing-table tfoot td {

width: 190px;

padding: 20px 10px;

text-align: center;

line-height: 18px;

background: #ffffff;

font-family: Helvetica, Arial, sans-serif;

font-size: 11px;

color: #828282;

-webkit-border-radius: 0 0 2px 2px;

-moz-border-radius: 0 0 2px 2px;

border-radius: 0 0 2px 2px;

-webkit-box-shadow: 0px 2px 0px #e4e4e4;

-moz-box-shadow: 0px 2px 0px #e4e4e4;

box-shadow: 0px 2px 0px #e4e4e4;

}

/* Float Text Section */

@font-face {

font-family: 'Lobster13Regular';

src: url('font/Lobster_1.3-webfont.eot');

src: url('font/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),

		 url('font/Lobster_1.3-webfont.woff') format('woff'),

		 url('font/Lobster_1.3-webfont.ttf') format('truetype'),

		 url('font/Lobster_1.3-webfont.svg#Lobster13Regular') format('svg');

font-weight: normal;

font-style: normal;

}

.table-float {

display: block;

position: absolute;

width: 300px;

padding: 80px 0 0 0;

top: 85%;

left: 130px;

}

.table-float p {

font-family: Lobster13Regular, sans-serif;

font-size: 16px;

color: #858585;

line-height: 20px;

}

.table-float p.big {

font-size: 65px;

color: #f76117;

text-align: right;

line-height: 65px;

}

.table-float .arrow {

display: block;

position: absolute;

top: 0;

left: 50px;

width: 68px;

height: 77px;

background: url(../images/arrow2.png) no-repeat 0 0;

}



<table class="pricing-table">

<thead>

	 <tr class="plan">

		 <td class="green">

			 <h2>Light</h2>

			 <em>Great for small business</em>

		 </td>

		 <td class="orange">

			 <h2>Run</h2>

			 <em>Great for small business</em>

		 </td>

		 <td class="green">

			 <h2>Fly</h2>

			 <em>Great for small business</em>

		 </td>

		 <td class="orange">

			 <h2>Fly</h2>

			 <em>Great for small business</em>

		 </td>

	 </tr>

	 <tr class="price">

		 <td class="green">

			 <p><span>$</span>5</p>

			 <span>monthly</span>

			 <a href="#">Join</a>

		 </td>

		 <td class="orange">

			 <p><span>R$ </span>9,<span>79</span></p>

			 <span>monthly</span>

			 <a href="#">ASSINAR</a>

		 </td>

		 <td class="green">

			 <p><span>$</span>12</p>

			 <span>monthly</span>

			 <a href="#">Join</a>

		 </td>

			 <td class="orange">

			 <p><span>$</span>12</p>

			 <span>monthly</span>

			 <a href="#">Join</a>

		 </td>

	 </tr>

</thead>


<tbody class="planocloud">

	 <tr class="clock-icon">

		 <td>No Support</td>

		 <td>24/7 Tech Support</td>

		 <td>24/7 Tech Support</td>

		 <td>5TB Bandwidth</td>

	 </tr>

	 <tr class="basket-icon">

		 <td>Basic Options</td>

		 <td>Advanced Options</td>

		 <td>Advanced Options</td>

		 <td>5TB Bandwidth</td>

	 </tr>

	 <tr class="star-icon">

		 <td>100GB Storage</td>

		 <td>200GB Storage</td>

		 <td>500GB Storage</td>

		 <td>5TB Bandwidth</td>

	 </tr>

	 <tr class="heart-icon">

		 <td>1TB Bandwidth</td>

		 <td>2TB Bandwidth</td>

		 <td>5TB Bandwidth</td>

		 <td>5TB Bandwidth</td>

	 </tr>

</tbody>

Quando eu apago os estilos da estilo.css, a tabela com o código CSS tabeladepreco.css fica normal.

Alguém sabe como eu consigo arrumar esse conflito.

A tabela que está com problema pode ser visualizada em: http://mibhost.com/T...-computing.html

E a tabela que GERA o problema pode ser vista no mesmo link acima clicando em "CLIQUE AQUI PARA VER TODOS OS RECURSOS DOS PLANOS". (como podem ver, ela está normal).

Agradeço a quem me ajudar.

Grato.

Link para o comentário
Compartilhar em outros sites
Igor B

Igor B

Postado
  • Autor
Postado

Faça o seguinte, englobe o CSS que esta entrando em conflito dentro de uma div, no caso:

Na folha de estilo dessa tabela, adicione "#nova-tabela" na frente de todas as propriedades. Veja se funciona.

Fiz o que você me disse e não funcionou :/

Link para o comentário
Compartilhar em outros sites
Igor B

Igor B

Postado
  • Autor
Postado

Amigo não consegui entender o problema.. especifique melhor para que eu possa lhe ajudar.

Resumindo: eu preciso tirar o conflito que há entre os dois CSS. A solução mais fácil, creio eu, seria adicionar uma propriedade no estilo.css para que as classes da tabela fiquem assim:

<td class="tabelaexemplo">

Porém, eu não sei em quais partes do CSS eu devo mexer.


table { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; }

td,th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; }

table th { border-left:0px solid #cacaca; color:#ccc; }

table td { border-left:0px solid #cacaca; }

table td:first-child, table th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; }

.first { border-left:none; text-align:left; color:#F30;}

.first2 { border-left:none; text-align:left; }

.td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; }

th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

table a { text-decoration:none; }

thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }

Link para o comentário
Compartilhar em outros sites
Jamis Henrique

Jamis Henrique

Postado
Postado

Faça o inverso do que disse Igor, ao invés de por na tabela em que você adquiriu adicione nas configurações de tabela já que existiam, no caso, "estilo.css"

Defina no estilo.css o seguinte:


#minhatabela table { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; }

#minhatabela td,th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; }

#minhatabela table th { border-left:0px solid #cacaca; color:#ccc; }

#minhatabela table td { border-left:0px solid #cacaca; }

#minhatabela table td:first-child, table th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; }

#minhatabela .first { border-left:none; text-align:left; color:#F30;}

#minhatabela .first2 { border-left:none; text-align:left; }

#minhatabela .td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

#minhatabela th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

#minhatabela th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

#minhatabela th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; }

#minhatabela th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

#minhatabela table a { text-decoration:none; }

#minhatabela thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }



No HTML, coloque:

<div id="minhatabela">

</div>
... E dentro, ponhe o que não for da nova tabela. (creio que fique como abaixo)

<div id="minhatabela">


                 <thead>

                 <tr>

                 <th><img class="alignleft" src="images/icons/dominio.png" />Domínios</th>

                 <th>INICIANTE</th>

                 <th>PLUS</th>

                 <th>PROFISSIONAL</th>

                 <th>EMPRESARIAL</th>

                 </tr>

                 </thead>


                 <tr>

                 <td>Domínios Adicionais</td>

                 <td>1</td>

                 <td>3</td>

                 <td>5</td>

                 <td>ILIMITADO</td>

                 </tr>

</div>

Link para o comentário
Compartilhar em outros sites
Igor B

Igor B

Postado
  • Autor
Postado

Faça o inverso do que disse Igor, ao invés de por na tabela em que você adquiriu adicione nas configurações de tabela já que existiam, no caso, "estilo.css"

Defina no estilo.css o seguinte:


#minhatabela table { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; }

#minhatabela td,th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; }

#minhatabela table th { border-left:0px solid #cacaca; color:#ccc; }

#minhatabela table td { border-left:0px solid #cacaca; }

#minhatabela table td:first-child, table th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; }

#minhatabela .first { border-left:none; text-align:left; color:#F30;}

#minhatabela .first2 { border-left:none; text-align:left; }

#minhatabela .td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

#minhatabela th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

#minhatabela th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

#minhatabela th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; }

#minhatabela th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

#minhatabela table a { text-decoration:none; }

#minhatabela thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }



No HTML, coloque:

<div id="minhatabela">

</div>
... E dentro, ponhe o que não for da nova tabela. (creio que fique como abaixo)

<div id="minhatabela">


<thead>

<tr>

<th><img class="alignleft" src="images/icons/dominio.png" />Domínios</th>

<th>INICIANTE</th>

<th>PLUS</th>

<th>PROFISSIONAL</th>

<th>EMPRESARIAL</th>

</tr>

</thead>


<tr>

<td>Domínios Adicionais</td>

<td>1</td>

<td>3</td>

<td>5</td>

<td>ILIMITADO</td>

</tr>

</div>

Também não resolveu.

Droga, creio que a única solução foi a que eu falei, porém eu não sei onde alterar o CSS.

Link para o comentário
Compartilhar em outros sites
André Van Dal

André Van Dal

Postado
Postado

Bom, primeiramente, você tem que começar a usar pelo menos um id ou uma class para definir onde serão aplicadas as alterações.

Percebi que o problema vem da sua formatação geral apresentada no inicio do seu post.

Para corrigir use o seguinte código:


.tabela { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; }

.tabela td, .tabela th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; }

.tabela th { border-left:0px solid #cacaca; color:#ccc; }

.tabela td { border-left:0px solid #cacaca; }

.tabela td:first-child, .tabela th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; }

.tabela .first { border-left:none; text-align:left; color:#F30;}

.tabela .first2 { border-left:none; text-align:left; }

.tabela .td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

.tabela th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

.tabela th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

.tabela th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; }

.tabela th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

.tabela a { text-decoration:none; }

.tabela thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }
Depois vá até a tabela que você quer utilizar essa formatação e adicione 
class="tabela"

nela.

Link para o comentário
Compartilhar em outros sites
Igor B

Igor B

Postado
  • Autor
Postado

Bom, primeiramente, você tem que começar a usar pelo menos um id ou uma class para definir onde serão aplicadas as alterações.

Percebi que o problema vem da sua formatação geral apresentada no inicio do seu post.

Para corrigir use o seguinte código:


.tabela { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; }

.tabela td, .tabela th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; }

.tabela th { border-left:0px solid #cacaca; color:#ccc; }

.tabela td { border-left:0px solid #cacaca; }

.tabela td:first-child, .tabela th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; }

.tabela .first { border-left:none; text-align:left; color:#F30;}

.tabela .first2 { border-left:none; text-align:left; }

.tabela .td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

.tabela th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

.tabela th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

.tabela th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; }

.tabela th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

.tabela a { text-decoration:none; }

.tabela thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }
Depois vá até a tabela que você quer utilizar essa formatação e adicione 
class="tabela"

nela.

André, deu certo muito obrigado!

Pessoal, agradeço a todos que ajudaram.

Abraços.

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para a lista de tópicos

  • Quem Está Navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...

Informação Importante

Concorda com os nossos termos?

  I accept