Foros del Web » Creando para Internet » CSS »

Mostrar un a linea HR de 1px con Css

Estas en el tema de Mostrar un a linea HR de 1px con Css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/12/2008, 10:40
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Mostrar un a linea HR de 1px con Css

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
  #2 (permalink)  
Antiguo 29/12/2008, 12: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
Respuesta: Mostrar un a linea HR de 1px con Css

Pruébalo así:

Cita:
<style type="text/css">
.linea {
height:1px;
background-color:#000099;
overflow: hidden;
}
</style>
</head>
<body>
<div class="linea"></div>
</body>
</html>
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 29/12/2008, 12:42
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Mostrar un a linea HR de 1px con Css

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!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #4 (permalink)  
Antiguo 29/12/2008, 12:56
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
Respuesta: Mostrar un a linea HR de 1px con Css

Pero así no queda en 1 pixel, como en IE.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 29/12/2008, 13:12
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Mostrar un a linea HR de 1px con Css

Y esa línea, ¿qué finalidad tiene?
Pues estoy pensando en "border-X: 1px solid #xxx;"
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 29/12/2008, 13:19
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
Respuesta: Mostrar un a linea HR de 1px con Css

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á.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 29/12/2008, 13:47
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: Mostrar un a linea HR de 1px con Css

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.
__________________
oohh... quisiera ser godines!!!
  #8 (permalink)  
Antiguo 29/12/2008, 14:39
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Mostrar un a linea HR de 1px con Css

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
  #9 (permalink)  
Antiguo 29/12/2008, 16: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
Respuesta: Mostrar un a linea HR de 1px con Css

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.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 30/12/2008, 08:34
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Mostrar un a linea HR de 1px con Css

Gracias Mikmoro es lo ideal tu sugerencia, Muchas gracias
  #11 (permalink)  
Antiguo 01/01/2009, 12:06
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: Mostrar un a linea HR de 1px con Css

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
__________________
oohh... quisiera ser godines!!!
  #12 (permalink)  
Antiguo 01/01/2009, 17:36
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
Respuesta: Mostrar un a linea HR de 1px con Css

Cita:
Iniciado por safe Ver Mensaje
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 Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 05/01/2009, 14:24
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: Mostrar un a linea HR de 1px con Css

Cita:
Iniciado por Mikmoro Ver Mensaje
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 Ver Mensaje
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.
__________________
oohh... quisiera ser godines!!!
  #14 (permalink)  
Antiguo 06/01/2009, 00:51
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
Respuesta: Mostrar un a linea HR de 1px con Css

Cita:
Iniciado por safe Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
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




La zona horaria es GMT -6. Ahora son las 22:26.