Foros del Web » Creando para Internet » CSS »

Evitar salto de línea después de <h1> o <hr>

Estas en el tema de Evitar salto de línea después de <h1> o <hr> en el foro de CSS en Foros del Web. Hola a todos... Bueno, pues quería saber si se puede altrear el comportamiento de esas etiquetas mediantes CSS, para que cada vez que ponga por ...
  #1 (permalink)  
Antiguo 24/01/2007, 09:48
Avatar de 3pies
Colaborador
 
Fecha de Ingreso: diciembre-2003
Ubicación: Desde una destilería
Mensajes: 2.590
Antigüedad: 14 años
Puntos: 144
Evitar salto de línea después de <h1> o <hr>

Hola a todos...

Bueno, pues quería saber si se puede altrear el comportamiento de esas etiquetas mediantes CSS, para que cada vez que ponga por ejemplo <h1>bla, bla, bla</h1>, no me deje debajo una gran línea en blanco. Me gustaría que no hiciera ese salto de línea tan grande, y si es posible, que no haya ningún salto de línea. Lo mismo, para la etiqueta <hr>, aunque imagino, que si es posible para las <hx>, la misma técnica será de aplicación a <hr>.

Gracias miles!.
  #2 (permalink)  
Antiguo 24/01/2007, 10:19
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Evitar salto de línea después de <h1> o <hr>

Hola:

No sé si te servirá, pero con display: inline se convierte en un elemento "en línea"

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 24/01/2007, 10:33
Avatar de 3pies
Colaborador
 
Fecha de Ingreso: diciembre-2003
Ubicación: Desde una destilería
Mensajes: 2.590
Antigüedad: 14 años
Puntos: 144
Re: Evitar salto de línea después de <h1> o <hr>

Gracias caricatos. Eso me podría servir, porque funciona tanto en IE 7.0, como en FF 2.0, pero...

a) ¿Sabes si eso está soportado por las versiones anteriores de IE y FF?.

b) ¿Es posible que la etiqueta <hX> haga un salto de linea normal y corriente, al estilo <br>, sin necesidad de tener que meterla manualmente al final de cada párrafo?.

Muchas gracias!.
  #4 (permalink)  
Antiguo 24/01/2007, 10:43
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Evitar salto de línea después de <h1> o <hr>

Hola:

Sobre la compatibilidad no sé desde qué versiones, pero supongo que será en todas, ya que ese estilo es el que diferencia los elementos en bloque de los en línea (y no me refiero a la semántica sino a lo visual)... y si los conviertes en elementos inline, obligatoriamente deberías poner el salto de línea manual... pero si lo que quieres es que se disminuya solamente tal vez te interese más usar el estilo padding... por ejemplo h1 {padding: 0;}

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 24/01/2007, 11:02
Avatar de 3pies
Colaborador
 
Fecha de Ingreso: diciembre-2003
Ubicación: Desde una destilería
Mensajes: 2.590
Antigüedad: 14 años
Puntos: 144
Re: Evitar salto de línea después de <h1> o <hr>

Gracias caricatos.

¿Cuándo te refieres a disminuir, estás hablando de reducir la distancia entre el final del párrafo <hX> y el comiendo de la linea siguiente, verdad?. Con el padding a cero, me pega el mismo salto que sin él (tanto en IE como en FF).

Muchas gracias por tu ayuda.
  #6 (permalink)  
Antiguo 24/01/2007, 11:11
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Evitar salto de línea después de <h1> o <hr>

Hola:

padding son los márgenes interiores y margin los exteriores... si le das un color de fondo a tus tags podrás ver la diferencia... tal vez te interese más combinar ambos estilos.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 24/01/2007, 11:21
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: Evitar salto de línea después de <h1> o <hr>

Yo creo que con padding no se va a resolver. Más bien me parece que lo puedes controlar con line-height:

Con cosas como line-height: 0em; ó 1px, o lo que sea.

Mikel.
  #8 (permalink)  
Antiguo 24/01/2007, 11:27
Avatar de 3pies
Colaborador
 
Fecha de Ingreso: diciembre-2003
Ubicación: Desde una destilería
Mensajes: 2.590
Antigüedad: 14 años
Puntos: 144
Re: Evitar salto de línea después de <h1> o <hr>

Mmmmmm, con esto me pega el mismo salto que sin poner el padding:
Código:
<head>
<style>
h1{ font-family: Verdana, Arial, Helvetica; padding: 0;}
</style>
</head>
<body>
<h1>Primera línea</h1>
Segunda línea
</body>
Creo que hoy estoy muy espeso...
  #9 (permalink)  
Antiguo 24/01/2007, 11:48
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: Evitar salto de línea después de <h1> o <hr>

buenas, podrías usar un margin de 0 además del padding
__________________
...___...
  #10 (permalink)  
Antiguo 24/01/2007, 12:00
Avatar de 3pies
Colaborador
 
Fecha de Ingreso: diciembre-2003
Ubicación: Desde una destilería
Mensajes: 2.590
Antigüedad: 14 años
Puntos: 144
Re: Evitar salto de línea después de <h1> o <hr>

Muchas gracias A_Z, ...hacía tiempo que no te veía.

Ahora sí... Con el margen a cero el salto de línea es como un <br>.

Gracias a caricatos por el inline (desconocido para mí), y a Mikmoro por intentar meterle mano al tema.
  #11 (permalink)  
Antiguo 24/01/2007, 12:24
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: Evitar salto de línea después de <h1> o <hr>

Corregidme si me equivoco pero yo diría que si tiene display: inline;, el margin 0 le trae más bien sin cuidado. Es el display inline el que hace que el salto de línea se comporte como un simple br, y con line-heihgt controlas exactamente la altura y distancia que quieres que tenga: 0px, pues como un br, 4px ó 1.3em pues esa distancia de alto exactamente.

Vamos, es lo que creo.

Mikel.
  #12 (permalink)  
Antiguo 24/01/2007, 12:36
Avatar de 3pies
Colaborador
 
Fecha de Ingreso: diciembre-2003
Ubicación: Desde una destilería
Mensajes: 2.590
Antigüedad: 14 años
Puntos: 144
Re: Evitar salto de línea después de <h1> o <hr>

Pues no soy el más indicado en contestar, pero ya me ves aquí lanzao

Creo que no, Mikmoro. El inline evita el salto de línea propio de determinadas etiquetas (ul, hr, h1, h2, etc.), y el margin a cero (sin el inline), lo que hace es provocar un salto de línea convencional, al estilo de la etiqueta <br>.

Salu2
  #13 (permalink)  
Antiguo 24/01/2007, 12:56
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: Evitar salto de línea después de <h1> o <hr>

Yo no voy a corregir a nadie :), solo decir que si tiene el display inline los únicos márgenes que no tiene en cuenta son el superior e inferior mas si el izquierdo y derecho.

3pies, yo también hacía tiempo que no te veía (al igual que a Mikmoro, caricatos y al resto de la manada de este foro).
Exactamente hace 26 días ya que ayer volví de mis vacaciones ;)
__________________
...___...
  #14 (permalink)  
Antiguo 24/01/2007, 13:26
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: Evitar salto de línea después de <h1> o <hr>

A ver, que me estoy perdiendo un poco. He dicho:
"si tiene display: inline;, el margin 0 le trae más bien sin cuidado"

y es cierto, ¿no? Creo que como dice Al Zuwaga, en el margen superior e inferior, que es lo que nos ocupa.
display: inline + margin arriba-abajo=

Efectivamente, con display block o sin display el margin actuará sobre él.
display: block;+margin=

En todos los casos, line-height te dará la distancia que tú quieras.
display: block ó inline; + line-height =

Eso era lo que yo quería decir. Padding no resolvería si era para reducir la distancia del salto.

Ahora releyendo tu primer mensaje veo que lo que querías era que no hubiera ningún salto mayor que un simple br, no controlar la distancia. Creo que mirando las respuestas he olvidado cuál era la primera cuestión.

En ese caso, efectivamente block + margin era la mejor opción. Aclaro y me la envaino.

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




La zona horaria es GMT -6. Ahora son las 09:19.