Subrayado especial...

paulkees · #1 (**permalink**) 27/02/2007, 09:32

Hola a todos...
Alguien sabe como hace los surayados de los títulos y subtitulos Wikipedia?
Por ejemplo en esta página:
Subrayado en títulos de Wikipedia
Ustedes veran que el titulo "Portada" se extiende más allá del propio texto, y también verán en el título "Del consejo de Administración" donde el subrayado se extiende y no corta la sección o imagen que tiene al costado.
Ellos usan una "class='mw-headline' pero no encuentro la información.
Alguien tiene idea de esto?
Gracias y saludos.-

Mikmoro · #2 (**permalink**) 27/02/2007, 10:31

Hola, paulkees.
Eso probablemente no es un subrayado, sino un borde inferior. Si te fijas, dentro de un h2 ha metido un span, que es el que tiene ese borde.

Prueba a insertar este código y verás a qué me refiero:

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">
  .mw-headline { border-bottom: 1px solid rgb(153, 153, 153);
    display: block;
    }
  </style>
</head>
<body>
<h2><span class="mw-headline">Otros eventos</span></h2>
</body>
</html>

Mikel.

paulkees · #3 (**permalink**) 27/02/2007, 16:13

Hola Mikmoro...
Gracias por la respuesta, lo que pasa es que, si tenés una imagen a la derecha o a la izquierda de ese título, con tu ejemplo, ese borde inferior atraviesa toda la imagen, no la respeta!!!
Y eso es lo que logran en Wikipedia, que no atraviese la imagen o cuadro que se encuentre a su lado.
No se si me explico?
Saludos.-

Mikmoro · #4 (**permalink**) 27/02/2007, 17:01

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.

paulkees · #5 (**permalink**) 27/02/2007, 17:35

Gracias Mikmoro...
Realmente muchas gracias por todo los ejemplos prácticos.
Por ahora lo solucioné agregando a tu primer ejemplo, margin-left ó right, segun corresponda y poniendole el tamaño de la imagen o del cuadro que tiene al costado.
Pero lo que me intrigaba, era saber como lo hacia Wikipedia, por que ellos solo agregan <span class=mw-headline>, además esa class no la tienen declarada en la hoja de estilos.
Bueno, por ahora habrá que quedarse con eso.
Saludos y nuevamente gracias.-

Mikmoro · #6 (**permalink**) 27/02/2007, 17:54

Bueno, pues ya por curiosidad, ¿dónde hay en wikipedia un ejemplo de lo que dices? No veo ninguno en tu enlace. Indícame por favor dónde hay uno para que lo vea y me haga idea de qué están haciendo.

Mikel.

Mikmoro · #7 (**permalink**) 27/02/2007, 18:32

Mira lo que dice en un selector de su css:

table {
font-size: 100%;
color: black;
/* we don't want the bottom borders of <h2>s to be visible through
floated tables */
background-color: white;
}

y luego aparece:

h1, h2, h3, h4, h5, h6 {
color: black;
background: none;
font-weight: normal;
margin: 0;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}

De manera que la forma en que lo hacen es esta, que viene a ser casi lo mismo:

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 2</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: 10px;
float: right;
}
h2 { 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="la_clase_que_tu_quieras">Otros
eventos</span></h2>
<img style="width: 134px; height: 144px;" alt=""
 src="http://www.menoslobos.com/mikel/forosdelweb/periodicoR.jpg" /></div>
</body>
</html>

Mikel.

paulkees · #8 (**permalink**) 27/02/2007, 22:40

Ejemplo:
Fijate por favor en esta pagina de Wikipedia en el titulo: "Existencia en el tiempo":
Existencia en el tiempo
Ahí ves que el borde inferior del título no llega a la imagen. Eso es lo que yo decía. Voy a seguir aclarándome con todos tus ejemplos.
Saludos.-

Mikmoro · #9 (**permalink**) 28/02/2007, 01:40

Sí, ahora veo el ejemplo, y es exactamente lo que te he puesto en el último mensaje. Si algo no lo ves claro lo comentas.

Un saludo.

Mikel.