Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: JonaLamper en 29 Julio 2014, 13:12 pm


Título: Ayuda Web personal.
Publicado por: JonaLamper en 29 Julio 2014, 13:12 pm
Estoy haciendo una web facilita durante el verano y tendré alguna dudas (supongo). Así que las pondré todas aquí.

La primera es: ¿cómo puedo poner una imagen de fondo, y encima de la imagen poner una caja de texto, checkbox, etc?

Pd: que conste que estoy empezando con html5 y css3  ;D

Título: Re:
Publicado por: zaphiel en 29 Julio 2014, 13:43 pm
Usando z-index en css se puede creo, hace como "capas",  hace mucho que no hago yo nada,  buscalo o espera que te digan los expertos mejor.

Enviado desde mi GT-I9100 usando Tapatalk 4

Título: Re: Ayuda Web personal.
Publicado por: EFEX en 29 Julio 2014, 15:49 pm
Podes definir un background..
Código
  1. .divElemento{background-image:url("127.0.0.1/www/image.jpeg");}

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 29 Julio 2014, 19:25 pm
He aquí mi segunda duda:

(http://nsae01.casimages.net/img/2014/07/29/mini_140729072602885354.jpg) (http://www.casimages.es/i/140729072602885354.jpg.html)


como veis, en los márgenes laterales se ve una franja blanca que queda horriblemente mal. En el margen de la izquierda no hay problema porque es solo hacer la imagen un pelín más grande, pero... ¿Cómo arreglo el margen de la derecha? Ese siempre aparece sea cual sea el tamaño de la imagen  :-(

Pd: podría poner el code, pero es un... descontrol  ;D

Título: Re: Ayuda Web personal.
Publicado por: EFEX en 29 Julio 2014, 19:43 pm
Supongo que es el body
Código
  1. body{padding:0px;margin:0px;}

Se es comun agregar un archivo css para resetear propiedades.. por darte un ejemplo..
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://www.siolon.com/blog/browser-reset-css/

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 29 Julio 2014, 23:40 pm
Oh, muchas gracias! es que al estar empezando, hay cosas que serán sencillas pero que no te sabes el comando ideal. Sep, el diseño está hecho con css3

Ah, me pasa otra cosa: cuando cambio la resolución de la pantalla, la página web se corta y no se ve bien. Estoy utilizando este tipo de medida:

Código
  1. .Password {
  2. 	position: relative;
  3. 	top: 100px;
  4. 	left: 0px;
  5. }

Para que esto no ocurra, qué tipo de medida tengo que usar, el %? o tiene que ver con poner:
position: relative;
position: static;
position: absolute;

Título: Re: Ayuda Web personal.
Publicado por: MinusFour en 30 Julio 2014, 05:26 am
Cita de: JonaLamper en 29 Julio 2014, 23:40 pm
Oh, muchas gracias! es que al estar empezando, hay cosas que serán sencillas pero que no te sabes el comando ideal. Sep, el diseño está hecho con css3

Ah, me pasa otra cosa: cuando cambio la resolución de la pantalla, la página web se corta y no se ve bien. Estoy utilizando este tipo de medida:

Código
  1. .Password {
  2. 	position: relative;
  3. 	top: 100px;
  4. 	left: 0px;
  5. }

Para que esto no ocurra, qué tipo de medida tengo que usar, el %? o tiene que ver con poner:
position: relative;
position: static;
position: absolute;


Influye bastante, son propiedades que pueden llegar a afectar el posicionamiento del elemento drasticamente.

Y no estoy muy seguro de lo que intentas hacer ¿Quieres centrar el div password a la mitad?

Puedes hacerlo así:

Código
  1. .Password {
  2. 	position: absolute;
  3. 	top: 50%;
  4. 	left: 50%;
  5.         margin-top: -40px; //mitad de la altura
  6.         margin-left: -50px; //mitad del ancho
  7.         height: 80px;
  8.         width: 100px;
  9. }

Aquí la explicación:

http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Y acerca del posicionamiento, un resúmen:

http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 30 Julio 2014, 10:46 am
Lo que pretendo es simplemente que mi web se vea igual en cualquier resolución de la pantalla (o al menos en las "normales").

Título: Re: Ayuda Web personal.
Publicado por: EFEX en 30 Julio 2014, 15:03 pm
Lo que tenes que tener en cuenta es que lo elementos se acomodan segun el espacio.. mira..

Código
  1. <html>
  2. <head>
  3. 	<style type="text/css">
  4. 		body{margin: 0px;padding: 0px;}
  5. 		#wrapper{width: 100%;height: 100%;overflow: hidden;} /* overflow nos salva de que los elementos se acomoden :P, cuando usamos float lo ubicamos a su elemento padre */
  6.  
  7. 		#wrapper .header{width: 100%;height: 60px;background-color: #aaa;}
  8. 		#wrapper .header .logo{width: 200px;height: auto;background-color: #bbb;float: left;} /* Posicionamos el elemento a la izquierda */
  9. 		#wrapper .header .login{width: 200px;height: auto;background-color: #bbb;float: right;} /* derecha utilizando float */
  10.  
  11. 		#wrapper .content{width: 100%;height: 400px;background-color: #ccc;overflow: hidden;} /* oveflow de nuevo por que usamos margin-top  */
  12. 		#wrapper .content .search{width:300px;margin-left:auto;margin-right:auto;margin-top:200px;background-color: #bbb;} /* margin-left y margin-right para que el elemento se posicione en el medio horizontalmente, margin-top para que se acomode mas abajo */
  13.  
  14. 		#wrapper .footer{width: 100%;height: 80px;background-color: #ddd;text-align: center;} /* Defino el texto en el centro, nota que solo el texto lo que cambia.. */
  15. 		#wrapper .footer p{margin: 0px;} /* Le quito la propiedad margin a p, por eso se utiliza un archivo css para resetear estilos.. */
  16. 	</style>
  17. </head>
  18. <body>
  19. 	<div id="wrapper">
  20. 		<div class="header">
  21. 			<div class="logo">Logo</div>
  22. 			<div class="login">Login</div>
  23. 		</div>
  24. 		<div class="content">
  25. 			<div class="search">
  26. 				<form>
  27. 					<input type="text" name="fname">
  28. 					<input type="submit" name="fname">
  29. 				</form>
  30. 			</div>
  31. 		</div>
  32. 		<div class="footer">
  33. 			<p>Descripcion</p>
  34. 		</div>
  35. 	</div>
  36. </body>
  37. </html>

Si estas en firefox(ctrl+shift+m) y ve cambiando de resolucion.. quizas en tu codigo necesites utilizar reglas que se usan para el diseño responsivo, definir la resolucion que te de problema y definirle vos mismo las propiedades css al elemento..
Código
  1. /* Resoluciones 800x600 */
  2. @media screen and (min-width: 600px) and (max-width: 800px) {
  3.    #container{
  4.        /* Las propiedades que definas se sobre escriben */
  5.    }
  6. }

(https://i.imgur.com/TogCYkI.png?1)

Título: Re: Ayuda Web personal.
Publicado por: MinusFour en 30 Julio 2014, 16:17 pm
Cita de: JonaLamper en 30 Julio 2014, 10:46 am
Lo que pretendo es simplemente que mi web se vea igual en cualquier resolución de la pantalla (o al menos en las "normales").

En cuanto a posicionamiento, si usas %s te asegurás que el elemento se posicione en relación al tamaño de su contenedor. Que la página se vea completamente igual en diferentes resoluciones es un poco díficil. Realmente porque al hacer un cambio de resolución estamos ajustando a otra densidad de pixeles.

Suponiendo que los dos monitores con resoluciones diferentes tengan la misma densidad de pixeles, estos deberían mostrar lo mismo aunque quizás si maximizas el navegador en la resolución más grande haya más espacio por llenar (si estás utilizando pixeles y no %).

Lo que puedes hacer es realizar pequeños ajustes para resoluciones diferentes haciendolo parecer muy similar, pero visualizar la página completamente igual es algo complejo.

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 30 Julio 2014, 17:23 pm
Muchas gracias. Se agradece la ayuda.

Título: Re: Ayuda Web personal.
Publicado por: ivancea96 en 30 Julio 2014, 17:53 pm
También tienes la opción de usar javascript, poniendole al body eventos onResize, onLoad, etc.

Como:

Código
  1. <head>
  2. <script>
  3. function resize(){
  4.     if(screen.width/screen.height < 1.6)
  5.         document.body.style.backgroundSize = "auto 100%";
  6.     else
  7.         document.body.style.backgroundSize = "100% auto";
  8. }
  9. </script>
  10. </head>
  11.  
  12. <body onresize="resize()">
  13.  
  14. </body>

Título: Re: Ayuda Web personal.
Publicado por: JorgeEMX en 30 Julio 2014, 18:26 pm
Si quieres una web responsiva (que se adapte a varias resoluciones y dispositivos) mejor usa Bootstrap: http://getbootstrap.com/css/#grid

Busca por Google manuales y demás, se aprende rápido.

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 5 Agosto 2014, 20:55 pm
¿Cómo va eso, compañeros?

(http://nsae01.casimages.net/img/2014/08/05/mini_140805085304706447.png) (http://www.casimages.es/i/140805085304706447.png.html)

Ehm... bueno, el problema es el siguiente: cuando inserto elementos por delante de la imagen, la propia imagen se me va desplazando hacia abajo dejando un hueco arriba del tamaño del elemento que he insertado. Estoy usando los z-index: para ponerlo por capas, pero no sé qué debo tener mal. Dejo aquí el código (es muy simplón):

HTML:

Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. 	<head>
  4. 		<title>Linker</title>
  5. 		<meta charset="iso-8859-1">
  6. 		<link rel="stylesheet" type="text/css" href="resultado.css">
  7. 	</head>
  8. 	<body>
  9. 		<div id="barras">
  10. 		<meter class="primero" value="10" min="0" max="40" low="0" high="28">
  11. 		</div>
  12. 		<a href="#" class="a1">1</a>
  13. 		<a href="#" class="a1">2</a>
  14. 		<a href="#" class="a1">3</a>
  15. 		<a href="#" class="a1">4</a>
  16. 		<a href="#" class="a1">5</a>
  17. 		<img class="resultado" src="resultado.jpg">
  18.  
  19. 	</body>
  20. </html>

CSS:

Código
  1. /*Alineación*/
  2. body {
  3. 	padding:0px;
  4. 	margin:0px;
  5. }
  6.  
  7. meter {
  8. 	position:relative;
  9. 	top: 60px;
  10. 	left: 30px
  11. }
  12.  
  13. img {
  14. 	z-index: 0;
  15. }
  16.  
  17. .a1 {
  18. 	background-color:#BFE4FA;
  19. 	-moz-border-radius:3px;
  20. 	-webkit-border-radius:3px;
  21. 	border-radius:3px;
  22. 	display:inline-block;
  23. 	cursor:pointer;
  24. 	color:#ffffff;
  25. 	font-family:Times New Roman;
  26. 	font-size:14px;
  27. 	font-weight:bold;
  28. 	padding:2px 8px;
  29. 	text-decoration:none;
  30. 	position:relative;
  31. 	top: 70px;
  32. 	left: 10px;
  33. 	z-index: 1;
  34. 	transition: background-color 800ms;
  35. }
  36.  
  37. .a1:hover {
  38. 	background-color:#0aa5ff;
  39. 	z-index: 1;
  40. }
  41.  
  42. .a1:active {
  43. 	position:relative;
  44. 	top: 70px;
  45. 	left: 10px;
  46. 	z-index: 1;
  47. }

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 8 Agosto 2014, 00:52 am
Up  :-(

Título: Re: Ayuda Web personal.
Publicado por: EFEX en 8 Agosto 2014, 01:23 am
z-index, se utiliza para superponer elementos, siendo el numero mas alto el que se va superponer sobre otros elementos.. no se muy bien lo que intentas hacer  :(

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 8 Agosto 2014, 10:35 am
Se superpone. El problema es que me genera un espacio en blanco encima de la imagen (como se ve en la captura de pantalla).

pd: eso que pone de: teatro wikipedia, madrid teatro, etc... Es una imagen, no una búsqueda xD

Título: Re: Ayuda Web personal.
Publicado por: EFEX en 8 Agosto 2014, 19:47 pm
Click derecho sobre el espacio blanco > inspeccionar elemento, veras por que.. otra cosa no dejes elementos libres por hay utiliza capas/contenedores(<div>).

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 8 Agosto 2014, 23:27 pm
Por si a alguien le sirve: lo he conseguido. He metido todas las cosas en div. Los espacios me los generaba por culpa de las medidas en relative; así que las he cambiado y las he puesto en absolute; (aunque obviamente me ha tocado redimensionar todo de nuevo).

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 12 Agosto 2014, 14:05 pm
Aquí estoy de nuevo.

Quería incorporar un botón de Logín y buscando me tope con uno: http://www.sanwebe.com/2013/01/40-css-buttons-from-codepen Es el que se llama "Facebook Login Button". Pero al copiar el código no me funciona, quizá sea algún fallo tonto (estoy empezando en html y css). Tengo mi archivo html con el css y el js externos. Aquí os los dejo tal cual están, a ver si conseguís ver en qué estoy fallando:

(Mis tres archivos se llaman "indice")

ARCHIVO HTML:

Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. 	<head>
  4. 		<title>Prueba</title>
  5. 		<meta charset="iso-8859-1">
  6. 		<link rel="stylesheet" type="text/css" href="indice.css">
  7. 		<script type="text/javascript" src="indice.js"></script>
  8. 	</head>
  9. 	<body>
  10. 		<div class="block">
  11. 		  <div class="btn-fb-login">
  12. 			<span class="icon icon-fb"></span>
  13. 			<span class="title">Login with Facebook</span>
  14. 		  </div>
  15. 		  <div class="fb-login">
  16. 			<div class="title">Login with Facebook</div>
  17. 			<div class="login-form">
  18. 			  <form method="post">
  19. 				<input type="text" placeholder="E-mail" />
  20. 				<input type="password" placeholder="Password" />
  21. 				<button type="submit" class="btn btn-login">Login</button>
  22. 			  </form>
  23. 			</div>
  24. 		  </div>
  25. 		</div>
  26. 	</body>
  27. </html>

ARCHIVO CSS:

Código
  1. html { background: url(http://s.cdpn.io/6035/fb_login_bg.png) repeat; }
  2. body {  
  3.   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  4.   font-weight: 300;
  5. }
  6.  
  7. .block { 
  8.   width: 175px;
  9.   margin: 50px auto;
  10. }
  11.  
  12. .btn-fb-login {
  13.   width: 100%;
  14.   height: 30px;
  15.   border: 1px solid rgba(0,0,0,0.3);
  16.   border-radius: 4px;
  17.   @include background-image(linear-gradient(top, rgba(72,107,181,1) 0%,rgba(51,78,135,1) 100%));
  18.   box-shadow: inset 0 1px 3px rgba(255,255,255,0.2);
  19.   cursor: pointer;
  20.   &:hover {
  21.       @include background-image(linear-gradient(top, rgba(72,107,181,1) 0%,rgba(35,59,108,1) 100%));
  22.   }
  23.   .icon {  
  24.     background: url(http://s.cdpn.io/6035/fb_login_sprite.png) no-repeat;
  25.     width: 11px;
  26.     height: 22px;
  27.     display: inline-block;
  28.     float: left;
  29.     margin: 3px 10px;
  30.   }
  31.   .title {
  32.     font-size: (13/16) +em; 
  33.     color: #fff;
  34.     line-height: 30px;
  35.     float: left;
  36.     padding: 0 10px;
  37.     text-shadow: -1px -1px 1px rgba(0,0,0,0.5);
  38.     box-shadow: -1px 0 0 rgba(255,255,255,0.1) ;
  39.     border-left: 1px solid rgba(0,0,0,0.3);
  40.   }
  41. }
  42.  
  43. .fb-login {
  44.   display: none;
  45.   width: 100%;
  46.   margin-top: 20px;
  47.   border: 1px solid rgba(0,0,0,0.3);
  48.   border-radius: 4px;
  49.   @include background-image(linear-gradient(top, rgba(72,107,181,1) 0%,rgba(51,78,135,1) 100%));
  50.   box-shadow: inset 0 1px 3px rgba(255,255,255,0.2), 0 0 25px rgba(0,0,0,0.3); 
  51.   .login-form {
  52.     width: 155px;
  53.     margin: 10px;
  54.   }
  55.   .title {
  56.     font-size: (14/16) +em;
  57.     color: #fff;
  58.     text-shadow: -1px -1px 1px rgba(0,0,0,0.5);
  59.     text-align: center;
  60.     padding: 10px 0;
  61.     margin: 0 0 10px 0;
  62.  
  63.   }
  64.   input[type=text], input[type=password] {
  65.     width: 100%;
  66.     height: 30px;
  67.     margin: 0 0 10px;
  68.     padding: 0 5px;
  69.     display: inline-block;
  70.     background: rgba(0,0,0,0.1);
  71.     border: 1px solid rgba(0,0,0,0.3);
  72.     border-radius: 3px;
  73.     box-sizing: border-box;
  74.     box-shadow: inset 0 1px 3px rgba(40,40,40,0.3), 0 1px 0 rgba(255,255,255,0.1);
  75.     font-size: (11/16) +em;
  76.     color: #fff;
  77.     outline: none;
  78.     text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
  79.     transition: background 0.3s ease;
  80.     &:focus {
  81.       background: rgba(0,0,0,0.03);
  82.     }
  83.   }
  84.   .btn {
  85.     width: 100%;
  86.     height: 30px;
  87.     border: 1px solid rgba(0,0,0,0.5);
  88.     border-radius: 4px;
  89.     @include background-image(linear-gradient(top, rgba(100,134,207,1) 0%,rgba(74,107,175,1) 100%));
  90.     box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 1px rgba(0,0,0,0.1);
  91.     color: #fff;
  92.     font-size: (12/16) +em;
  93.     text-shadow: -1px -1px 1px rgba(0,0,0,0.4);
  94.     &:hover {
  95.       @include background-image(linear-gradient(top, rgba(100,134,207,1) 0%,rgba(59,90,153,1) 100%));
  96.     }
  97.     &:active {
  98.       box-shadow: inset 0 0 4px rgba(0,0,0,0.4);
  99.       background: #35518d;
  100.     }
  101.   }
  102. }

ARCHIVO javascript:

Código
  1. $('.btn-fb-login').on('click',function(){
  2.   $(this).fadeOut(function(){
  3.     $('.fb-login').fadeIn();
  4.   });
  5. });


El Resultado que me muestra es este:

(http://s2.subirimagenes.com/otros/previo/thump_9030694sin-ttulo.jpg) (http://www.subirimagenes.com/otros-sinttulo-9030694.html)

Como siempre muchas gracias  ;D

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 13 Agosto 2014, 22:36 pm
Up  :-(

Título: Re: Ayuda Web personal.
Publicado por: EFEX en 13 Agosto 2014, 22:49 pm
Donde esta la libreria JQuery?

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 13 Agosto 2014, 22:55 pm
Uhm... librería? ^^! no sé nada de JQuery jajaja Tengo los tres archivos en la misma carpeta O.o

Título: Re: Ayuda Web personal.
Publicado por: EFEX en 13 Agosto 2014, 23:37 pm
Ok, ahora me doy cuenta que quieres copiar un ejemplo de codepen.. veras es mas complicadito que un copy paste, ademas de necesitar JQuery tambien necesitas instalar sass (http://sass-lang.com/ ).

Esto se va del tema, primero aprende lo basico y te podemos ayudar mientras aprendes, pero si quieres copiar y pegar lo que encuentres sin aprender nada... cual es el punto entonces.

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 14 Agosto 2014, 01:26 am
Bueno, tampoco es exactamente así. Yo vi un ejemplo que había en esa página (solo tenía HTML y CSS) y me gustó la animación. La copie literalmente, pero después me tuve que pelear para arreglarlo y ponerlo a mi manera. Cambie los parámetros del CSS y tuve que ir uno por uno modificándolos para que quedara justo como debía quedar: a mi gusto.

Realmente sí es copiar, pero es copiar y también entender qué hace cada cosa.

El problema vino cuando me gustó el efecto ese que puse anteriormente que incluía JQuery... Entonces pensé que haciendo referencia al archivo JQuery (al igual que se hace referencia al archivo CSS) era suficiente. Pero veo que no es así  :-\

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 2 Septiembre 2014, 17:33 pm
Una duda: estoy intentando que la web se vea igual en cualquier resolución y se me ha ocurrido la idea de hacer los alineamientos con % de esta forma:

Código
  1. .a {
  2. 	position: absolute;
  3. 	top: 15%;
  4. 	left: 11%;
  5. }

En vez de esta:

Código
  1. .a {
  2. 	position: absolute;
  3. 	top: 15px;
  4. 	left: 11px;
  5. }

Parece que funciona, pero... es buena idea? No sé por qué me da que voy a tener problemas cuando se vuelva más complejo  :-\

Título: Re: Ayuda Web personal.
Publicado por: kaiserr en 3 Septiembre 2014, 19:04 pm
Yo cuando quiero comprobar el responsive de una web reduzco el tamaño de la ventana del navegador o utilizo esta web http://quirktools.com/screenfly/ (http://quirktools.com/screenfly/)

Cuando utilizas px, el elemento sera de ese tamaño siempre. Quizas cuando lo veas en resoluciones mas pequeñas te crea un scroll, por eso tambien se utiliza lo que te pusieron en este tema:
Cita de: EFEX en 30 Julio 2014, 15:03 pm

Código
  1. /* Resoluciones 800x600 */
  2. @media screen and (min-width: 600px) and (max-width: 800px) {
  3.    #container{
  4.        /* Las propiedades que definas se sobre escriben */
  5.    }
  6. }


por mi parte utilizo poco la posicion absoluta, aunque no se que es lo que quieres hacer xD

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 11 Septiembre 2014, 12:51 pm
Llevo un buen rato con una cosa muy sencilla que no me sale y me esta mosqueando. Tengo un div y dentro de él, hay una frase y una imagen gris. Lo que pretendo es poner la imagen detrás del texto... a ver si alguien ve el fallo porque me tiene hasta el gorro.

Código
  1. 		<div id="bot">
  2. 				<p class="descripcion">Linker te ofrece una nueva forma de organizar Internet a tu manera</p>
  3. 				<img class="pie" src="subfondo3.jpg">
  4. 		</div>

Código
  1. /*Div Bot*/
  2. #bot {
  3. 	position:absolute;
  4. 	width:100%;
  5. 	height:25%;
  6.         left:0%;
  7.         top:75%;
  8. }
  9.  
  10. #bot p {
  11. 	position:relative;
  12.         text-align: center;
  13. 	font-weight: bold;
  14. 	font-size: 30px;
  15. 	color: #004AAB;
  16. 	font: small-caps 100%/200% serif;
  17.         left:0%;
  18.         top:0%;
  19. 	z-index: 2;
  20. }
  21.  
  22. #bot .pie {
  23. 	position:relative;
  24.     background: url(subfondo3.jpg) repeat #fefefe
  25. 	z-index: 1;
  26. 	width:100%;
  27. 	height:45%;
  28.         left:0%;
  29.         top:0%;
  30. }


Adjunto una imagen de cómo me sale a mí:

(http://nsae01.casimages.net/img/2014/09/11/mini_140911125146835628.png) (http://www.casimages.es/i/140911125146835628.png.html)

Título: Re: Ayuda Web personal.
Publicado por: kaiserr en 11 Septiembre 2014, 14:05 pm
pon la imagen con position:absolute :) o pon la imagen de background en el css

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 11 Septiembre 2014, 21:42 pm
Gracias. Cuando pensé en poner position: absolute; creía que era absoluto en cuanto al body, no en cuanto al div que lo contenía. E ahí el fallo  ;D

Título: Re: Ayuda Web personal.
Publicado por: kaiserr en 11 Septiembre 2014, 21:57 pm
Aunque si quieres tener una imagen de fondo que no aporta nada, te aconsejo que la coloques como background en el css :)

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 23 Septiembre 2014, 23:02 pm
¿Alguien sabe cómo poner un botón en HTML de tal forma que si pulso enter me lleve a otra página web (en vez de tener que hacer clik con el ratón)?

Título: Re: Ayuda Web personal.
Publicado por: kaiserr en 25 Septiembre 2014, 00:29 am
No se si se puede directamente en HTML, pero con jQuery es muy facil ;)

Edito: Por si lo quieres hacer con jQuery

Código
  1. $(document).keypress(function(e) 
  2. {
  3.    if(e.which == 13) 
  4.    {
  5.       /* lo que quieras */
  6.    }
  7. });
  8.  

aunque esto estara validando cada tecla que pulses... no se si es muy optimo.


Otra solucion es ir tabulando y cuando llegues al boton que apriete enter jaja

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 25 Septiembre 2014, 13:08 pm
Madre Virgen María, al fin.

No importa que no sea optimo. Una pregunta: ¿Cómo se pone en jQuery que me lleve a una página? es decir, que al pulsar enter me lleve a mipagina.html. Y por último, ¿cómo se inserta código jQuery en HTML? dentro del propio archivo HTML supongo que se puede, no?

Título: Re: Ayuda Web personal.
Publicado por: kaiserr en 25 Septiembre 2014, 16:28 pm
Código
  1. window.location.href = /*web*/

el codigo jQuery se pone dentro de las etiquetas <script></script>
Necesitas descargarte la api de jQuery y subirla a tu servidor  :)

Te dejo una web para que leas un poco sobre jQuery
http://www.desarrolloweb.com/articulos/pasos-para-ejecutar-jquery.html

Título: Re: Ayuda Web personal.
Publicado por: JonaLamper en 25 Septiembre 2014, 20:14 pm
Gracias.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines