Foros del Web » Creando para Internet » CSS »

Subrayado especial...

Estas en el tema de Subrayado especial... en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/02/2007, 09:32
 
Fecha de Ingreso: octubre-2004
Mensajes: 741
Antigüedad: 13 años, 1 mes
Puntos: 3
Subrayado especial...

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.-
  #2 (permalink)  
Antiguo 27/02/2007, 10:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Subrayado especial...

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.
  #3 (permalink)  
Antiguo 27/02/2007, 16:13
 
Fecha de Ingreso: octubre-2004
Mensajes: 741
Antigüedad: 13 años, 1 mes
Puntos: 3
Re: Subrayado especial...

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.-
  #4 (permalink)  
Antiguo 27/02/2007, 17:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #5 (permalink)  
Antiguo 27/02/2007, 17:35
 
Fecha de Ingreso: octubre-2004
Mensajes: 741
Antigüedad: 13 años, 1 mes
Puntos: 3
Re: Subrayado especial...

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.-
  #6 (permalink)  
Antiguo 27/02/2007, 17:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Subrayado especial...

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.
  #7 (permalink)  
Antiguo 27/02/2007, 18:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Subrayado especial...

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.
  #8 (permalink)  
Antiguo 27/02/2007, 22:40
 
Fecha de Ingreso: octubre-2004
Mensajes: 741
Antigüedad: 13 años, 1 mes
Puntos: 3
Re: Subrayado especial...

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.-
  #9 (permalink)  
Antiguo 28/02/2007, 01:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Subrayado especial...

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.
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

SíEste tema le ha gustado a 1 personas (incluyéndote)




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