elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recuerda que debes registrarte en el foro para poder participar (preguntar y responder)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ayuda Web personal.		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: 1 [2] 3 4 Ir Abajo Respuesta Imprimir
Autor Tema: Ayuda Web personal.  (Leído 11,827 veces)
JonaLamper


Desconectado Desconectado

Mensajes: 394



Ver Perfil
Re: Ayuda Web personal.
« Respuesta #10 en: 30 Julio 2014, 17:23 pm »
Muchas gracias. Se agradece la ayuda.
En línea
Utilizar palabras para hablar de palabras es como utilizar un lápiz para hacer un dibujo de ese lápiz sobre el mismo lápiz.
ivancea96


Desconectado Desconectado

Mensajes: 3.412


ASMático


Ver Perfil WWW
Re: Ayuda Web personal.
« Respuesta #11 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>
En línea
Code0x66 - Blog de hacking & programación
JorgeEMX
Ex-Staff
*
Desconectado Desconectado

Mensajes: 2.615



Ver Perfil WWW
Re: Ayuda Web personal.
« Respuesta #12 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.
En línea
Siempre hay algo nuevo que aprender
Mi canal de YOUTUBE: https://www.youtube.com/channel/UCt1WPhzdZW7tRTe5I5USkGQ
JonaLamper


Desconectado Desconectado

Mensajes: 394



Ver Perfil
Re: Ayuda Web personal.
« Respuesta #13 en: 5 Agosto 2014, 20:55 pm »
¿Cómo va eso, compañeros?



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. }
En línea
Utilizar palabras para hablar de palabras es como utilizar un lápiz para hacer un dibujo de ese lápiz sobre el mismo lápiz.
JonaLamper


Desconectado Desconectado

Mensajes: 394



Ver Perfil
Re: Ayuda Web personal.
« Respuesta #14 en: 8 Agosto 2014, 00:52 am »
Up  :-(
En línea
Utilizar palabras para hablar de palabras es como utilizar un lápiz para hacer un dibujo de ese lápiz sobre el mismo lápiz.
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Ayuda Web personal.
« Respuesta #15 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  :(
En línea
GITHUB 
JonaLamper


Desconectado Desconectado

Mensajes: 394



Ver Perfil
Re: Ayuda Web personal.
« Respuesta #16 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
En línea
Utilizar palabras para hablar de palabras es como utilizar un lápiz para hacer un dibujo de ese lápiz sobre el mismo lápiz.
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Ayuda Web personal.
« Respuesta #17 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>).
En línea
GITHUB 
JonaLamper


Desconectado Desconectado

Mensajes: 394



Ver Perfil
Re: Ayuda Web personal.
« Respuesta #18 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).
En línea
Utilizar palabras para hablar de palabras es como utilizar un lápiz para hacer un dibujo de ese lápiz sobre el mismo lápiz.
JonaLamper


Desconectado Desconectado

Mensajes: 394



Ver Perfil
Re: Ayuda Web personal.
« Respuesta #19 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:



Como siempre muchas gracias  ;D
« Última modificación: 12 Agosto 2014, 14:07 pm por JonaLamper » En línea
Utilizar palabras para hablar de palabras es como utilizar un lápiz para hacer un dibujo de ese lápiz sobre el mismo lápiz.
Páginas: 1 [2] 3 4 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ayuda con proyecto personal.
Java 		0x0309 2 3,117 Último mensaje 11 Septiembre 2009, 05:49 am
por Amerikano|Cls
Ayuda proyecto personal
Electrónica 		Panic0 6 9,918 Último mensaje 28 Junio 2021, 20:14 pm
por engel lex
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines