css dentro de tabela no html é possível?

Rafael souza · Abril 28, 2015

olá pessoal boa noite,

estou com um problema devido minha inexperiência no assunto.

me dispus a criar um banner css com imagem rotativa para utilizar no templete do mercado livre que utilizamos, depois de muito tentar achei um código editável onde eu precisei apenas mudar o nome das imagens que eu queria utilizar até ai tudo certo meu problema começou quando precisei inserir no template que é feito tabelas em html, e meu problema é justamente esse é possível inserir um css dentro de uma tabela, e como faço isso?

rikaschmitt · Abril 28, 2015

como assim?

estilizar a tabela por css? sim.

não entendi muito bem heheeh

Rafael souza · Abril 28, 2015

desculpe minha ignorância, seria posicionar o slider que fiz em css dentro de uma tabela no html.

rikaschmitt · Abril 28, 2015

acredito que dê sim.

Rafael souza · Abril 28, 2015

saberia me dizer como faço ou onde consigo um tutorial

L. Henrique · Abril 28, 2015

Você possui <table>'s e dentro delas você tem <tr>'s e <td>'s que você pretende estilizar com o CSS?

A sua dúvida não ficou muito clara.

guilomaker · Abril 28, 2015

se poder postar o código tanto do banner e das tabelas, ou um print das tabelas.

mais da pra colocar qual quer coisa dentro de tabelas, só que tem que ver a questão de linhas e colunas pra não estragar suas tabelas.

suponhamos que você possa criar uma nova tabela pro banner? ou o ML restringe modificações assim? e só permite inserir alguma coisa em tabelas já definidas?

Rafael souza · Abril 28, 2015

Você possui <table>'s e dentro delas você tem <tr>'s e <td>'s que você pretende estilizar com o CSS?

A sua dúvida não ficou muito clara.

exatamente isso

se poder postar o código tanto do banner e das tabelas, ou um print das tabelas.

mais da pra colocar qual quer coisa dentro de tabelas, só que tem que ver a questão de linhas e colunas pra não estragar suas tabelas.

suponhamos que você possa criar uma nova tabela pro banner? ou o ML restringe modificações assim? e só permite inserir alguma coisa em tabelas já definidas?

é possvel criar sem problemas eu as crio pelo dreanwever.

exatamente isso

é possvel criar sem problemas eu as crio pelo dreanwever.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Template mercado livre</title>

</head>

<body>

<tr>

</tr>

<tr>

<td> aqui gostaria de colocar o css. </td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

guilomaker · Abril 28, 2015

então qual o verdadeiro problema? colocar a estilização do banner junto a tabela?

Rafael souza · Abril 28, 2015

então qual o verdadeiro problema? colocar a estilização do banner junto a tabela?

sim já tentei de tudo e não consigo inserir este banner dentro da tabela

guilomaker · Abril 28, 2015

manda o codigo do banner e o css! já vi seu codigo html no post de cima, manda ai o do banner e o css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Template mercado livre</title>
		<style>
			*{padding: 0; margin: 0;}
			table { margin: auto;}

			COLOQUE O CSS AQUI!

		</style>
	</head>
 
	<body>
		<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">

		  <tr>
		    <td>
		    	<img src="images/template-mercado-livre-03_01.jpg" width="900" height="227" />
		    </td>
		  </tr>

		  <tr>
		    <td> 
		    	COLOCA O CODIGO HTML DO BANNER AQUI "NÃO PODE SER PHP"
		    </td>
		  </tr>

		  <tr>
		    <td>
		    	<img src="images/template-mercado-livre-03_03.jpg" width="900" height="10" />
		    </td>
		  </tr>

		  <tr>
		    <td>
		    	<img src="images/template-mercado-livre-03_05.jpg" width="900" height="68" />
		    </td>
		  </tr>

		  <tr>
		    <td> </td>
		  </tr>

		  <tr>
		    <td>
		    	<img src="images/template-mercado-livre-03_07.jpg" width="900" height="67" />
		    </td>
		  </tr>

		  <tr>
		    <td> </td>
		  </tr>

		  <tr>
		    <td>
		    	<img src="images/template-mercado-livre-03_09.jpg" width="900" height="66" />
		    </td>
		  </tr>

		  <tr>
		    <td> </td>
		  </tr>

		  <tr>
		    <td>
		    	<img src="images/template-mercado-livre-03_11.jpg" width="900" height="542" />
		    </td>
		  </tr>

		</table>
	</body>
</html>

Rafael souza · Abril 28, 2015

manda o codigo do banner e o css! já vi seu codigo html no post de cima, manda ai o do banner e o css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Template mercado livre</title>
		<style>
			*{padding: 0; margin: 0;}
			table { margin: auto;}

			COLOQUE O CSS AQUI!

		</style>
	</head>
 
	<body>
		<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">

		  <tr>
		    <td>
		    	<img src="images/template-mercado-livre-03_01.jpg" width="900" height="227" />
		    </td>
		  </tr>

		  <tr>
		    <td> 
		    	COLOCA O CODIGO HTML DO BANNER AQUI "NÃO PODE SER PHP"
		    </td>
		  </tr>

		  <tr>
		    <td>
		    	<img src="images/template-mercado-livre-03_03.jpg" width="900" height="10" />
		    </td>
		  </tr>

		  <tr>
		    <td>
		    	<img src="images/template-mercado-livre-03_05.jpg" width="900" height="68" />
		    </td>
		  </tr>

		  <tr>
		    <td> </td>
		  </tr>

		  <tr>
		    <td>
		    	<img src="images/template-mercado-livre-03_07.jpg" width="900" height="67" />
		    </td>
		  </tr>

		  <tr>
		    <td> </td>
		  </tr>

		  <tr>
		    <td>
		    	<img src="images/template-mercado-livre-03_09.jpg" width="900" height="66" />
		    </td>
		  </tr>

		  <tr>
		    <td> </td>
		  </tr>

		  <tr>
		    <td>
		    	<img src="images/template-mercado-livre-03_11.jpg" width="900" height="542" />
		    </td>
		  </tr>

		</table>
	</body>
</html>

esté é o codigo fonte do meu banner.

<!doctype html>

<head>

<title>Demo of gallery.css</title>

</head>

<body>

</figure>

</figure>

</figure>

</div>

</body>

</html>

e este da galeria css

.gallery .control-button {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

.gallery .control-button:hover {

color: white;

color: rgba(255, 255, 255, 0.8);

}

/*

Theme controls how everything looks in Gallery CSS.

*/

.gallery {

position: relative;

}

.gallery .item {

height: 200px;

overflow: hidden;

text-align: center;

background: #ffffff;

}

.gallery .controls {

position: absolute;

bottom: 0;

width: 100%;

text-align: center;

}

.gallery .control-button {

display: inline-block;

margin: 0 .02em;

font-size: 3em;

text-align: center;

text-decoration: none;

transition: color .1s;

}

guilomaker · Abril 28, 2015

esses três aquivos externos css

você não vai usar? eles fazem parte da estrutura do seu banner certo? se sim manda eles pra mim, pois no template do ML você só pode usar uma pagina html né? não pode usar arquivos externos pode?

Rafael souza · Abril 28, 2015

esses três aquivos externos css

<link rel="stylesheet" href="./css/vendor/normalize.css">

<link rel="stylesheet" href="../../dist/gallery.prefixed.css">

<link rel="stylesheet" href="../../dist/gallery.theme.css">

você não vai usar? eles fazem parte da estrutura do seu banner certo? se sim manda eles pra mim, pois no template do ML você só pode usar uma pagina html né? não pode usar arquivos externos pode?

Acredito que possa ser usado. Você quer o codigo dos outros?

normalize.css

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */

/* ==========================================================================

HTML5 display definitions

========================================================================== */

/*

* Corrects `block` display not defined in IE 8/9.

*/

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

nav,

section,

summary {

display: block;

}

/*

* Corrects `inline-block` display not defined in IE 8/9.

*/

audio,

canvas,

video {

display: inline-block;

}

/*

* Prevents modern browsers from displaying `audio` without controls.

* Remove excess height in iOS 5 devices.

*/

audio:not([controls]) {

display: none;

height: 0;

}

/*

* Addresses styling for `hidden` attribute not present in IE 8/9.

*/

[hidden] {

display: none;

}

/* ==========================================================================

Base

========================================================================== */

/*

* 1. Sets default font family to sans-serif.

* 2. Prevents iOS text size adjust after orientation change, without disabling

* user zoom.

*/

html {

font-family: sans-serif; /* 1 */

-webkit-text-size-adjust: 100%; /* 2 */

-ms-text-size-adjust: 100%; /* 2 */

}

/*

* Removes default margin.

*/

body {

margin: 0;

}

/* ==========================================================================

Links

========================================================================== */

/*

* Addresses `outline` inconsistency between Chrome and other browsers.

*/

a:focus {

outline: thin dotted;

}

/*

* Improves readability when focused and also mouse hovered in all browsers.

*/

a:active,

a:hover {

outline: 0;

}

/* ==========================================================================

Typography

========================================================================== */

/*

* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,

* Safari 5, and Chrome.

*/

h1 {

font-size: 2em;

}

/*

* Addresses styling not present in IE 8/9, Safari 5, and Chrome.

*/

abbr[title] {

border-bottom: 1px dotted;

}

/*

* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.

*/

b,

strong {

font-weight: bold;

}

/*

* Addresses styling not present in Safari 5 and Chrome.

*/

dfn {

font-style: italic;

}

/*

* Addresses styling not present in IE 8/9.

*/

mark {

background: #ff0;

color: #000;

}

/*

* Corrects font family set oddly in Safari 5 and Chrome.

*/

code,

kbd,

pre,

samp {

font-family: monospace, serif;

font-size: 1em;

}

/*

* Improves readability of pre-formatted text in all browsers.

*/

pre {

white-space: pre;

white-space: pre-wrap;

word-wrap: break-word;

}

/*

* Sets consistent quote types.

*/

q {

quotes: "\201C" "\201D" "\2018" "\2019";

}

/*

* Addresses inconsistent and variable font size in all browsers.

*/

small {

font-size: 80%;

}

/*

* Prevents `sub` and `sup` affecting `line-height` in all browsers.

*/

sub,

sup {

font-size: 75%;

line-height: 0;

position: relative;

vertical-align: baseline;

}

sup {

top: -0.5em;

}

sub {

bottom: -0.25em;

}

/* ==========================================================================

Embedded content

========================================================================== */

/*

* Removes border when inside `a` element in IE 8/9.

*/

img {

border: 0;

}

/*

* Corrects overflow displayed oddly in IE 9.

*/

svg:not(:root) {

overflow: hidden;

}

/* ==========================================================================

Figures

========================================================================== */

/*

* Addresses margin not present in IE 8/9 and Safari 5.

*/

figure {

margin: 0;

}

/* ==========================================================================

Forms

========================================================================== */

/*

* Define consistent border, margin, and padding.

*/

fieldset {

border: 1px solid #c0c0c0;

margin: 0 2px;

padding: 0.35em 0.625em 0.75em;

}

/*

* 1. Corrects color not being inherited in IE 8/9.

* 2. Remove padding so people aren't caught out if they zero out fieldsets.

*/

legend {

border: 0; /* 1 */

padding: 0; /* 2 */

}

/*

* 1. Corrects font family not being inherited in all browsers.

* 2. Corrects font size not being inherited in all browsers.

* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome

*/

button,

input,

select,

textarea {

font-family: inherit; /* 1 */

font-size: 100%; /* 2 */

margin: 0; /* 3 */

}

/*

* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in

* the UA stylesheet.

*/

button,

input {

line-height: normal;

}

/*

* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`

* and `video` controls.

* 2. Corrects inability to style clickable `input` types in iOS.

* 3. Improves usability and consistency of cursor style between image-type

* `input` and others.

*/

button,

html input[type=button], /* 1 */

input[type=reset],

input[type=submit] {

-webkit-appearance: button; /* 2 */

cursor: pointer; /* 3 */

}

/*

* Re-set default cursor for disabled elements.

*/

button[disabled],

input[disabled] {

cursor: default;

}

/*

* 1. Addresses box sizing set to `content-box` in IE 8/9.

* 2. Removes excess padding in IE 8/9.

*/

input[type=checkbox],

input[type=radio] {

box-sizing: border-box; /* 1 */

padding: 0; /* 2 */

}

/*

* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.

* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome

* (include `-moz` to future-proof).

*/

input[type=search] {

-webkit-appearance: textfield; /* 1 */

-moz-box-sizing: content-box;

-webkit-box-sizing: content-box; /* 2 */

box-sizing: content-box;

}

/*

* Removes inner padding and search cancel button in Safari 5 and Chrome

* on OS X.

*/

input[type=search]::-webkit-search-cancel-button,

input[type=search]::-webkit-search-decoration {

-webkit-appearance: none;

}

/*

* Removes inner padding and border in Firefox 4+.

*/

button::-moz-focus-inner,

input::-moz-focus-inner {

border: 0;

padding: 0;

}

/*

* 1. Removes default vertical scrollbar in IE 8/9.

* 2. Improves readability and alignment in all browsers.

*/

textarea {

overflow: auto; /* 1 */

vertical-align: top; /* 2 */

}

/* ==========================================================================

Tables

========================================================================== */

/*

* Remove most spacing between table cells.

*/

table {

border-collapse: collapse;

border-spacing: 0;

}

gallery.prefixed.css

.gallery .control-operator:target ~ .controls .control-button {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

.gallery .control-button:first-of-type,

.gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),

.gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),

.gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),

.gallery .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4),

.gallery .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5) {

color: white;

color: rgba(255, 255, 255, 0.8);

}

.gallery .item:first-of-type {

position: static;

pointer-events: auto;

opacity: 1;

}

.gallery .item {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

opacity: 0;

-webkit-transition: opacity .5s;

-o-transition: opacity .5s;

transition: opacity .5s;

}

.gallery .control-operator {

display: none;

}

.gallery .control-operator:target ~ .item {

pointer-events: none;

opacity: 0;

-webkit-animation: none;

-o-animation: none;

animation: none;

}

.gallery .control-operator:target ~ .controls .control-button {

-webkit-animation: none;

-o-animation: none;

animation: none;

}

@-webkit-keyframes controlAnimation-2 {

0% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

14.3%, 50% {

color: white;

color: rgba(255, 255, 255, 0.8);

}

64.3%, 100% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

@-o-keyframes controlAnimation-2 {

0% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

14.3%, 50% {

color: white;

color: rgba(255, 255, 255, 0.8);

}

64.3%, 100% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

@keyframes controlAnimation-2 {

0% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

14.3%, 50% {

color: white;

color: rgba(255, 255, 255, 0.8);

}

64.3%, 100% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

@-webkit-keyframes galleryAnimation-2 {

0% {

opacity: 0;

}

14.3%, 50% {

opacity: 1;

}

64.3%, 100% {

opacity: 0;

}

@-o-keyframes galleryAnimation-2 {

0% {

opacity: 0;

}

14.3%, 50% {

opacity: 1;

}

64.3%, 100% {

opacity: 0;

}

@keyframes galleryAnimation-2 {

0% {

opacity: 0;

}

14.3%, 50% {

opacity: 1;

}

64.3%, 100% {

opacity: 0;

}

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {

pointer-events: auto;

opacity: 1;

}

.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {

pointer-events: auto;

opacity: 1;

}

.items-2.autoplay .control-button {

-webkit-animation: controlAnimation-2 14s infinite;

-o-animation: controlAnimation-2 14s infinite;

animation: controlAnimation-2 14s infinite;

}

.items-2.autoplay .item {

-webkit-animation: galleryAnimation-2 14s infinite;

-o-animation: galleryAnimation-2 14s infinite;

animation: galleryAnimation-2 14s infinite;

}

.items-2 .control-button:nth-of-type(1),

.items-2 .item:nth-of-type(1) {

-webkit-animation-delay: -2s;

-o-animation-delay: -2s;

animation-delay: -2s;

}

.items-2 .control-button:nth-of-type(2),

.items-2 .item:nth-of-type(2) {

-webkit-animation-delay: 5s;

-o-animation-delay: 5s;

animation-delay: 5s;

}

@-webkit-keyframes controlAnimation-3 {

0% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

9.5%, 33.3% {

color: white;

color: rgba(255, 255, 255, 0.8);

}

42.9%, 100% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

@-o-keyframes controlAnimation-3 {

0% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

9.5%, 33.3% {

color: white;

color: rgba(255, 255, 255, 0.8);

}

42.9%, 100% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

@keyframes controlAnimation-3 {

0% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

9.5%, 33.3% {

color: white;

color: rgba(255, 255, 255, 0.8);

}

42.9%, 100% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

@-webkit-keyframes galleryAnimation-3 {

0% {

opacity: 0;

}

9.5%, 33.3% {

opacity: 1;

}

42.9%, 100% {

opacity: 0;

}

@-o-keyframes galleryAnimation-3 {

0% {

opacity: 0;

}

9.5%, 33.3% {

opacity: 1;

}

42.9%, 100% {

opacity: 0;

}

@keyframes galleryAnimation-3 {

0% {

opacity: 0;

}

9.5%, 33.3% {

opacity: 1;

}

42.9%, 100% {

opacity: 0;

}

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {

pointer-events: auto;

opacity: 1;

}

.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {

pointer-events: auto;

opacity: 1;

}

.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {

pointer-events: auto;

opacity: 1;

}

.items-3.autoplay .control-button {

-webkit-animation: controlAnimation-3 21s infinite;

-o-animation: controlAnimation-3 21s infinite;

animation: controlAnimation-3 21s infinite;

}

.items-3.autoplay .item {

-webkit-animation: galleryAnimation-3 21s infinite;

-o-animation: galleryAnimation-3 21s infinite;

animation: galleryAnimation-3 21s infinite;

}

.items-3 .control-button:nth-of-type(1),

.items-3 .item:nth-of-type(1) {

-webkit-animation-delay: -2s;

-o-animation-delay: -2s;

animation-delay: -2s;

}

.items-3 .control-button:nth-of-type(2),

.items-3 .item:nth-of-type(2) {

-webkit-animation-delay: 5s;

-o-animation-delay: 5s;

animation-delay: 5s;

}

.items-3 .control-button:nth-of-type(3),

.items-3 .item:nth-of-type(3) {

-webkit-animation-delay: 12s;

-o-animation-delay: 12s;

animation-delay: 12s;

}

@-webkit-keyframes controlAnimation-4 {

0% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

7.1%, 25% {

color: white;

color: rgba(255, 255, 255, 0.8);

}

32.1%, 100% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

@-o-keyframes controlAnimation-4 {

0% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

7.1%, 25% {

color: white;

color: rgba(255, 255, 255, 0.8);

}

32.1%, 100% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

@keyframes controlAnimation-4 {

0% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

7.1%, 25% {

color: white;

color: rgba(255, 255, 255, 0.8);

}

32.1%, 100% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

@-webkit-keyframes galleryAnimation-4 {

0% {

opacity: 0;

}

7.1%, 25% {

opacity: 1;

}

32.1%, 100% {

opacity: 0;

}

@-o-keyframes galleryAnimation-4 {

0% {

opacity: 0;

}

7.1%, 25% {

opacity: 1;

}

32.1%, 100% {

opacity: 0;

}

@keyframes galleryAnimation-4 {

0% {

opacity: 0;

}

7.1%, 25% {

opacity: 1;

}

32.1%, 100% {

opacity: 0;

}

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {

pointer-events: auto;

opacity: 1;

}

.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {

pointer-events: auto;

opacity: 1;

}

.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {

pointer-events: auto;

opacity: 1;

}

.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {

pointer-events: auto;

opacity: 1;

}

.items-4.autoplay .control-button {

-webkit-animation: controlAnimation-4 28s infinite;

-o-animation: controlAnimation-4 28s infinite;

animation: controlAnimation-4 28s infinite;

}

.items-4.autoplay .item {

-webkit-animation: galleryAnimation-4 28s infinite;

-o-animation: galleryAnimation-4 28s infinite;

animation: galleryAnimation-4 28s infinite;

}

.items-4 .control-button:nth-of-type(1),

.items-4 .item:nth-of-type(1) {

-webkit-animation-delay: -2s;

-o-animation-delay: -2s;

animation-delay: -2s;

}

.items-4 .control-button:nth-of-type(2),

.items-4 .item:nth-of-type(2) {

-webkit-animation-delay: 5s;

-o-animation-delay: 5s;

animation-delay: 5s;

}

.items-4 .control-button:nth-of-type(3),

.items-4 .item:nth-of-type(3) {

-webkit-animation-delay: 12s;

-o-animation-delay: 12s;

animation-delay: 12s;

}

.items-4 .control-button:nth-of-type(4),

.items-4 .item:nth-of-type(4) {

-webkit-animation-delay: 19s;

-o-animation-delay: 19s;

animation-delay: 19s;

}

@-webkit-keyframes controlAnimation-5 {

0% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

5.7%, 20% {

color: white;

color: rgba(255, 255, 255, 0.8);

}

25.7%, 100% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

@-o-keyframes controlAnimation-5 {

0% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

5.7%, 20% {

color: white;

color: rgba(255, 255, 255, 0.8);

}

25.7%, 100% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

@keyframes controlAnimation-5 {

0% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

5.7%, 20% {

color: white;

color: rgba(255, 255, 255, 0.8);

}

25.7%, 100% {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

@-webkit-keyframes galleryAnimation-5 {

0% {

opacity: 0;

}

5.7%, 20% {

opacity: 1;

}

25.7%, 100% {

opacity: 0;

}

@-o-keyframes galleryAnimation-5 {

0% {

opacity: 0;

}

5.7%, 20% {

opacity: 1;

}

25.7%, 100% {

opacity: 0;

}

@keyframes galleryAnimation-5 {

0% {

opacity: 0;

}

5.7%, 20% {

opacity: 1;

}

25.7%, 100% {

opacity: 0;

}

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {

pointer-events: auto;

opacity: 1;

}

.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {

pointer-events: auto;

opacity: 1;

}

.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {

pointer-events: auto;

opacity: 1;

}

.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {

pointer-events: auto;

opacity: 1;

}

.gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) {

pointer-events: auto;

opacity: 1;

}

.items-5.autoplay .control-button {

-webkit-animation: controlAnimation-5 35s infinite;

-o-animation: controlAnimation-5 35s infinite;

animation: controlAnimation-5 35s infinite;

}

.items-5.autoplay .item {

-webkit-animation: galleryAnimation-5 35s infinite;

-o-animation: galleryAnimation-5 35s infinite;

animation: galleryAnimation-5 35s infinite;

}

.items-5 .control-button:nth-of-type(1),

.items-5 .item:nth-of-type(1) {

-webkit-animation-delay: -2s;

-o-animation-delay: -2s;

animation-delay: -2s;

}

.items-5 .control-button:nth-of-type(2),

.items-5 .item:nth-of-type(2) {

-webkit-animation-delay: 5s;

-o-animation-delay: 5s;

animation-delay: 5s;

}

.items-5 .control-button:nth-of-type(3),

.items-5 .item:nth-of-type(3) {

-webkit-animation-delay: 12s;

-o-animation-delay: 12s;

animation-delay: 12s;

}

.items-5 .control-button:nth-of-type(4),

.items-5 .item:nth-of-type(4) {

-webkit-animation-delay: 19s;

-o-animation-delay: 19s;

animation-delay: 19s;

}

.items-5 .control-button:nth-of-type(5),

.items-5 .item:nth-of-type(5) {

-webkit-animation-delay: 26s;

-o-animation-delay: 26s;

animation-delay: 26s;

}

.gallery .control-button {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

.gallery .control-button:hover {

color: white;

color: rgba(255, 255, 255, 0.8);

}

/*

Theme controls how everything looks in Gallery CSS.

*/

.gallery {

position: relative;

}

.gallery .item {

height: 400px;

overflow: hidden;

text-align: center;

background: #4d87e2;

}

.gallery .controls {

position: absolute;

bottom: 0;

width: 100%;

text-align: center;

}

.gallery .control-button {

display: inline-block;

margin: 0 .02em;

font-size: 3em;

text-align: center;

text-decoration: none;

-webkit-transition: color .1s;

-o-transition: color .1s;

transition: color .1s;

}

Gallery theme.css

.gallery .control-button {

color: #ccc;

color: rgba(255, 255, 255, 0.4);

}

.gallery .control-button:hover {

color: white;

color: rgba(255, 255, 255, 0.8);

}

/*

Theme controls how everything looks in Gallery CSS.

*/

.gallery {

position: relative;

}

.gallery .item {

height: 200px;

overflow: hidden;

text-align: center;

background: #ffffff;

}

.gallery .controls {

position: absolute;

bottom: 0;

width: 100%;

text-align: center;

}

.gallery .control-button {

display: inline-block;

margin: 0 .02em;

font-size: 3em;

text-align: center;

text-decoration: none;

transition: color .1s;

}

Você possui <table>'s e dentro delas você tem <tr>'s e <td>'s que você pretende estilizar com o CSS?

A sua dúvida não ficou muito clara.

sim seria colocar o slider dentro desta <td>, mas como sou leigo no assunto não consigo fazer funcionar

guilomaker · Abril 28, 2015

ta explicado porque o forum ficou off! foi o código gigante que você postou! kkkkk brinks :coolio:

toma testa ai!

http://paste2.org/21x54Wf5

tive que colocar todo css junto ao html, teria como pegar os css através de urls, mais testa ai assim e ver se funciona.

Rafael souza · Abril 28, 2015

ta explicado porque o forum ficou off! foi o código gigante que você postou! kkkkk brinks :coolio:

toma testa ai!

http://paste2.org/21x54Wf5

tive que colocar todo css junto ao html, teria como pegar os css através de urls, mais testa ai assim e ver se funciona.

exatamente isso que eu queria, muito obrigado

guilomaker · Abril 28, 2015

exatamente isso que eu queria, muito obrigado

por nada! marque o tópico como resolvido, ate mais.

Arquivado

css dentro de tabela no html é possível?

Recommended Posts

Rafael souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

L. Henrique 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

guilomaker 31

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

guilomaker 31

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

guilomaker 31

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

guilomaker 31

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

guilomaker 31

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

guilomaker 31

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante