CSS - css condicional por navegador y resolucion

   
Vista:

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:

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

css condicional por navegador y resolucion

Publicado por xve (351 intervenciones) el 17/09/2013 09:57:37
Hola Luis, he revisado tu código, y no puedes poner el fondo de pantalla en una tabla con un tamaño definido, ya que no se adaptara nunca a la pantalla del cliente.

Revisa este código:
http://www.lawebdelprogramador.com/codigo/CSS/2322-Mostrar_una_imagen_entera_como_fondo_del_navegador_con_CSS3.html
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

css condicional por navegador y resolucion

Publicado por Luis (2 intervenciones) el 17/09/2013 11:32:33
Hola.
Ya he conseguido que funcionase.
He borrado todo y vuelto a empezar desde cero y ahora ya funciona,
No se como lo he hecho, pero funciona.
Muchas gracias!!
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
Imágen de perfil de xve

css condicional por navegador y resolucion

Publicado por xve (351 intervenciones) el 17/09/2013 11:34:20
Hola Luis, nos puedes mostrar el código de como ha funcionado?
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
Imágen de perfil de poncho

css condicional por navegador y resolucion

Publicado por poncho (1 intervención) el 11/11/2013 04:01:41
Hola Luis.
podrias mandarme el codigo oprfavor...
Saludos.
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