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:
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:
Muchísimas gracias de antemano, porque me estoy volviendo loco con eso..
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
0