Ver Mensaje Individual
  #13 (permalink)  
Antiguo 01/08/2008, 17:57
Avatar de Mikmoro
Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Pasar este ejemplo a CSS

El código completo con los retoques necesarios para IE:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Jamati</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
div.tabla {width:550px;font:12px Arial;position:relative;display: table;}
div.titulo, div.prueba, div.prueba2 {height:35px;display: table-cell;vertical-align: middle;border-bottom:1px solid #000;position: relative;}
div.titulo {width:250px;background:#DD0000;}
div.prueba {width:200px;background:#00CCCC;text-align: center;}
div.prueba2 {width:100px;background:#E5E5E5;text-align: right;}
span.tit, span.speech {display: block;}
div.tabla span.tit {font-weight:bold;padding-top: 2px;}
div.tabla span.des, div.tabla span.link {position: relative;top: -50%;}
div.tabla span.speech {padding-bottom: 4px;}
div.tabla span.link {text-align:right;}
</style>
<!--[if IE]><style>div.titulo, div.prueba, div.prueba2 {float: left;} .vertical {position: absolute;top: 50%;left: 0;width: 100%;} div.tabla span.speech {padding-bottom: 0px;}
</style><![endif]-->
</head>
<body>
<div class="tabla">
<div class="titulo">
<span class="tit">TITULO DE PRUEBA</span>
<span class="speech">Descripción de prueba</span>
</div>
<div class="prueba">
<div class="vertical">
<span class="des">Prueba 1</span>
</div>
</div>
<div class="prueba2">
<div class="vertical">
<span class="link">Prueba 2</span><br/>
<span class="link">Prueba 3</span>
</div>
</div>
</div>
</body>
</html>
__________________
Visita mi nueva web idplus.org