Foros del Web » Creando para Internet » CSS »

PopUp resistentes

Estas en el tema de PopUp resistentes en el foro de CSS en Foros del Web. Hola a todos/todas: Tengo en mi proyecto varias ventanas tipo Popup que se lanzan con Javascript. Funcionan. Sin embargo, a la hora de aplicar estilo ...
  #1 (permalink)  
Antiguo 23/03/2011, 11:36
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
PopUp resistentes

Hola a todos/todas:

Tengo en mi proyecto varias ventanas tipo Popup que se lanzan con Javascript. Funcionan. Sin embargo, a la hora de aplicar estilo CSS tengo que aplicarlo página a página, no como en el resto del proyecto en que la página de estilo común es llamada mediante un include de php.

¿Como podría hacerlo? lo del include o similar para tener todos los estilos del proyecto referenciados a una única página de estilos.

Aquí una página de muestra por si sirve de orientación

Código:
<?php session_start();
//Compruebo errores
error_reporting(E_ALL & ~E_NOTICE); 
ini_set("display_errors", 1); 

?><html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

	<?php        

	//Detectammos el idioma del explorador

	   $Lengua = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'],0,2);

	//Detectamos la pagina en que estamos y convertimos a minúsculas para evitar problemas al teclear la página sin saber

       	   $site = $_SERVER['PHP_SELF']; 
		   $pagina = strtolower($site);

	?>

<head>

   <meta http-equiv="Content-Type"content=" text/html;charset=utf-8">

 <!--Aquí se indica donde está la hoja de estilos CSS -->

 <?php

	include('../phpBits/estilo_css.php');

		?>

   <!--Aquí se indican los estilos CSS particulares de esta hoja CSS -->

   <style type="text/css">
	body {color: purple; background-color: #d8da3d }
	#popup {background:#e9e9e9;z-index:5;color: #ffffff;left:auto;padding: 10px;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;}
	#popup table{background:#e9e9e9;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color: DarkRed,border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px; }
	#popup a:link { text-decoration: none;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:FireBrick}
	#popup a:visited { text-decoration: none;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:FireBrick}
	#popup a:hover { background: #e9e9e9; color: blue }
	
   </style>

  
</head >

<body>

<div id="popup">

	<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
		<tr>
		<form name="form1" method="post" action="checklogin.php">	
			<td>
			<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
				<tr>
					<td colspan="3"><center><strong>Acceso</strong></center></td>
				</tr>
				
				<tr>
					<td width="78">Usuario</td>
					<td width="6">:</td>
					<td width="294"><input name="usuario" type="text" id="usuario"></td>
				</tr>

				<tr>
					<td>Clave</td>
					<td>:</td>
					<td><input name="clave" type="password" id="clave"></td>
				</tr>
				
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td><input type="submit" name="Submit" value="Login"></td>
				</tr>
			
			<tr>
				<a href="#" onclick="getUsuario()">Si has olvidado tu clave pincha aquí</a>
				
				<script language=javascript> 
				self.close()";
				</script>
				
				<script language=javascript> 
				function getUsuario()
				{var usuario;usuario = document.form1.usuario.value; 
				window.location="../login/RescateClave.php?usuario="+usuario;  }
				</script>
			
			</tr>
		</tr>
	</table>
</form>
</div>
</body>
</html>
Muchas gracias por la ayuda
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)
  #2 (permalink)  
Antiguo 24/03/2011, 09:28
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Respuesta: PopUp resistentes

y por que no la incluyes desde un archivo CSS externo:

Código HTML:
Ver original
  1. <link rel="stylesheet" href="CSS/stilo.css" type="text/css" media="screen" />
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #3 (permalink)  
Antiguo 24/03/2011, 11:05
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: PopUp resistentes

Hola Laratik:

¿Puedes ampliarme la indicación (muchas gracias)?
Por ejemplo ¿donde debo poner ese código?

Gracias de nuevo,
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)
  #4 (permalink)  
Antiguo 24/03/2011, 14:18
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Respuesta: PopUp resistentes

pasas todo lo que esta dentro de etiquetas style a un nuevo archivo con extención css:
Código CSS:
Ver original
  1. <style type="text/css">
  2.     body {color: purple; background-color: #d8da3d }
  3.     #popup {background:#e9e9e9;z-index:5;color: #ffffff;left:auto;padding: 10px;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;}
  4.     #popup table{background:#e9e9e9;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color: DarkRed,border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px; }
  5.     #popup a:link { text-decoration: none;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:FireBrick}
  6.     #popup a:visited { text-decoration: none;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:FireBrick}
  7.     #popup a:hover { background: #e9e9e9; color: blue }
  8.    
  9.    </style>

Recuerda quitar las etiquetas style, luego le das un nombre al archivo, en mi ejemplo se llama stilo.css. justo donde se encontraban las etiquetas style, colocas el enlace al nuevo archivo CSS, es decir en el head:

Código HTML:
Ver original
  1. <link rel="stylesheet" href="CSS/stilo.css" type="text/css" media="screen" />

Recuerda colocar la ruta relativa completa al archivo que acabas de crear, eso seria todo lo que se debe hacer, de esta manera solo enlazas el archivo a cada una de las paginas que lo necesiten y ya.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #5 (permalink)  
Antiguo 25/03/2011, 01:13
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: PopUp resistentes

Hola de nuevo:

Acabo de probar lo que dices y no me funciona. El problema es que ya tengo hecha una referencia externa para la hoja de estilos en todas las páginas de mi proyecto.

Código:
<head>

   <title><?php include('phpBits/GoogleBot_TIT.php'); ?></title>

   <meta name="description=" content="<?php include('phpBits/GoogleBot_MET.php'); ?>">

   <meta http-equiv="Content-Type"content=" text/html;charset=utf-8">

 <!--Aquí se indica donde está la hoja de estilos CSS -->

		<?php

			include('phpBits/estilo_css.php');

		?>

   <!--Aquí se indican los estilos CSS particulares de esta hoja CSS -->

   <style></style>

  
</head >
de manera que carga los estilos de todo el site, pero además el include comprueba el navegador y carga una hoja de estilo diferente en función del navegador que utilice.

Código PHP:
<?php

    $navegador 
$_SERVER['HTTP_USER_AGENT'];

    switch(
$navegador) {
    
        case 
"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)"
          
//MS Internet Explorer7.0
     
            
echo '<link type="text/css" rel="stylesheet" href="Estilos/hoja_estilosIE7.css">';
        break;

        case 
"Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)"
          
//MS Internet Explorer9.0
     
            
echo '<link type="text/css" rel="stylesheet" href="Estilos/hoja_estilos.css">';
        break;

        case 
"Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/7.0.517.44 Safari/534.7"
          
//Google Chrome
     
            
echo '<link type="text/css" rel="stylesheet" href="Estilos/hoja_estilosChR.css">';
        break;

        case 
"Opera/9.80 (Windows NT 6.1; U; es-LA) Presto/2.6.30 Version/11.01":
          
//Opera 
     
            
echo '<link type="text/css" rel="stylesheet" href="Estilos/hoja_estilosOP.css">';
        break;

        default: 
     
         echo 
'<link type="text/css" rel="stylesheet" href="Estilos/hoja_estilos.css">';
        break;
        
}
        
?>
Así puedo controlar la coherencia del aspecto del site entre los diferentes navegadores (No sé si es la mejor solución pero es la que se me ocurrió).

Cita:
Sin embargo, a la hora de aplicar estilo CSS tengo que aplicarlo página a página, no como en el resto del proyecto en que la página de estilo común es llamada mediante un include de php.
Sigo investigando al borde de la sicosis, muchas gracias de todos modos
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)
  #6 (permalink)  
Antiguo 25/03/2011, 10:01
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Respuesta: PopUp resistentes

Tal vez esto te ayude, quizá no fui lo suficientemente claro. SALUDOS.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.

Etiquetas: popup
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:37.