Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?
desculpe minha ignorância, seria posicionar o slider que fiz em css dentro de uma tabela no html.
acredito que dê sim.
saberia me dizer como faço ou onde consigo um tutorial
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.
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?
>
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">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template mercado livre</title>
</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> aqui gostaria de colocar o css. </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>então qual o verdadeiro problema? colocar a estilização do banner junto a tabela?
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
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>>
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo of gallery.css</title>
<link rel="stylesheet" href="./css/vendor/normalize.css">
<link rel="stylesheet" href="../../dist/gallery.prefixed.css">
<link rel="stylesheet" href="../../dist/gallery.theme.css">
</head>
<body>
<div class="gallery autoplay items-3">
<div id="item-1" class="control-operator"></div>
<div id="item-2" class="control-operator"></div>
<div id="item-3" class="control-operator"></div>
<figure class="item">
<img src="03.jpg" alt="imagem 1" />
</figure>
<figure class="item">
<img src="01.jpg" alt="imagem 2" />
</figure>
<figure class="item">
<img src="02.jpg" alt="imagem 3" />
</figure>
<div class="controls">
<a href="#item-1" class="control-button">•</a>
<a href="#item-2" class="control-button">•</a>
<a href="#item-3" class="control-button">•</a>
</div>
</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;
} height: 200px;
overflow: hidden;
text-align: center;
background: #ffffff;
} position: absolute;
bottom: 0;
width: 100%;
text-align: center;
} display: inline-block;
margin: 0 .02em;
font-size: 3em;
text-align: center;
text-decoration: none;
transition: color .1s;
}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?
>
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;
} height: 200px;
overflow: hidden;
text-align: center;
background: #ffffff;
} position: absolute;
bottom: 0;
width: 100%;
text-align: center;
} 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.
>
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.
>
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
ta explicado porque o forum ficou off! foi o código gigante que você postou! kkkkk brinks :coolio:
toma testa ai!
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.
>
ta explicado porque o forum ficou off! foi o código gigante que você postou! kkkkk brinks :coolio:
toma testa ai!
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
exatamente isso que eu queria, muito obrigado
por nada! marque o tópico como resolvido, ate mais.
como assim?
estilizar a tabela por css? sim.
não entendi muito bem heheeh