 Autor
|
Tema: Ayuda Web personal. (Leído 11,829 veces)
|
JonaLamper
 Desconectado
Mensajes: 394
|
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 
|
|
|
|
|
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.
|
|
|
zaphiel
Desconectado
Mensajes: 15
|
 |
Re:
« Respuesta #1 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
|
|
|
|
|
En línea
|
|
|
|
EFEX
Desconectado
Mensajes: 1.171
"Dinero Facil"
|
Podes definir un background.. .divElemento{background-image:url("127.0.0.1/www/image.jpeg");}
|
|
|
|
|
En línea
|
|
|
|
JonaLamper
Desconectado
Mensajes: 394
|
He aquí mi segunda duda:  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 |
|
|
|
« Última modificación: 29 Julio 2014, 19:27 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.
|
|
|
|
|
JonaLamper
Desconectado
Mensajes: 394
|
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: .Password { position: relative; top: 100px; left: 0px; }
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; |
|
|
|
« Última modificación: 30 Julio 2014, 01:37 am 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.
|
|
|
|
MinusFour
|
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: .Password { position: relative; top: 100px; left: 0px; }
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í: .Password { position: absolute; top: 50%; left: 50%; margin-top: -40px; //mitad de la altura margin-left: -50px; //mitad del ancho height: 80px; width: 100px; }
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/
|
|
|
|
« Última modificación: 30 Julio 2014, 06:50 am por MinusFour »
|
En línea
|
|
|
|
JonaLamper
Desconectado
Mensajes: 394
|
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 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
Mensajes: 1.171
"Dinero Facil"
|
Lo que tenes que tener en cuenta es que lo elementos se acomodan segun el espacio.. mira.. <html> <head> <style type="text/css"> body{margin: 0px;padding: 0px;} #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 */ #wrapper .header{width: 100%;height: 60px;background-color: #aaa;} #wrapper .header .logo{width: 200px;height: auto;background-color: #bbb;float: left;} /* Posicionamos el elemento a la izquierda */ #wrapper .header .login{width: 200px;height: auto;background-color: #bbb;float: right;} /* derecha utilizando float */ #wrapper .content{width: 100%;height: 400px;background-color: #ccc;overflow: hidden;} /* oveflow de nuevo por que usamos margin-top */ #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 */ #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.. */ #wrapper .footer p{margin: 0px;} /* Le quito la propiedad margin a p, por eso se utiliza un archivo css para resetear estilos.. */ </style> </head> <body> <div id="wrapper"> <div class="header"> <div class="logo">Logo</div> <div class="login">Login</div> </div> <div class="content"> <div class="search"> <form> <input type="text" name="fname"> <input type="submit" name="fname"> </form> </div> </div> <div class="footer"> <p>Descripcion</p> </div> </div> </body> </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.. /* Resoluciones 800x600 */ @media screen and (min-width: 600px) and (max-width: 800px) { #container{ /* Las propiedades que definas se sobre escriben */ } }
 |
|
|
|
« Última modificación: 30 Julio 2014, 15:06 pm por EFEX »
|
En línea
|
|
|
|
|
MinusFour
|
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.
|
|
|
|
|
En línea
|
|
|
|
|
 |
