h2 con imagen

yournightmare86 · #1 (**permalink**) 01/03/2007, 12:16

Hola a todos los foreros, mi duda es la siguiente, mis conocimientos de CSS aún son limitados pero de momento me defiendo

¿Puedo hacer que todos los h2 me aparezcan con una imagen al lado? Sería algo en plan no muy grande, un icono pequeñito.
Muchas gracias por su atención. Saludos.

Carlos Santany · #2 (**permalink**) 01/03/2007, 12:27

Si quieres hacer que te aparescan imagenes a lado tendrias que usar listas desordenadas y otorgarle una propiedad list-style.

Código HTML:

<style>
#menu ul {
list-style: url('img/lista.jpg');
}
</style>

<body>
<div id="menu">
  <ul>
    <li><h2>Enlace 1</h2></li>
  </ul>
</div>
</body>

Solo editas tu imagen, a un tamaño no mayor a 20x20 y listo, tambien puedes meterle otro estilo a las etiquetas H2, pero pues eso ya seria a tu gusto, espero haber sido de ayuda.

JavierB · #3 (**permalink**) 01/03/2007, 12:35

Hola yournightmare86

Puedes usar esto:

Código:

h2:before {content: url(imagen.jpg)}

Si cambias before por after, la imágen te saldrá después del texto.

Pero hay un navegador (sí, ese que todos estamos pensando) que no lo acepta.

Saludos,

Mikmoro · #4 (**permalink**) 01/03/2007, 12:58

Hey, tu mensaje 13.000. ¡¡¡Qué caña!!!

Mikel.

Carlos Santany · #5 (**permalink**) 01/03/2007, 13:00

Cita:

Iniciado por JavierB

Hola yournightmare86

Puedes usar esto:

Código:

h2:before {content: url(imagen.jpg)}

Si cambias before por after, la imágen te saldrá después del texto.

Pero hay un navegador (sí, ese que todos estamos pensando) que no lo acepta.

Saludos,

Buen aporte, no conocia esas propiedades de CSS, gracias JavierB.

JavierB · #6 (**permalink**) 01/03/2007, 13:01

Cita:

Iniciado por Mikmoro

Hey, tu mensaje 13.000. ¡¡¡Qué caña!!!

Mikel.

<offtopic>
Has debido de contal mal, es el 13.002

</offtopic>

Mikmoro · #7 (**permalink**) 01/03/2007, 13:07

Podrías probar con este código, pero antes te explico:

puedes poner tu imagen como fondo de la clase h2, y luego al texto darle un indentado (sangrado) de 30px por ejemplo, de esa manera siempre se verá en cualquier elemento h2 que pongas y tu texto será empujado para dejarlo ver:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Grafico en h2</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
body { margin-top: 20px;
margin-left: 20px;
}
h2 { background-image: url(http://www.menoslobos.com/mikel/forosdelweb/editar.gif);
background-repeat: no-repeat;
text-indent: 30px;
}
  </style>
</head>
<body>
<h2>Un texto con el h2</h2>
<h2>Otro texto</h2>
<h2>Y otro m&aacute;s</h2>
</body>
</html>

Puedes verlo aquí:

http://www.menoslobos.com/mikel/foro...ico_en_h2.html

Mikel.

yournightmare86 · #8 (**permalink**) 01/03/2007, 15:45

Muchas gracias por sus respuestas. ¡Muy buenos aportes! Ahora mismo voy a ello. Gracias y saludos.

kahlito · #9 (**permalink**) 02/03/2007, 12:23

Cita:

Iniciado por Mikmoro

Podrías probar con este código, pero antes te explico:

puedes poner tu imagen como fondo de la clase h2, y luego al texto darle un indentado (sangrado) de 30px por ejemplo, de esa manera siempre se verá en cualquier elemento h2 que pongas y tu texto será empujado para dejarlo ver:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Grafico en h2</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
body { margin-top: 20px;
margin-left: 20px;
}
h2 { background-image: url(http://www.menoslobos.com/mikel/forosdelweb/editar.gif);
background-repeat: no-repeat;
text-indent: 30px;
}
  </style>
</head>
<body>
<h2>Un texto con el h2</h2>
<h2>Otro texto</h2>
<h2>Y otro m&aacute;s</h2>
</body>
</html>

Puedes verlo aquí:

http://www.menoslobos.com/mikel/foro...ico_en_h2.html

Mikel.

Muy bueno, la propiedad text-indent la tenia en el olvido. También se puede hacer con margin o padding