css condicional por navegador y resolucion
Publicado por Luis (2 intervenciones) el 17/09/2013 07:53:29
Buenos días.
Tengo el siguiente problema:
Tengo que programar un popup de 700x600 pixeles, que unicamente lleva:
- Una imagen de fondo
- Un formulario "por encima"
Y que se vea bien en cualquier navegador y en cualquier resolucion de pantalla.
En principio solo lo tengo hecho para IE y Firefox. Pero no consigo que actue como yo lo necesito, es decir que se vea bien en cualquier navegador y en cualquier resolucion.
El codigo html del popup es este:
Y los CSS que uso para los navegadores y que estan condicionados al principio son estos:
- Este para Internet Explorer: ( estilos_ie.css )
Y este para firefox y los demas ( estilos.css ):
Y este es el fondo que uso para el popup y donde va el formulario en la caja blanca...
[/img]
Por favor, necesito ayuda para terminar esto y hacerlo funcionar. Es importante porque forma parte de un trabajo que tengo que entregar.
Necesito ayuda.
Seguramente sea una tonteria o le faltará muy poco, pero alquien me puede ayudar con ello??
Se lo agradecería.
Que tengo que hacer? cambiar? incorporar?
Muchas gracias!
Tengo el siguiente problema:
Tengo que programar un popup de 700x600 pixeles, que unicamente lleva:
- Una imagen de fondo
- Un formulario "por encima"
Y que se vea bien en cualquier navegador y en cualquier resolucion de pantalla.
En principio solo lo tengo hecho para IE y Firefox. Pero no consigo que actue como yo lo necesito, es decir que se vea bien en cualquier navegador y en cualquier resolucion.
El codigo html del popup es este:
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
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="" />
<meta name="keywords" content="" />
<title>prueba</title>
<!--[if IE]><!--><link rel="stylesheet" type="text/css" href="estilos_ie.css" />
<!--<![endif]--><!--[if !IE]><!--><link rel="STYLESHEET" type="text/css" href="estilos.css" />
<!--<![endif]--><script language="javascript" type="text/javascript">
window.resizeTo(730,770)
</script>
</head>
<body>
<div id="contenedor">
<table class="centrada" background="bannerweb5.jpg" width="700" height="600">
<tr>
<td class="centrado">
<div id="cajablanca">
<form action="valida_correo.php" method="post">
<P class="linea"><H1><strong><i>Introduce tu correo electrónico</i></strong></H1></p>
<input type="text" name="correo" width="100" />
<br /><br />
<input type="submit" value="Suscripción">
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Y los CSS que uso para los navegadores y que estan condicionados al principio son estos:
- Este para Internet Explorer: ( estilos_ie.css )
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
67
<style type="text/css">
body {width:100%;
margin: auto;background-color:#FFFFFF;
font-family : arial,helvetica;
}@media screen and (max-width: 1280px)
{ body { width:auto; margin: auto; } }img {border:none;}H1 {font-size : 16pt;
font-family : verdana,arial;
font-weight : normal;
}p.linea {font-family : arial,helvetica;
line-height:1.5em;
}table.centrada{
margin: auto;margin-left: auto;
margin-right: auto;
}td.centrado {
display: block;text-align: center;
margin-left: auto;
margin-right: auto;
}#contenedor
{ width:700px; height:600px; overflow: hidden; }#cajablanca
{ width:422px;top:75%;
left:22%;
float:left; }</style>
Y este para firefox y los demas ( estilos.css ):
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
67
68
<style type="text/css">
body {width:100%;
margin: auto;background-color:#FFFFFF;
font-family : arial,helvetica;
}@media screen and (max-width: 1280px)
{ body { width:auto; margin: auto; } }img {border:none;}H1 {font-size : 16pt;
font-family : verdana,arial;
font-weight : normal;
}p.linea {font-family : arial,helvetica;
line-height:1.5em;
}table.centrada{
margin: auto;margin-left: auto;
margin-right: auto;
}td.centrado {
display: block;text-align: center;
margin-left: auto;
margin-right: auto;
}#contenedor
{ width:700px; height:600px; overflow: hidden; }#cajablanca
{ width:422px;top:53%;
left:10%;
float:left; }</style>
Y este es el fondo que uso para el popup y donde va el formulario en la caja blanca...
[/img]
Por favor, necesito ayuda para terminar esto y hacerlo funcionar. Es importante porque forma parte de un trabajo que tengo que entregar.
Necesito ayuda.
Seguramente sea una tonteria o le faltará muy poco, pero alquien me puede ayudar con ello??
Se lo agradecería.
Que tengo que hacer? cambiar? incorporar?
Muchas gracias!
Valora esta pregunta
0
