Ver Mensaje Individual
  #4 (permalink)  
Antiguo 27/02/2007, 17:01
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
Re: Subrayado especial...

Bueno, en principio lo que he hecho ha sido ofrecerte la pista de que no era un subrayado, sino un borde inferior.

Para lo que comentas habrá que usar un poco más de css, que imagino que es lo que están haciendo ellos. Mira este ejemplo:

Código:
<!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>Falso subrayado</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-15" />
  <style type="text/css">
  #caja { border-style: solid;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    }
  #caja img { margin: 30px 10px 10px;
    float: right;
    }
  #texto { float: left;
    height: 200px;
    margin-left: 10px;
    width: 320px;
    }
  .mw-headline { border-bottom: 1px solid rgb(153, 153, 153);
    display: block;
    }
  </style>
</head>
<body>
<div id="caja">
<div id="texto">
<h2><span class="mw-headline">Otros
eventos</span></h2>
</div>
<img style="width: 134px; height: 144px;" alt=""
 src="http://www.menoslobos.com/mikel/forosdelweb/periodicoR.jpg" /></div>
</body>
</html>
Puedes verlo aquí: http://www.menoslobos.com/mikel/foro...subrayado.html

Se consigue fácilmente lo que dices. Basta con que esa caja y su borde inferior no tengan posibilidad alguna de llegar hasta la foto, porque están confinados en otra caja a su vez.

Esto es para mi lo más cómodo para hacer con ello lo que quieras, pero este otro ejemplo es todavía más sencillo:

Código:
<!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>Falso subrayado</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-15" />
  <style type="text/css">
  #caja { border-style: solid;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    }
  #caja img { margin-right: 10px;
    margin-left: 10px;
    float: right;
    }
  .mw-headline { border-bottom: 1px solid rgb(153, 153, 153);
    float: left;
    display: block;
    width: 320px;
    margin-left: 10px;
    }
  </style>
</head>
<body>
<div id="caja">
<h2><span class="mw-headline">Otros
eventos</span></h2>
<img style="width: 134px; height: 144px;" alt=""
 src="http://www.menoslobos.com/mikel/forosdelweb/periodicoR.jpg" /></div>
</body>
</html>
Puedes verlo aquí: http://www.menoslobos.com/mikel/foro...ubrayado2.html

Mikel.