Foros del web, para los que viven de bits

chuidiang · 13-may-2006, 03:23

Hola:

Estoy empezando con css. Pretendo hacer una simple linea de texto con tres palabras, una a la izquierda, otra en el centro y otra a la derecha. He hecho este fichero css

#cabecera1 {
text-align: left;
border-style: solid;
width: 33%;
display: inline;
}
#cabecera2 {
width: 33%;
text-align: center;
border-style: solid;
display: inline;
}
#cabecera3 {
width: 33%;
border-style: solid;
text-align: right;
display: inline;
}

y esta página html

<html>
<head>
<title>prueba</title>
<link rel="stylesheet" href="../../estilo.css">
</head>
<body>
<div id="cabecera1">izquierda</div>
<div id="cabecera2">centro</div>
<div id="cabecera3">derecha</div>
</body>
</html>

En internet explorer se ve lo que quiero, en firefox aparentemente no coge los "width". Si quito el display inline, entonces si coge los width, pero sale cada palabra en una linea distinta.

Sé que puedo conseguir lo que quiero con posicionamientos absolutos y demás, pero me gustaría saber por qué esto no funciona en firefox.

Gracias y sed buenos.

baccxus · 13-may-2006, 08:42

Primero que todo, lo que ves en firefox es el comportamiento CORRECTO de display:inline, por otro lado colocas border-style:solid, pero no aplicas el tamaño del borde ni el color (border-width, border-color:), y para hacer un posicionamiento de CAPAS en la forma que quieres se usa float, además estás repitiendo el mismo código para las 3 divisiones, así que resumí el códgo de la siguiente forma:

Código:

#cabecera1, #cabecera2, #cabecera3 {
border: 1px solid black;
width: 33%;
float:left;
}
#cabecera1 {text-align: left;}
#cabecera2 {text-align: center;}
#cabecera3 {text-align: right;}

Saludos

chuidiang · 13-may-2006, 13:49

Hola:

Gracias, funciona perfectamente. No estoy muy seguro de entender lo que has hecho, pero haré mis pruebas.

Se bueno.

13-may-2006, 03:23	#1 (permalink)
chuidiang Fecha de Ingreso: octubre-2004 Mensajes: 721	comportamiento distinto entre IE y firefox Hola: Estoy empezando con css. Pretendo hacer una simple linea de texto con tres palabras, una a la izquierda, otra en el centro y otra a la derecha. He hecho este fichero css #cabecera1 { text-align: left; border-style: solid; width: 33%; display: inline; } #cabecera2 { width: 33%; text-align: center; border-style: solid; display: inline; } #cabecera3 { width: 33%; border-style: solid; text-align: right; display: inline; } y esta página html <html> <head> <title>prueba</title> <link rel="stylesheet" href="../../estilo.css"> </head> <body> <div id="cabecera1">izquierda</div> <div id="cabecera2">centro</div> <div id="cabecera3">derecha</div> </body> </html> En internet explorer se ve lo que quiero, en firefox aparentemente no coge los "width". Si quito el display inline, entonces si coge los width, pero sale cada palabra en una linea distinta. Sé que puedo conseguir lo que quiero con posicionamientos absolutos y demás, pero me gustaría saber por qué esto no funciona en firefox. Gracias y sed buenos. __________________ Apuntes Java Diario de Programacion Foro de Java

13-may-2006, 08:42	#2 (permalink)
baccxus Fecha de Ingreso: mayo-2005 Ubicación: Panamá Mensajes: 750	Primero que todo, lo que ves en firefox es el comportamiento CORRECTO de display:inline, por otro lado colocas border-style:solid, pero no aplicas el tamaño del borde ni el color (border-width, border-color:), y para hacer un posicionamiento de CAPAS en la forma que quieres se usa float, además estás repitiendo el mismo código para las 3 divisiones, así que resumí el códgo de la siguiente forma: Código: #cabecera1, #cabecera2, #cabecera3 { border: 1px solid black; width: 33%; float:left; } #cabecera1 {text-align: left;} #cabecera2 {text-align: center;} #cabecera3 {text-align: right;} Saludos __________________ En la caja decía "Instalar Windows XP o superior", pues le instalé Ubuntu! In a world without frontiers, why you need Gates and Windows?

13-may-2006, 13:49	#3 (permalink)
chuidiang Fecha de Ingreso: octubre-2004 Mensajes: 721	Hola: Gracias, funciona perfectamente. No estoy muy seguro de entender lo que has hecho, pero haré mis pruebas. Se bueno. __________________ Apuntes Java Diario de Programacion Foro de Java

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado