| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home - HTMLWebScript - Formularios - Falso combo - 1 - 2 - 3 - 4 - 5
Falso combo (I)
por Luciano Moreno, del departamento de diseño web de BJSParaRed.
Introducción.-
En un trabajo reciente al cliente me pidió, para un formulario de registro, unos combos (listas de selección) cuya flechita fuera de un color determinado. Lamantablemente, y tras muchas pruebas con CSS, tuve que decirle que no era posible.
Pero luego me puse a pensar que sería una buena cosa tener un combo totalmente configurable, tanto en lo que se refiere a la flechita como a los bordes, fondos, textos, etc. Me puse a darle vueltas y al final decidí crear una simulación de combo, usando capas, CSS y DHTML.
La idea es construir con capas una caja con borde de color, que contenga en su interior un texto representativo de la opción por defecto de la lista y una imagen de la flecha en su lado derecho. A esto añadimos otra capa con bordes (en todos sus lados, menos en la parte superior), que contiene una tabla con el resto de opciones del combo.
Posicionamos las capas de tal forma que del la sensación de un combo desplegado, y damos unos estilos a las fuentes y a las capas tales que obtengamos el resultado visual deseado. Como Netscape Navigator 4x renderiza las fuentes con un tamaño inferior a Internet Explorer y Netscape 6x, creamos dos ficheros de estilos para los textos, redirigiendo al principo de la página mediante JavaScript a uno u otro dependiendo del navegador.
El código necesario para esto es el siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style
type="text/css">
#seleccion1{background-color:#4c4c4c;layer-background-color:#4c4c4c;position:relative;width:100px;height:16px;clip:rect(0,100,16,0);z-index:1;}
#fondocaja1{background-color:#FFFFFF;layer-background-color:#FFFFFF;width:98px;height:14px;clip:rect(0,98,14,0);position:absolute;left:1px;top:1px;z-index:5;}
#flecha1{background-color:#4c4c4c;layer-background-color:#4c4c4c;width:16px;height:14px;clip:rect(0,16,14,0);position:absolute;left:82px;top:1px;z-index:5;margin-left:1px;padding-left:1px;}
#falda1{background-color:#4c4c4c;layer-background-color:#4c4c4c;width:100px;height:70px;clip:rect(0,100,70,0);position:absolute;top:16px;left:0px;z-index:10;}
#fondofalda1{background-color:#FFFFFF;layer-background-color:#FFFFFF;width:98px;height:69px;clip:rect(0,98,69,0);position:absolute;top:0px;left:1px;z-index:10;padding-top:4px;}
</style>
<script language="JavaScript"
type="text/javascript">
if(document.layers)
{
document.write("<link rel='stylesheet' type='text/css'
href='css/estilos_nc.css'>");
}
else
{
document.write("<link
rel='stylesheet' type='text/css'
href='css/estilos.css'>");
}
</script>
</head>
<body>
<div
id="seleccion1">
<div id="fondocaja1"><span
class="lista">seleccione</span></div>
<div
id="flecha1"><img src="images/flecha.gif" width="15" height="14"
border="0"
alt="flecha"></div>
<div id="falda1">
<div
id="fondofalda1">
<table cellpadding="0"
cellspacing="0" border="0">
<tr>
<td
class="link">seleccione</td>
</tr>
<tr>
<td
class="link">uno</td>
</tr>
<tr>
<td
class="link">dos</td>
</tr>
<tr>
<td
class="link">tres</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Su resultado lo tenéis en esta ventana.
 |
Home - HTMLWebScript - Formularios - Falso combo - 1 - 2 - 3 - 4 - 5