CSS - Problema con posicionamientos el CSS

   
Vista:

Problema con posicionamientos el CSS

Publicado por djzzz (2 intervenciones) el 03/01/2016 14:13:03
Pues bien, me ocurre lo siguiente:
Estoy intentando desarrollar una interfaz con posicionamientos absolutos con el fin de que, al minimizar el navegador, la propia página no se deforme. Por lo que, para este código HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
	<div id="contenedor">
		<div id="cabecera">
			<img src="images\logoBlancoPequenio.png" class="logoBlanco" />
			<img src="images\conecta2.png" class="conecta2" />
			<span class="sobreNosotros"><a href="#">Sobre nosotros</a></span>
		</div>
 
		<div id="principal">
			<img src="images\ordenadorIndex.png" class="ordenadorIndex" />
				<div id="formularioOrdenador">
					<form method="post" action="alguno.cgi" id="formularioLogueo">
						<table>
							<tr>
								<td>Login: </td>
								<td><input type="text" maxlength="20" size="20" id="login" /></td>
							</tr>
							<tr>
								<td>Password: </td>
								<td><input type="text" maxlength="20" size="20" id="passwd" /></td>
							</tr>
							<tr>
								<td colspan ="2"><p style="text-align:center;"><input type="button" id="enviarLogin" value="Enviar" id="passwd" /></p></td>
							</tr>
					</form>
				</div>
		</div>
	</div>
</body>

Intento dejar el contenedor con posicionamiento relativo y el resto definirlo en absolutos:
Mi problema está en que querría dejar la cabecera con un 100% de anchura, con las imágenes acopladas a su tamaño, y que esta no se deformase, así como la caja principal, pero me resulta imposible, y mi duda es:
¿hay alguna forma humana de realizar esto?¿O, si las medidas tienen que ir en píxels, como tiene que ser, hay alguna forma de poder acoplarlo a lo que digo con CSS?

OS dejo el último fragmento CSS que he dejado hecho, por si acaso:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
*{
	font-size:1em;
	font-family: Arial, Helvetica, sans-serif;
}
 
div#contenedor{
	position:relative;
	top:0%;
	left:0%;
	width:12000;
	height:700px;
}
 
div#cabecera{
	position:absolute;
	background-color:#a31915;
	width: 100%;
	height: 60px;
	top:0%;
	left: 0%;
}
 
div#cabecera img.logoBlanco{
	height:100%; /*Para que se ajuste al contenido de la caja*/
	margin-left:1%;
	background-color:#a31915;
}
 
div#cabecera img.conecta2{
	height:100%; /*Para que se ajuste al contenido de la caja*/
	background-color:#a31915;
}
 
div#cabecera a{
	float:right;
	text-decoration:none;
	line-height:60px; /*Para que quede centrado con respecto a la altura*/
	color:white;
	background-color:#a31915;
	padding-right:2%;
}
 
div#principal{
	position:absolute;
	left:0%;
	width:100%;
	height:650px;
	top:60px;
	background-color:#868685;
}
 
div#principal img.ordenadorIndex{
	position:absolute;
	width:80%;
	height:550px;
	left:10%;
	padding-top:15px;
}
 
div#formularioOrdenador{
	position:absolute;
	top:100px;
	left:46%;
	width:20%;
	background-color:white;
}


Muchísimas gracias de antemano, porque me estoy volviendo loco con eso..
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Problema con posicionamientos el CSS

Publicado por djzzz (2 intervenciones) el 03/01/2016 18:27:44
Rectifico, mi problema no es exactamente ese. Sino que teniendo en cuenta el Responsive Design, no dar unas medidas a las cajas en píxels y que aun así se acoplen tanto las cajas como todo su contenido (por ejemplo elementos de un formulario, que no tengo claro que se puedan minimizar y acoplarse) a la resolución pertinente. Hay alguna manera de hacer eso?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema con posicionamientos el CSS

Publicado por walter (47 intervenciones) el 26/01/2016 17:49:05
no entendí muy bien. pero si lo que deseas es que un contenedor cambie su tamaño primero que todo piensa en mediaqueries y te paso un ejemplo de ese contenedor en particular:
1
2
3
4
5
6
7
8
9
10
.micontenedor {
display: block;
	height: 550px;
	width: 100%;
	background-image: url(img/cualquierimagenunpocomasgrandequeelcontenedor.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: cover;
	overflow: hidden;

fijate que la img es mas grande porque en el ejemplo los divs tienen la propiedad knew en el siguiente link responsive:
http://sonidosdistantes.com.ar/tryp/
chequealo en chrome apretando F12 y eligiendo iphone, ipad.... etc
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar