Etiqueta div que solo se alinea a izquierda y centro
He realizado el siguiente contador cogiendo parte de codigo de un reloj animado, el problema que tengo es que la etiqueta div que pinta los digitos del contador solamente se me alinean a la izquierda y al centro, con el consiguiente problema que tengo al incluir el codigo como giny dentro de una pagina web, ya que la barra de los ginys esta a la derecha de la pantalla y esto de lo mueve todo el sitio web, espero haberme explicado, el codigo es el siguiente:
(Pongo todo el codigo para que veáis mejor a que refiero).
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script>
var animspeed = 440;
var clocktick = 15755;
function counterElement (id,lim,v) {
this.domObj = id;
this.offset = 0;
this.nextElem = null;
this.offsetIncrement = 57.5;
this.limit = lim;
this.speed = this.domObj.substring(2,3)*animspeed;
$(this.domObj).css('background-image', 'url(numbers'+this.limit+'.jpg)');
if (v==null) {
this.val = 0;
}else{
this.val = v;
this.offset = this.val*this.offsetIncrement;
$(this.domObj).animate( {backgroundPosition:"(0 -"+this.offset+"px)"}, this.speed, 'swing');
}
this.inc = function() {
if (this.val == 0) {
$(this.domObj).css('backgroundPosition', '0px 0px');
}
this.val += 1;
this.offset = this.val * this.offsetIncrement;
if (this.val > this.limit) {
if (this.nextElem != null) {
this.nextElem.inc();
}
$(this.domObj).animate( {backgroundPosition:"(0 -"+this.offset+"px)"}, this.speed, 'swing');
this.offset = 0;
this.val = 0;
}else if (this.domObj == '#c5' && this.val > 3 && c6.val==2) {
if (this.nextElem != null) {
this.nextElem.inc();
}
$(this.domObj).css('backgroundPosition', '0px 0px');
this.offset = 0;
this.val = 0;
}else{
$(this.domObj).animate( {backgroundPosition:"(0 -"+this.offset+"px)"}, this.speed, 'swing');
}
};
}
function restart() {
this.style.backgroundPosition='0px 0px';
}
</script>
<style>
div#clock {
width:282px;margin-top:43px; /* doy amplitud y altura del reloj */
}
div>div {
width:32px; /*Ancho de cada dígito */
height:57px;/*Altura de cada dígito */
repeat: repeat;
/*background-image:url(numbers.jpg);*/
background-position: 0px 0px;
float:left;
}
div#colon {
width:20px; /*Ancho de los dos puntos */
height:58px;/*Altura de los dos puntos */
background-image:url(colon.jpg);
}
div#euro {
width:32px; /*Ancho de los dos puntos */
height:57px;/*Altura de los dos puntos */
background-image:url(euro.jpg);
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<!-- por que esta etiqueta div solo se me alinea a la izquierda y al centro y no a la derecha ??? -->
<right>
<div id="clock">
<div id="c7"></div>
<div id="c6"></div>
<div id="c5"></div>
<div id="c4"></div>
<div id="colon"></div>
<div id="c3"></div>
<div id="c2"></div>
<div id="c1"></div>
<div id="euro"></div>
</div>
</right>
<br>
<div id="debug">
</div>
<script>
var output;
function odometerInc() {
setTimeout("odometerInc()",clocktick);
c1.inc();
//output = output+c1.val+"<br>";
//document.getElementById('debug').innerHTML = output;
}
var d = new Date();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
var transc1= Date.UTC(2013,0,1);
var ahora = new Date();
var total= ahora - transc1;
var segundos= Math.floor(total / 1000);
var minutos= segundos / 60;
var horas= minutos / 60;
var días= horas / 24;
var centims= minutos * 0.3805;
var euros= centims / 100;
euros=euros.toFixed(3);
var e4 = Math.floor(euros / 1000);
euros = euros - (e4 * 1000);
var e3 = Math.floor(euros / 100);
euros = euros - (e3 * 100);
var e2 = Math.floor(euros / 10);
euros = euros - (e2 * 10);
var e1 = Math.floor(euros / 1);
euros = euros - e1;
euros=euros.toFixed(3);
/* centims */
euros = parseInt(euros * 1000);
var cent3 = Math.floor(euros / 100);
euros = euros - (cent3*100);
var cent2 = Math.floor(euros / 10);
euros = euros - (cent2*10);
var cent1 = euros;
var c7 = new counterElement('#c7', 9, e4);
c7.nextElem = null;
var c6 = new counterElement('#c6', 9, e3);
c6.nextElem = c7;
var c5 = new counterElement('#c5',9, e2);
c5.nextElem = c6;
var c4 = new counterElement('#c4', 9, e1);
c4.nextElem = c5;
var c3 = new counterElement('#c3',9, cent3);
c3.nextElem = c4;
var c2 = new counterElement('#c2',9, cent2);
c2.nextElem = c3;
var c1 = new counterElement('#c1',9, cent1);
c1.nextElem = c2;
setTimeout("odometerInc()",15755);
</script>
</body>
</html>
1 Respuesta
Hola el <left> y el <center> si que funcionan pero el <right> no, como debería poner el "float:right" en el div id="clock" ??? no se como combinarlo.
un saludo y gracias.
<left> No existe pero, como alinear a la izquierda es la opción por defecto, por eso tu crees que sí funciona. Y <center> sí existía pero se ha eliminado con el HTML5. No uses estas etiquetas. Si quieres más información, la encontrarás muy completa en <a>http://www.w3schools.com/</a>
El float: right has de ponerlo en el css, en la definición del div, tal que así:
div#clock {
width:282px;
margin-top:43px; /* doy amplitud y altura del reloj */
float: right;
}
Y listos.
Buenos días y gracias por tu ayuda.
Bueno con tu aclaración acerca del lugar donde va el float: right; y sobre lo del left y right eso ya esta claro, en el dreamweaver funciona de lujo, pero cuando intento incluir el código del contador en el sidebar lateral de la web me sale el dichoso sidebar en el centro y toda la información de la parte central de la página no se ve, no sé a que será debido concretamente, pero he revisado línea a línea y no doy con el problema.
A ver si puedes orientarme sobre el por qué me sale todo desordenado, intuyo que debe de ser algún posicionamiento absoluto a la hora de mostrar el contador, pero es que no lo veo.
Un saludo y gracias de nuevo por tu ayuda.
Es que no entiendo el problema. En el código que mandas no veo ningún sidebar, solo esta el div clock. Supongo que quieres incluir esto en una web más amplia.
Envíame más código o, mejor, el link a la página en cuestión.
De todos modos supongo que debes "limpiar los floats". Pon, después de cerrar el div clock, esta linea;
<div style="clear:both;"></div>
A ver qué pasa. De todos modos, lo digo a voleo Sin ver nada más se me hace difícil saber qué te está ocurriendo.
el sidebar no esta en este código, esta en el de la web, se trata de una web desarrollada sobre wordpress.
Si pongo el <div style="clear:both;"></div> debajo del div clock efectivamente me sale alineado, pero solamente me saca la imagen del punto decimal y el símbolo del euro, los dígitos del contador no me aparecen.
si me das un correo te envío las imágenes de como se queda el contador en la web.
UN saludo y nuevamente gracias por tu ayuda.
Correo:
Micala arroba teleline. Es
(Lo pongo así para evitar spam)
Por cierto, si no ves los números es porque tienes comentada la linea donde pones la imagen de fondo de los divs correspondientes.
En
div>div {
width:32px; /*Ancho de cada dígito */
height:57px;/*Altura de cada dígito */
repeat: repeat;
/*background-image:url(numbers.jpg);*/
background-position: 0px 0px;
float:left;
}
quita el comentario (los /* */) del background-image:...
Es ahí donde tienes los numeritos, y por javascript solo le dices que parte de imagen vas a mostrar.
