Mostrar un a linea HR de 1px con Css

salvador86 · #1 (**permalink**) 29/12/2008, 10:40

Hola estoy deseando mostrar en mi página una línea muy delgada de 1px en mi página pero solo se ve Ok en Explorer pero en Firefox, Opera, y Nescape se ve gruesa.

Disculpen si pongo esta pregunta tal vez facil pero ya busque mucho en san google y no encontre lo que necesito, este es mi css

Cita:

hr {
height:1px;
background-color:#000099;
color:#000099;
border-collapse:collapse;
}

Muchas gracias

Mikmoro · #2 (**permalink**) 29/12/2008, 12:26

Pruébalo así:

Cita:

Aresillo · #3 (**permalink**) 29/12/2008, 12:42

Yo he pensado en que quitar el color al código y así se quedaba más finita...

Quedaría así:

Cita:

hr {
height:1px;
background-color:#000099;
}

Aresillo!!

Mikmoro · #4 (**permalink**) 29/12/2008, 12:56

Pero así no queda en 1 pixel, como en IE.

kseso? · #5 (**permalink**) 29/12/2008, 13:12

Y esa línea, ¿qué finalidad tiene?
Pues estoy pensando en "border-X: 1px solid #xxx;"

Mikmoro · #6 (**permalink**) 29/12/2008, 13:19

Dependiendo de cómo lo quiera hacer, suele ser una buena opción. La cuestión en general sería si hay un bloque tan grande como la propia línea, en cuyo caso con un borde a ese bloque es suficiente, pero si no lo hay, si el padding comprometería el diseño, etc., es preferible un div aparte.

Ya dirá.

safe · #7 (**permalink**) 29/12/2008, 13:47

Creo que lo mas adecuado seria lo siguiente:

Código:

<style type="text/css">
.linea {
height:1px;
background-color:#000099;
overflow: hidden;
}
.linea hr {display:none;}
</style>
</head>
<body>
<div class="linea"><hr /></div>
</body>
</html>

De esta manera se mantiene la funcion semantica del HR y se logra visualmente lo que quieres.

salvador86 · #8 (**permalink**) 29/12/2008, 14:39

La línea solo lo necesito por diseño, es que estoy pasando un sitio web que esta hecho en html sin hojas de estilo a uno basado en css. Me conviene la solución de Mikmoro, aunque no me gusta crear clases, pues me habría gustado que solo poniendo <hr /> se adapte al css y no colocar esto <div class="linea"></div> muchas gracias

Mikmoro · #9 (**permalink**) 29/12/2008, 16:01

safe: opino que esto no mantiene la función semántica de hr

Cita:

.linea hr {display:none;}
</style>
</head>
<body>
<div class="linea"><hr /></div>

entre otras cosas porque un hr dentro de una caja vacía no tiene ningún sentido semántico, a mi entender.

salvador86: pues lo dicho, dale margen inferior a la caja que le preceda, superior a la que le suceda, a un elemento que ya tengas en el HTML, etcétera.

salvador86 · #10 (**permalink**) 30/12/2008, 08:34

Gracias Mikmoro es lo ideal tu sugerencia, Muchas gracias

safe · #11 (**permalink**) 01/01/2009, 12:06

Cita:

Iniciado por Mikmoro

safe: opino que esto no mantiene la función semántica de hr

entre otras cosas porque un hr dentro de una caja vacía no tiene ningún sentido semántico, a mi entender.

Esta mas que claro que lo semanticamente correcto seria solo poner el HR. Pero lamentablemente en IE 6 a los HR no se le pueden aplicar/sobreescribir todos los estilos que uno quisiera, por lo que si alguien quiere tener un HR en su codigo HTML pero que se vea de una forma diferente lamentablemente tiene que rodearlo de una etiqueta que si se pueda modificar. Y un div es un elemento contenedor y si tiene un HR adentro no esta vacio. Por lo que cumple su funcion de contenedor y tiene mas sentido semantico que un div realmente vacio como en la primer propuesta.

Mikmoro · #12 (**permalink**) 01/01/2009, 17:36

Cita:

Iniciado por safe

Y un div es un elemento contenedor y si tiene un HR adentro no esta vacio.

Hombre, evidentemente, mi frase significa "vacío excepto por el hr". Creía que era evidente.

Cita:

Iniciado por safe

Por lo que cumple su funcion de contenedor y tiene mas sentido semantico que un div realmente vacio como en la primer propuesta.

Supongo que será una cuestión de opinión. Muchas muchas cajas decorativas son divs vacíos. Semánticamente un div vacío para mostrar una línea horizontal frente a un div con un hr ocultado (.linea hr {display:none;}), para mostrar una línea horizontal, yo al menos lo tengo claro.
A mi parecer nada indica que para mostrar una línea horizontal sea imprescindible usar un "hr", ni que éste sea extraordinariamente semántico a la hora de analizar un código HTML. Pero como digo, elegir entre un div vacío o un div con un hr ocultado es una cuestión de opinión.

safe · #13 (**permalink**) 05/01/2009, 14:24

Cita:

Iniciado por Mikmoro

Muchas muchas cajas decorativas son divs vacíos

Y tambien hay muchas webs maquetadas con tablas, pero eso no lo convierte en algo correcto.

Cita:

Iniciado por Mikmoro

nada indica que para mostrar una línea horizontal sea imprescindible usar un "hr"

Estamos de acuerdo. Tampoco nada indica que se tenga que usar un div vacio.
Si esa linea va a estar solo por cuestiones "esteticas" deberia dibujarse con los elementos que ya se encuentran en el documento yque si son necesarios. Pero si esa linea se utiliza para separar una seccion de la web, un HR si seria, en mi opinion, la opcion mas adecuada.

Mikmoro · #14 (**permalink**) 06/01/2009, 00:51

Cita:

Iniciado por safe

Pero si esa linea se utiliza para separar una seccion de la web, un HR si seria, en mi opinion, la opcion mas adecuada.

Sí, claro, pero no tratamos eso, sino si es mejor, para dar el grosor deseado, un div vacío o un div con un HR oculto dentro.
Un HR tendrá sentido semántico en su sitio, donde le corresponda del flujo del documento, pero dentro de un div sin ningún otro contenido, no creo que sea más semántico que el propio div vacío, además del engaño semántico de ponerlo y ocultarlo mediante CSS. Es mi opinión.