Problema en labels html

Estado
No está abierto para más respuestas.
Emilio14

Emilio14

Oro Blanco
Mensajes
399
Puntuación de reacción
2
Hola foreros,

he estado haciendo para mi blog un generador de tarjetas de jugador. Consiste en que el usuario pone todos sus datos en las casillas correspondientes y luego hace una captura de pantalla para guardar la tarjeta como una imagen.
Esta mañana he estado cambiando las imágenes de fondo y he puesto sombras en los textos, pero creo que también he tocado algo que no debía porque ahora, cuando haces clic en una casilla, se va a la anterior.
El código que tengo es este:
HTML: 
<form>
<form>
    <div style="background: transparent url(http://www.nintendo.es/games/oms/animal_crossing_new_leaf/img/special/scr_01_03.jpg) no-repeat left top; height: 250px; margin: 0 auto;">
    <span style="color: white;">
            <label><div class="sombrastarjetas"><br/><b> Animal Crossing:</b></label><input style="width: 140px;" type="text" ></div>
            <label><div class="sombrastarjetas"><b> Nombre:</b></label><input style="width: 80px;" type="text" ></div>
            <label><div class="sombrastarjetas"><b> Pueblo:</b></label><input style="width: 80px;" type="text" ></div>
            <label><div class="sombrastarjetas"><b> Código de amigo:</b></label><input style="width: 140px;" type="text" ><p></div>
            <label><div class="sombrastarjetas"><b> Estación favorita:</b></label><input style="width: 70px;" type="text" ></div>
            <label><div class="sombrastarjetas"><b> Personaje favorito:</b></label><input style="width: 80px;" type="text" ></div>
            <label><div class="sombrastarjetas"><b> Fruta inicial:</b></label><input style="width: 100px;" type="text" ></div>
            <label><div class="sombrastarjetas"><b> Correo electrónico:</b></label><input style="width: 200px;" type="text" ></div> 
    </span>
    </div>
</form>
Y podéis probarlo aquí: Fan Animal Crossing: Generador de tarjetas

¿Alguna solución?:(

Gracias.

---ACTUALIZO----

Acabo de poner un código más simple, pero el error persiste. No veo el error :S
 
Última edición:
lobogris

lobogris

Platino
Usuario de Bronce
Mensajes
1,537
Puntuación de reacción
0
HTML: 
<form>
<div style="color: white;">
</div>
<br />
<div style="background: transparent url(http://www.nintendo.es/games/oms/animal_crossing_new_leaf/img/special/scr_01_03.jpg) no-repeat left top; height: 210px; margin: 0 auto; width: 212x;">
<div style="color: white;">
    <label for="ljuego"><div class="sombrastarjetas"><b>                   Animal Crossing:</b></label>
    <input id="ljuego" name="juego" style="width: 140px;" type="text" /></div></div>
<div style="color: white;">
    <label for="lnombre"><div class="sombrastarjetas"><b> Nombre:</b></label>
    <input id="lnombre" name="nombre" style="width: 80px;" type="text" />
    <label for="lapellido"><b>Pueblo:</b></label>
    <input id="lapellido" name="apellido" style="width: 80px;" type="text" /></div></div>
<div style="color: white;">
    <label for="ldireccion"><div class="sombrastarjetas"><b> Código de amigo:</b></label>
    <input id="ldireccion" name="direccion" style="width: 140px;" type="text" /></div></div>
<div style="color: white;">
    <label for="ltelefono"><div class="sombrastarjetas"><b> Estación favorita:</b></label>
    <input id="ltelefono" name="telefono" style="width: 70px;" type="text" /></div></div>
<div style="color: white;">
    <label for="ldirecciontrabajo"><div class="sombrastarjetas"><b> Personaje favorito:</b></label>
    <input id="ldirecciontrabajo" name="direcciontrabajo" style="width: 80px;" type="text" /></div></div>
<div style="color: white;">
    <label for="ltelefonotrabajo"><div class="sombrastarjetas"><b> Fruta inicial:</b></label>
    <input id="ltelefonotrabajo" name="telefonotrabajo" style="width: 100px;" type="text" /></div></div>
<div style="color: white;">
    <label for="correo"><b><div class="sombrastarjetas"> Correo electrónico:</b></label><br />
       <input id="correo" name="correo" style="width: 200px;" type="text" /></div>Creado por Fan Animal Crossing</div></div>
</form>

Aquí está solucionado, excepto la tarjeta pueblo, es cambiaqr las estiquetas span ;)
 
Emilio14

Emilio14

Oro Blanco
Mensajes
399
Puntuación de reacción
2
lobogris dijo:
HTML: 
<form>
<div style="color: white;">
</div>
<br />
<div style="background: transparent url(http://www.nintendo.es/games/oms/animal_crossing_new_leaf/img/special/scr_01_03.jpg) no-repeat left top; height: 210px; margin: 0 auto; width: 212x;">

<div style="color: white;">
    <label for="ljuego"><div class="sombrastarjetas"><b>* * * * * * * * * *Animal Crossing:</b></label>
    <input id="ljuego" name="juego" style="width: 140px;" type="text" /></div></div>
<div style="color: white;">
    <label for="lnombre"><div class="sombrastarjetas"><b>*Nombre:</b></label>
    <input id="lnombre" name="nombre" style="width: 80px;" type="text" />
    <label for="lapellido"><b>Pueblo:</b></label>
    <input id="lapellido" name="apellido" style="width: 80px;" type="text" /></div></div>
<div style="color: white;">
    <label for="ldireccion"><div class="sombrastarjetas"><b>*Código de amigo:</b></label>
    <input id="ldireccion" name="direccion" style="width: 140px;" type="text" /></div></div>
<div style="color: white;">
    <label for="ltelefono"><div class="sombrastarjetas"><b>*Estación favorita:</b></label>
    <input id="ltelefono" name="telefono" style="width: 70px;" type="text" /></div></div>
<div style="color: white;">
    <label for="ldirecciontrabajo"><div class="sombrastarjetas"><b>*Personaje favorito:</b></label>
    <input id="ldirecciontrabajo" name="direcciontrabajo" style="width: 80px;" type="text" /></div></div>
<div style="color: white;">
    <label for="ltelefonotrabajo"><div class="sombrastarjetas"><b>*Fruta inicial:</b></label>
    <input id="ltelefonotrabajo" name="telefonotrabajo" style="width: 100px;" type="text" /></div></div>
<div style="color: white;">
    <label for="correo"><b><div class="sombrastarjetas">*Correo electrónico:</b></label><br />
    ***<input id="correo" name="correo" style="width: 200px;" type="text" /></div>Creado por Fan Animal Crossing</div></div>
</form>

Aquí está solucionado, excepto la tarjeta pueblo, es cambiaqr las estiquetas span ;)
Click para expandir ...

Muchísimas gracias, de verdad. Sin embargo, hace escasos minutos he editado el post con un código nuevo y más sencillo que es el que tengo ahora mismo, ¿te importaría corregir ese nuevo?
Gracias de nuevo y perdona las molestias :(
 
lobogris

lobogris

Platino
Usuario de Bronce
Mensajes
1,537
Puntuación de reacción
0
Estaba comiendo...

Amigo el problema está en que no puedes abrir el label desspués el div y cerrar el label antes que el div, debes abrir el div primero después abrir el label, cerrarlo y después cerrar el div

Lo tienes así:

HTML: 
<label><div class="sombrastarjetas"><br/><b> Animal Crossing:</b></label><input style="width: 140px;" type="text" ></div>

Debes hacerlo así:

HTML: 
<div class="sombrastarjetas"><label><br/><b> Animal Crossing:</b></label><input style="width: 140px;" type="text" ></div>

Saludos :mola:
 
Bleed

Bleed

Diamante
Usuario de Bronce
Mensajes
2,408
Puntuación de reacción
1
Y con PHP y GD puedes generar la tarjeta y asi no seria necesario hacer la captura de pantalla y demas, aunque necesitarias algun hosting donde alojar los archivos. :p
 
Emilio14

Emilio14

Oro Blanco
Mensajes
399
Puntuación de reacción
2
:O ¿Y tú sabes hacerlo? Llevo días buscando cómo conseguir eso... ¿me puedes decir algún sitio para que vea como hacerlo? Sería genial!
 
Bleed

Bleed

Diamante
Usuario de Bronce
Mensajes
2,408
Puntuación de reacción
1
Si, no es difícil de hacer, además PHP está muy bien documentado. Necesitarás un hosting con PHP y GD (lo puedes comprobar con un php_info();) y una imagen de la tarjeta con los datos a rellenar vacíos para recogerlos a través de un formulario y añadirlos a la imagen, no se si me explico.

Ahora no estoy en casa, pero a la vuelta con el ordenador te dejo un par de enlaces que seguro te ayudan. ;)

Enviado desde mi LG-P700 usando Tapatalk 2
 
Emilio14

Emilio14

Oro Blanco
Mensajes
399
Puntuación de reacción
2
Bleed dijo:
Si, no es difícil de hacer, además PHP está muy bien documentado. Necesitarás un hosting con PHP y GD (lo puedes comprobar con un php_info();) y una imagen de la tarjeta con los datos a rellenar vacíos para recogerlos a través de un formulario y añadirlos a la imagen, no se si me explico.

Ahora no estoy en casa, pero a la vuelta con el ordenador te dejo un par de enlaces que seguro te ayudan. ;)

Enviado desde mi LG-P700 usando Tapatalk 2
Click para expandir ...

Vale, espero que sean para principiantes xD
 
Emilio14

Emilio14

Oro Blanco
Mensajes
399
Puntuación de reacción
2
Última edición:
Bleed

Bleed

Diamante
Usuario de Bronce
Mensajes
2,408
Puntuación de reacción
1
Lo de la libreria GD viene por defecto instalada en cualquier hosting de pago decente. En el caso de no tenerla instalada, tu solo podrias hacerlo si tienes tu propio vps o servidor, en un hosting normal y corriente no se permiten estos cambios.

Te he hecho (y comentado) un ejemplo que seguro te ayuda. Guarda esta imagen con el nombre "scr_01_03.jpg" junto a un archivo "index.php" con el siguiente codigo y prueba :
PHP: 
<?php
if (!isset($_POST) OR empty($_POST["nombre"]) OR empty($_POST["ciudad"])){
	// Aqui ponemos un formulario para recoger los datos
	echo '<form name="frm" action="index.php" method="post">Nombre:
	<input type="text" maxlength="25" name="nombre"></input> <br/>Ciudad:
	<input type="text" maxlength="35" name="ciudad"></input>
	<input type="submit" value="Enviar"/></form>';
}else{
	// Aqui recibimos los datos y creamos la imagen
	header("Content-type: image/jpeg"); // Cabecera header para señalar contenido de la pagina
	$nm = trim($_POST["nombre"]);
	$cd = trim($_POST["ciudad"]);
	$im = imagecreatefromjpeg("./scr_01_03.jpg"); // Cogemos la plantilla vacia de ./scr_01_03.jpg
	$blanco = imagecolorallocate($im, 255, 255, 255); // Definimos el color blanco...
	$negro = imagecolorallocate($im, 0, 0, 0); // ...y el negro
	imagestring($im,5,50,50,"Nombre : ".$nm,$negro); // Escribimos en la imagen vacia
	imagestring($im,5,133,210,"Ciudad : ".$cd,$blanco); //  Volvemos a escribir mas texto
	imagejpeg($im); // Mostramos la imagen
	imagedestroy($im); // La liberamos de la memoria
}
?>

Ojo, que lo he hecho deprisa y corriendo en un momento, se puede mejorar mucho y hacer mas cosas, pero es un ejemplo para que veas como seria el tema. Pruebalo. ;)
 
Emilio14

Emilio14

Oro Blanco
Mensajes
399
Puntuación de reacción
2
Estoy haciendo aquí la prueba: http://arwix.hostoi.com/index.php con una cuenta gratuita de 000webhost que dice que sí trae GD.
Al poner tu código me sale todo menos el imagen de fondo. Por lo demás todo creo que va bien, ya que al darle a "enviar" sale como una imagen (pero pone un error de imagen).
Creo que he subido mal la imagen al hosting :D
Te dejo cómo está: https://dl.dropboxusercontent.com/u/55341396/gd.png

Muchas gracias por tu ayuda.
 
Bleed

Bleed

Diamante
Usuario de Bronce
Mensajes
2,408
Puntuación de reacción
1
Borra la imagen que tienes en el servidor y subela por FTP con el filezilla u otro cliente, pero no uses nunca los webftp esos, que a mi también me han dado problemas muchas veces.

Hazlo así como te digo y prueba de nuevo. Yo antes de poner el código probé en mi localhost y funciona perfectamente. Con lo que sea nos dices. ;)

Edito: He accedido al server a comprobar y el código funciona. Casi seguro hayas subido la imagen con el webftp ese, prueba con un cliente como filezilla. Mejorando el código puedes combinar imágenes, añadir sombras, usar otras fuentes y prácticamente hacer lo que quieras con la imagen. ;)

Enviado desde mi LG-P700 usando Tapatalk 2
 
Última edición:
Emilio14

Emilio14

Oro Blanco
Mensajes
399
Puntuación de reacción
2
¡¡DIOS MÍO DIOS MÍOOOO!!!!!!!!!!!!!! ¡¡¡Que no me lo puedo creer, que no me lo puedo creer!!!¡ ¡¡QUE LO HE CONSEGUIDO, QUE SALE, QUE FUNCIONA!! :O!!!! Uff, perdona todo este alboroto pero cuando he visto que ha salido me he llevado las manos a la cabeza y casi no me caigo de la silla, ¡INCREÍBLE! ¡¡ERES UN GENIO!! ¡A partir de ahora eres mi genio! ¡Muchísimas gracias, de verdad, no sabes lo agradecido que te estoy! En lo antes posible empezaré a actualizar la web de las tarjetas! ¡¡Muchísimas gracias!!
 
Bleed

Bleed

Diamante
Usuario de Bronce
Mensajes
2,408
Puntuación de reacción
1
Me alegro de que te funcione. Ya he visto que has empezado a mejorarlo un poco. Puedes poner un campo para escoger la imagen de la tarjeta y utilizar la fuente, color y tamaño que quieras para que quede mejor. Y al enviar el formulario puedes mostrar una página con la imagen y un enlace para descargarla en vez de mostrar la imagen directamente. Ya nos dices cuando lo tengas terminado a ver que tal!! ;)

Enviado desde mi LG-P700 usando Tapatalk 2
 
Emilio14

Emilio14

Oro Blanco
Mensajes
399
Puntuación de reacción
2
Quisiera cambiar la fuente y poner ese botón de descarga, pero no va lo que hago.
(Estos códigos los pongo después de "imagepng($im); // Mostramos la imagen")

- Fuente
Me he descargado la fuente arial.ttf y la he subido al hosting. Después he puesto esto en el código:
PHP: 
$fuente = "arial.ttf";
Y en cada parte (por llamarlo así) de los datos he puesto $fuente. Ejemplo:
PHP: 
imagestring($im,5,50,50,"Nombre : ".$nm,$negro,$fuente);
Pero no va :D

- Para el botón he puesto esto:

PHP: 
on (release) {
import flash.net.FileReference;
var miArchivo:FileReference = new FileReference();
var url:String = "tarjeta.png";
var nombre_de_descarga:String = "tarjeta.png";
tarjeta.download(url, Descargar);
}

Es un código sacado de internet. El original es:
PHP: 
on (release) { 
import flash.net.FileReference; 
var miArchivo:FileReference = new FileReference(); 
var url:String = "miArchivo_de_ejemplo.jpg"; 
var nombre_de_descarga:String = "ejemploLoader1.jpg"; 
miArchivo.download(url, nombre_de_descarga); 
}

Lo he hecho un poco al azar porque no entiendo PHP, pero la verdad es que esto me está sirviendo mucho para aprenderlo. Ahora el menos he conocido la sintaxis y un poco cómo va la cosa ;)
Gracias por tu atención.
 
Emilio14

Emilio14

Oro Blanco
Mensajes
399
Puntuación de reacción
2
Hola,
estoy haciendo un index en html para mejorar al estética de la web y que la creación vaya en tres pasos: selección de fondo, rellenar campos y creación de la imagen.
Sin embargo, tengo un problemilla, que es que ahora en el formulario, no puedo poner el "index.php" de antes, sino que quedaría el inicio así:

echo '<form name="frm" action="primavera.php" method="post">Animal Crossing:

Ya que en "primavera.php" es donde se hará el formulario, no en el index (porque, repito, lo tengo con html).
¿Habría alguna forma de poder solucionar esto? Porque ahora cuando le doy a obtener la tarjeta, la imagen no se ve.

Aquí puedes probarlo:
Tarjetas Animal Crossing
 
Bleed

Bleed

Diamante
Usuario de Bronce
Mensajes
2,408
Puntuación de reacción
1
El action del form indica el archivo al que se enviaran los datos del formulario. Para escoger la imagen tienes que incluir un select con las distintas opciones, y despues, en el archivo que hayas indicado en el action, procesar los datos y mostrar la imagen.
 
Estado
No está abierto para más respuestas.

Comparte esta página

Arriba