Foros del Web » Creando para Internet » CSS »

establecer height en un div

Estas en el tema de establecer height en un div en el foro de CSS en Foros del Web. Hola a [email protected] Intento poner un div de una página que estoy maquetando a 7px de alto. para esto en css he puesto como atributo: ...
  #1 (permalink)  
Antiguo 29/05/2006, 06:01
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 14 años, 5 meses
Puntos: 0
establecer height en un div

Hola a [email protected]

Intento poner un div de una página que estoy maquetando a 7px de alto.
para esto en css he puesto como atributo:
Código:
height: 7px;
El div no me coje esa altura, permanece en la altura por defecto. Alguien me puede ayudar?
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
  #2 (permalink)  
Antiguo 29/05/2006, 07:16
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
el div contiene algo? en que explorador? te aviso que a IE no le importa la altura que le pongas, siempre se expande hasta contener lo que esta adentro
__________________
Internet Explorer SuckS
Download FireFox
  #3 (permalink)  
Antiguo 29/05/2006, 07:58
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 14 años, 5 meses
Puntos: 0
No va a contener nada, solo va a tener un color de fondo.

Quiero crear una linea de color naranja, de 640px de largo y 7px de alto.

Tiene que verse bien en explores y firefox.
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
  #4 (permalink)  
Antiguo 29/05/2006, 08:00
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Por lo que he observado IE muestra una altura mínima de unos 50px o algo así

Igual, si quieres una línea ¿por qué no usas un separador horizontal, que para eso está?

<hr />
  #5 (permalink)  
Antiguo 29/05/2006, 08:03
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 14 años, 5 meses
Puntos: 0
tunail, porque necesito crear una linea de tono específico de color de fondo (naranja) y una altura especifica. eso con <hr /> no se puede.
y repeito que sea compatible con explores y firefox.
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
  #6 (permalink)  
Antiguo 29/05/2006, 08:28
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 14 años, 5 meses
Puntos: 0
lo he solucionado insertando una imagen transparente, el codigo se queda a si:

CODIGO HTML:
Código:
<div class="linearoja"><img src="img/s.gif" alt="blank" height="7" width="2" /></div>
CODIGO CSS:

Código:
.linearoja{
	position: absolute;
	top: 20px;
	left: 0px;
	width: 673px;
	height: 7px;	
	background-color: #ff6c19;	
}
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
  #7 (permalink)  
Antiguo 29/05/2006, 08:39
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Cita:
Iniciado por capagris
tunail, porque necesito crear una linea de tono específico de color de fondo (naranja) y una altura especifica. eso con <hr /> no se puede.
y repeito que sea compatible con explores y firefox.
¿Y de dónde sacas que eso no se puede hacer con un hr?

Esto funciona perfectamente

Código:
<style type="text/css">
#linea{
	color: #ff6c19;
	width: 673px;
	height: 7px;
	background-color: #ff6c19;
	border: 0
}
</style>
<hr id="linea" />
  #8 (permalink)  
Antiguo 29/05/2006, 08:46
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
Hola:

Sobre la altura de la capa, sencillamente al ser un elemento de bloque se mete un espacio como si hubiese un tag br... para asegurarte de que tenga la altura específica, hay que poner overflow: hidden (tuve un problema similar en una librería gráfica)...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 29/05/2006, 09:45
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 14 años, 5 meses
Puntos: 0
muchas gracias a los dos.

tunait

es mucho mejor hacerlo con un div que con un hr por temas de usabilidad.

gracias por tu ayuda.
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
  #10 (permalink)  
Antiguo 29/05/2006, 11:32
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Cita:
Iniciado por capagris
es mucho mejor hacerlo con un div que con un hr por temas de usabilidad.
No veo en qué mejora la usabilidad el usar un div en lugar de un hr para mostrar una línea horizontal

Cita:
gracias por tu ayuda
No hay de qué
  #11 (permalink)  
Antiguo 29/05/2006, 18:01
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
Perdona, capagris, pero por temas de usabilidad, te recomendaría que usases precisamente lo que te comenta tunait. Ya que es esa la utilidad principal de los css; poder modificar los parametros ya existentes. De hecho, si te fijas, los css-puristas intentan poner el menos número de divs, de ids y de class posibles y dejar todo a los estilos predefinidos ya h1, h2, hr, p, br, strong...

Un saludo.
__________________
.-. GeL/T0 .-. Quieres saber mas de mi? lee mi blog: http://g05l21.net
  #12 (permalink)  
Antiguo 30/05/2006, 07:29
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
si pero el idiota del explorer te pone margen en un hr aunque le pongas margin:0. la solucion es usar margenes negativos...
__________________
Internet Explorer SuckS
Download FireFox
  #13 (permalink)  
Antiguo 30/05/2006, 07:54
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
Jaja. Pues tienes razón, mira que se puede ser cutre!!!

Pero más cutre es ponerle un display:inline (que por cierto, el efecto en firefox es muy curioso ; ) y que no lo reconozca... En fin...

Como siempre trabajando para Firefox (Opera, Safari... vamos toos en uno) y para E$ploter (se cansarán algún día de ir a su puta bola y hacernos la vida imposible¿¿??)
__________________
.-. GeL/T0 .-. Quieres saber mas de mi? lee mi blog: http://g05l21.net
  #14 (permalink)  
Antiguo 30/05/2006, 07:59
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 13 años, 9 meses
Puntos: 4
No creo que IE te ponga a la fuerza atributos que vos no quieras que tenga el elemento. Lo que sucede es que cada elemento o tag tiene una serie de valores por defecto; y es justamente esto lo que los termina diferenciando entre cada uno de ellos.

Por ejemplo, uno podria utilizar el tag de negrita <b> como si fuese un parrafaso si se quisiera.

Si lo que necesitas es crear una linea de tono específico de color de fondo (naranja) y una altura especifica deberias usar <hr />; ya sea para todo el documento o para una clase especial con .clase hr {}. No olvides magin, padding, border y heigth cuando trabajas con hr.

Saludos.
__________________
| Cabeza De Raton |
  #15 (permalink)  
Antiguo 30/05/2006, 17:08
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
Calisco, prueba a poner "una linea de tono específico de color de fondo (naranja) y una altura especifica" con <hr /> y mira los efectos en navegadores que cumplen los estandar web de la w3c (no hablemos de Firefox, hablemos de Amaya, por ejemplo. Que es el navegador de la w3c)
Después mira los efectos en el E$ploter. Si has trabajado con CSS, sabrás lo duro que es hacer que en ese navegador se vean las cosas como "debieran verse" y no como el quiera.

Saludos.

PS: Ya de paso, si sabes como hacer para que no ponga margenes en los <hr /> y para que realize un display:inline avisa, que puede venirnos a todos bien ;)
__________________
.-. GeL/T0 .-. Quieres saber mas de mi? lee mi blog: http://g05l21.net
  #16 (permalink)  
Antiguo 30/05/2006, 18:39
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 13 años, 9 meses
Puntos: 4
Código PHP:
<head>
<
style>

body {color#fff; background: #000}

hr
{
background#F60;
height30px;
color#F60;
border0px;
}

.
capa
{
width300px;
height200px;
border1px solid #FF0;
}

</
style>
</
head>

<
body>
<
div class="capa">
        <
p>Este <b>hr</btiene: <br />100de ancho.<br />30px de Alto.</p>
        <
hr>
    </
div>
</
body
__________________
| Cabeza De Raton |
  #17 (permalink)  
Antiguo 30/05/2006, 18:42
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 13 años, 9 meses
Puntos: 4
Ahora, lo que yo no entiendo muy bien es que lo quieras inline. Es un <hr />; para que lo queres con este comportamiento ?.
Esto lo probe en IE y en FF. Creo que funciona en los dos de la misma forma.
<hr />. Aca lo puse en un servidor.
Por ahi no entiendi muy bien lo que querias.
Saludos.
__________________
| Cabeza De Raton |

Última edición por Calisco; 30/05/2006 a las 21:18
  #18 (permalink)  
Antiguo 30/05/2006, 20:04
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 13 años, 9 meses
Puntos: 4
aca hay una pagina que habla del hr
http://www.sovavsiti.cz/css/hr.html.
__________________
| Cabeza De Raton |
  #19 (permalink)  
Antiguo 31/05/2006, 02:29
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
De lo que nosotros hablabamos era del efecto de poder dejar "margin: 0;" No del height y el width (que ya iría la cosa mal si estas dos etiquetas fuesen de forma distinta en uno y otro ; ).


Aquí dejo un screenshot de Firefox y del Explorer para que veas q no deja hacerlo.


Y el código (he cogido el tuyo y lo he retocado ; )
Código HTML:
<head>
<style>

body {color: #fff; background: #000}

hr
{
background: #F60;
height: 30px;
color: #F60;
border: 0px;
margin: 0px;
}

.capa
{
width: 300px;
height: 200px;
border: 1px solid #FF0;
}

</style>
</head>

<body>
<div class="capa">
		<span style="background-color: #ccc;" >
               Este <strong>hr</strong> tiene: <br />100% de ancho.<br />30px de Alto.
        </span>
               <hr>
        <span style="background-color: #ccc;" >
               Esta es una segunda linea
        </span>
       </div>
</body> 
PS: Sobre la página que mandabas, no estaba mal, pero "Last update: 6/14/2002" la deja un poco desfasada. Yo suelo usar http://www.w3schools.com
__________________
.-. GeL/T0 .-. Quieres saber mas de mi? lee mi blog: http://g05l21.net
  #20 (permalink)  
Antiguo 31/05/2006, 02:34
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
Sobre el tema de display:inline. El efecto es este (en los dos navegadores)



Como verás es completamente distinto (de hecho IE lo ignora por completo)

Dejo aquí el código
Código HTML:
<head>
<style>

body {color: #fff; background: #000}

hr
{
background: #F60;

color: #F60;
border: 10px solid;

display:inline;
}

.capa
{
width: 300px;
height: 200px;
border: 1px solid #FF0;
}

</style>
</head>

<body>
<div class="capa">

               Este <strong>hr</strong> tiene: <br />100% de ancho.<br />30px de Alto.

               <hr>

               Esta es una segunda linea

       </div>
</body> 

Un saludo
__________________
.-. GeL/T0 .-. Quieres saber mas de mi? lee mi blog: http://g05l21.net
  #21 (permalink)  
Antiguo 31/05/2006, 07:33
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
un hr inline no tiene sentido ya que no se le puede poner width y/o height, entonces cuanto mide si no tiene contenido??
__________________
Internet Explorer SuckS
Download FireFox
  #22 (permalink)  
Antiguo 31/05/2006, 08:36
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 13 años, 9 meses
Puntos: 4
Claro, vos necesitas un comportamiento inline en el <hr />. Habria que ver como hacer que no pierda las dimensiones con este comportamiento.
Saludos.
__________________
| Cabeza De Raton |
  #23 (permalink)  
Antiguo 31/05/2006, 08:45
Avatar de creativa  
Fecha de Ingreso: octubre-2004
Ubicación: Atlántida Uruguay
Mensajes: 105
Antigüedad: 13 años, 2 meses
Puntos: 0
En mi experiencia, explorer te toma el alto por defecto de la fuente que definiste en el body, si queres que ese div tenga 7px de altura aunque no le vayas a poner nada adentro igual definile un tamaño de fuente y de interlineado:
#div{
font-size:4px;
line-height:3px;
etc, etc,}
espero te sirva.
__________________
http://www.creativa.com.uy
Siempre existen nuevos caminos que recorrer, lo importante es tener ganas de caminar.
  #24 (permalink)  
Antiguo 01/06/2006, 02:25
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 14 años, 5 meses
Puntos: 0
Muchas gracias a todos por vuestra ayuda, pero he de decir que solo poniendo overflow: hidden en el div ya puedo definir la altura que quiera en el div. y se ve igual en todos los navegadores y plataformas, por lo cual solucionado sin tantas complicaciones que es lo que buscaba.

saludos
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
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 03:47.