Widget HTML Personalizado, funciona pero hay un detalle

B

barcraft Seguir

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
19 Nov 2009
Mensajes
305
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:

Insertar CODE, HTML o PHP: 
	<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:

Insertar CODE, HTML o PHP: 
		#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:

Insertar CODE, HTML o PHP: 
<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!
 
I

imported_Elmer

Zeta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
19 Jul 2003
Mensajes
1.865
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.
 
B

barcraft

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
19 Nov 2009
Mensajes
305
Perfecto, ahi me funcionó por fin.

La solucion fue la siguiente:

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

Insertar CODE, HTML o PHP: 
.tabla_rankings_chileallin table tr td{
    valign: top;
    border: none;
    margin: 0;
    padding: 2px;
    nowrap;
}


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

Insertar CODE, HTML o PHP: 
<div class="tabla_rankings_chileallin">

Porsupuesto despues la cierro con
Insertar CODE, HTML o PHP: 
</div>


Muchas gracias por la ayuda Elmer ;)
 
Hay que estar conectado o registrado para responder aquí.
Arriba