Widget HTML Personalizado, funciona pero hay un detalle

**barcraft** · 06/07/2010 16:23

Amig@s,

Configuré un widget en mi sitio web en donde muestro los distintos rankings existentes. Para verlo lo pueden hacer en http://beta.chileallin.com, está al final al costado derecho.

Como podrán ver, cada ranking tiene demasiados espacios entre una fila y otra, a pesar de que puse 0 a todos los valores de border, cellspacing y cellpadding.

Para programar el widget hice lo siguiente:

1.- Modifiqué la plantilla "vbcms_page" y agregué el siguiente script:

Código:

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8"> 
		$(function () {
			var tabContainers = $('div.tabs > div');
			tabContainers.hide().filter(':first').show();
			
			$('div.tabs ul.tabNavigation a').click(function () {
				tabContainers.hide();
				tabContainers.filter(this.hash).show();
				$('div.tabs ul.tabNavigation a').removeClass('selected');
				$(this).addClass('selected');
				return false;
			}).filter(':first').click();
		});
	</script>

2.- En la plantilla "additional.css" agregué las nuevas clases:

Código:

		#quilaRanks UL.tabNavigation {
		    list-style: none;
		    margin: 0;
		    padding: 0;
		}
 
		#quilaRanks UL.tabNavigation LI {
		    display: inline;
		}
 
		#quilaRanks UL.tabNavigation LI A {
		    padding: 3px 5px;
		    background-color: #ccc;
		    color: #000;
		    text-decoration: none;
		}
 
		#quilaRanks UL.tabNavigation LI A.selected,
		#quilaRanks UL.tabNavigation LI A:hover {
		    background-color: #333;
		    color: #fff;
		    padding-top: 7px;
		}
		
		#quilaRanks UL.tabNavigation LI A:focus {
			outline: 0;
		}
 
		#quilaRanks div.tabs > div {
			padding: 5px;
			margin-top: 3px;
			border: 5px solid #333;
		}
		
		#quilaRanks div.tabs > div h2 {
			margin-top: 0;
		}
 
		#quilaRanks #tab1 {
		    background-color: #00000000;
		}
 
		#quilaRanks #tab2 {
		    background-color: #00000000;
		}
 
		#quilaRanks #tab3 {
		    background-color: #00000000;
		}

#quilaRanks table{border: none;padding: 0px;spacing: 0px;}

#quilaRanks table tr{border: none;valign: top;}

#quilaRanks table td{border: none;valign: top;}

3.- En el Widget HTML puse el siguiente codigo:

Código:

<div id="quilaRanks">		
	<div class="tabs"> 
		<ul class="tabNavigation"> 
			<li><a href="#tab1">DTD</a></li> 
			<li><a href="#tab2">DREAMS</a></li> 
			<li><a href="#tab3">ENJOY</a></li> 
		</ul> 
	<div id="tab1"> 
		<h2>Drive The Dream</h2> 
			<a href="http://www.chileallin.com/salas/partypoker" target="_blank" title="PartyPoker.com">
				<img src="http://banners.partypartners.com/images/marketing-materials/partypoker/spanish/gif/234x60/SuperSignupBonus/234x60_gif@poker_sp_us.gif" border="0" alt="PartyPoker.com" title="PartyPoker.com" width="194" />
			</a>
			<p>
				<div class="tabla_rankings_chileallin">
					<table border="0" cellpadding="0" cellspacing="0">
						<tr><td><b>Fechas Jugadas</b></td><td>:</td><td><b>2</b></td></tr>
						<tr><td><b>Fechas por Jugar</b></td><td>:</td><td><b>0</b></td></tr>
					</table>
					<table border="0" cellpadding="0" cellspacing="0">
						<tr><td><b>Lugar</b></td><td><b>Nick</b></td><td><b>Puntos</b></td></tr>
						<tr><td>1.-</td><td>Patty_star</td><td>127.42</td></tr>
						<tr><td>2.-</td><td>socitoYPC</td><td>79.30</td></tr>
						<tr><td>3.-</td><td>sweetydani</td><td>79.30</td></tr>
						<tr><td>4.-</td><td>aleboldo</td><td>61.07</td></tr>
						<tr><td>5.-</td><td>b4rcr4ft</td><td>58.16</td></tr>
						<tr><td>6.-</td><td>titocarisma</td><td>56.08</td></tr>
						<tr><td>7.-</td><td>loritaslora</td><td>52.53</td></tr>
						<tr><td>8.-</td><td>MarceloPozas</td><td>50.16</td></tr>
						<tr><td>9.-</td><td>GUSRANA</td><td>49.51</td></tr>
						<tr><td>10.-</td><td>Chilenoxxx</td><td>49.13</td></tr>
					</table>
					<table border="0" cellpadding="0" cellspacing="0" align="center">
						<tr><td>Ultima Actualizacion:<br><b>04 de Julio de 2010</b></td></tr>
						<tr><td><a href="http://www.chileallin.com/archivos/rankings/promo-DDWQ/ranking-20100710.png" target="_blank"><b>Ranking Completo</b><a></td></tr>
					</table>
				</div>
			</p>
        </div> 
        <div id="tab2"> 
 
            <h2>Dreams 2010</h2> 
				<a href="http://www.dreamspremierpoker.com/ranking/" target="_blank" title="Ranking Dreams">
					<img src="http://www.chileallin.com/archivos/casinos/dreams/dreams-logo_ranking.png" border="0" alt="Ranking Dreams" title="Ranking Dreams" width="194" />
				</a>
			<p>
				<table border="0" cellpadding="0" cellspacing="0">
					<tr><td><b>Lugar</b></td><td><b>Nick</b></td><td><b>Puntos</b></td></tr>
					<tr><td>1.-</td><td>Shaun Sheffield</td><td>617</td></tr>
					<tr><td>2.-</td><td>Mauricio Zeman</td><td>569</td></tr>
					<tr><td>3.-</td><td>Jaime Barrios</td><td>539</td></tr>
					<tr><td>4.-</td><td>Daniel Oliva</td><td>532</td></tr>
					<tr><td>5.-</td><td>Danny Manriquez </td><td>512</td></tr>
					<tr><td>6.-</td><td>Cristian Jotar</td><td>506</td></tr>
					<tr><td>7.-</td><td>Maximiliano Saez </td><td>487</td></tr>
					<tr><td>8.-</td><td>Carlos Lama</td><td>473</td></tr>
					<tr><td>9.-</td><td>Claudio Moya </td><td>445</td></tr>
					<tr><td>10.-</td><td>Bruno Fulgeri</td><td>438</td></tr>
				</table>
				<table border="0" cellpadding="0" cellspacing="0" align="center">
					<tr><td>Ultima Actualizacion:<br><b>05 de Julio de 2010</b></td></tr>
					<tr><td><a href="http://www.dreamspremierpoker.com/ranking/" target="_blank"><b>Ranking Completo</b><a></td></tr>
				</table>
			</p>
        </div> 
        <div id="tab3"> 
            <h2>Enjoy 2010</h2> 
				<a href="http://www.enjoypokerseries.cl/descargas/ranking_completo.pdf" target="_blank" title="Ranking Enjoy">
					<img src="http://www.chileallin.com/archivos/casinos/enjoy/enjoy-logo_ranking.png" border="0" alt="Ranking Enjoy" title="Ranking Enjoy" width="194" />
				</a>
			<p>
				<table border="0" cellpadding="0" cellspacing="0">
					<tr><td><b>Lugar</b></td><td><b>Nick</b></td><td><b>Puntos</b></td></tr>
					<tr><td>1.-</td><td>Juan Jose Mantilaro</td><td>3104</td></tr>
					<tr><td>2.-</td><td>Sebastian Ruiz</td><td>2475</td></tr>
					<tr><td>3.-</td><td>Cristian Velasquez</td><td>2242</td></tr>
					<tr><td>4.-</td><td>Amos Ben</td><td>2066</td></tr>
					<tr><td>5.-</td><td>Felipe Morbiducci</td><td>1964</td></tr>
					<tr><td>6.-</td><td>Aurel Bogdan</td><td>1855</td></tr>
					<tr><td>7.-</td><td>Carlos Zuñiga</td><td>1721</td></tr>
					<tr><td>8.-</td><td>Leonel Otazo</td><td>1525</td></tr>
					<tr><td>8.-</td><td>Esteban Vallejos</td><td>1525</td></tr>
					<tr><td>9.-</td><td>Eduardo Hercovich</td><td>1516</td></tr>
					<tr><td>10.-</td><td>Aldo Caprile</td><td>1411</td></tr>
				</table>
				<table border="0" cellpadding="0" cellspacing="0" align="center">
					<tr><td>Ultima Actualizacion:<br><b>06 de Julio de 2010</b></td></tr>
					<tr><td><a href="http://www.enjoypokerseries.cl/descargas/ranking_completo.pdf" target="_blank"><b>Ranking Completo</b><a></td></tr>
				</table>
			</p>
        </div> 
    </div> 
</div>

El problema es que esos espacios grandes en el ranking no los quiero, deseo algo ordenadito y que no ocupe mucho espacio para abajo.

Si lo pruebo en un HTML simple en mi PC se ve bien, pero al ponerlo en el widget hereda alguna clase que cambia todo.

Si alguien pudiera ayudar en este tema se lo agradecería.

De ante mano, muchas gracias!

**Elmer Hdez** · 06/07/2010 18:32

Debe ser por el css de vBulletin. Y si no usas tablas y re acomodas todo eso utilizando divs <div> o listas <ul>? De esa forma creo que te quedaría mejor formateado.
Si no quieres eso, pues intenta añadiendo css directamente en las tablas, algo como style="padding: 0; margin: 0;"
No te aseguro que eso funcione, pero intentalo.

Saludos.

**barcraft** · 06/07/2010 21:07

Perfecto, ahi me funcionó por fin.

La solucion fue la siguiente:

1.- Cree una clase llamada "tabla_rankings_chileallin" en pla plantilla additional.css:

Código:

.tabla_rankings_chileallin table tr td{
    valign: top;
    border: none;
    margin: 0;
    padding: 2px;
    nowrap;
}

2.- Cada vez que abro una tabla, antepongo:

Código:

<div class="tabla_rankings_chileallin">

Porsupuesto despues la cierro con

Código:

</div>

Muchas gracias por la ayuda Elmer

Widget HTML Personalizado, funciona pero hay un detalle

LinkBack

Herramientas

Califica este tema

Visualizar

Temas similares

Porblema con un widget html, para hormail Respuestas: 1

Widget rss Respuestas: 5

Toy creando una web en html pero.. Respuestas: 0

Como lograr este detalle.. Respuestas: 7

detalle con mi estilo Respuestas: 3

Widget HTML Personalizado, funciona pero hay un detalle

Re: Widget HTML Personalizado, funciona pero hay un detalle

Re: Widget HTML Personalizado, funciona pero hay un detalle

Sobre vBHispano

Links

Patrocinadores