Ayuda Web personal.

JonaLamper · 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

zaphiel · 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

EFEX · 29 Julio 2014, 15:49 PM

Podes definir un background..

Código (css) [Seleccionar]

.divElemento{background-image:url("127.0.0.1/www/image.jpeg");}

JonaLamper · 29 Julio 2014, 19:25 PM

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

EFEX · 29 Julio 2014, 19:43 PM

Supongo que es el body

Código (css) [Seleccionar]

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/

JonaLamper · 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 (css) [Seleccionar]

.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;

MinusFour · 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 (css) [Seleccionar] Expandir
.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í:

Código (css) [Seleccionar]


.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/

JonaLamper · 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").

EFEX · 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 (css) [Seleccionar]


<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..

Código (css) [Seleccionar]


/* Resoluciones 800x600 */
@media screen and (min-width: 600px) and (max-width: 800px) {
   #container{
       /* Las propiedades que definas se sobre escriben */
   }
}

MinusFour · 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.