Foros del Web » Creando para Internet » CSS »

h2 con imagen

Estas en el tema de h2 con imagen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/03/2007, 12:16
Avatar de yournightmare86  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 875
Antigüedad: 11 años, 7 meses
Puntos: 9
h2 con imagen

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.
  #2 (permalink)  
Antiguo 01/03/2007, 12:27
Avatar de Carlos Santany  
Fecha de Ingreso: marzo-2007
Ubicación: Colima, Mex.
Mensajes: 31
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: h2 con imagen

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.
  #3 (permalink)  
Antiguo 01/03/2007, 12:35
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: h2 con imagen

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,
  #4 (permalink)  
Antiguo 01/03/2007, 12:58
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: h2 con imagen

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

Mikel.
  #5 (permalink)  
Antiguo 01/03/2007, 13:00
Avatar de Carlos Santany  
Fecha de Ingreso: marzo-2007
Ubicación: Colima, Mex.
Mensajes: 31
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: h2 con imagen

Cita:
Iniciado por JavierB Ver Mensaje
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.
  #6 (permalink)  
Antiguo 01/03/2007, 13:01
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: h2 con imagen

Cita:
Iniciado por Mikmoro Ver Mensaje
Hey, tu mensaje 13.000. ¡¡¡Qué caña!!!

Mikel.
<offtopic>
Has debido de contal mal, es el 13.002
</offtopic>
  #7 (permalink)  
Antiguo 01/03/2007, 13:07
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: h2 con imagen

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.
  #8 (permalink)  
Antiguo 01/03/2007, 15:45
Avatar de yournightmare86  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 875
Antigüedad: 11 años, 7 meses
Puntos: 9
Re: h2 con imagen

Muchas gracias por sus respuestas. ¡Muy buenos aportes! Ahora mismo voy a ello. Gracias y saludos.
  #9 (permalink)  
Antiguo 02/03/2007, 12:23
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: h2 con imagen

Cita:
Iniciado por Mikmoro Ver Mensaje
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
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




La zona horaria es GMT -6. Ahora son las 06:33.