Margen, iexplorer lo hace, Firefox lo ignora

RBZ · #1 (**permalink**) 06/03/2006, 06:56

Buenas.
Tengo una capa de texto en medio de otras capas que sale pegada a la de arriba en Firefox y no consigo separar. He probado con Padding-top, y en el explorer funciona, en el Firefox no produce ningún resultado. Si pongo Margin-top, el explorer toma como referencia la capa superior, y el firexfox el principio de la página. ¿Cuál es el problema?, aparte de mi inexperiencia.

Código:

#capa3 { width: 396px;
			height:497px;
			text-align:center;
			padding-top:50px;}

//////////////////////////////////////////////////////////////////////////////

<div class="Estilo2" id="capa3">  <p align="justify" class="Estilo1" > ENCABEZADO </p>
  <p align="justify"><strong>Aquí el resto del texto</strong>  </p>
</div>

Un saludo

xavi · #2 (**permalink**) 06/03/2006, 10:50

Tienes definido estilo2 en algún sitio?

RBZ · #3 (**permalink**) 07/03/2006, 07:05

Cita:

Iniciado por xavi

Tienes definido estilo2 en algún sitio?

Sí, es eso importante.

Código:

.Estilo1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 50px;
}
    .Estilo2 {font-family: Arial, Helvetica, sans-serif;
	font-size:18px;}

Creo que el problema es que no "defino" bien la capa o algo así, porque lo que añado, sale debajo del texto. Lo extraño es que el explorer, si se como quiero.
Si en vez de # pongo un punto, entonces se ve igual en los dos , el texto ocupa la pantalla completa ignorando las dimensiones de la capa width: 396px; height:497px;
Gracias por la respuesta xavi, hacen falta mas datos para que me puedan ayudar.

xavi · #4 (**permalink**) 07/03/2006, 07:25

Cita:

Iniciado por RBZ

Si en vez de # pongo un punto, entonces se ve igual en los dos

Pero eso es porque en un caso te refieres al ID y en el otro a la clase. Prueba de añadir un margin:2px a la clase que tenga que mantener ese margen... aunque francamente te aconsejaría que revisaras el planteamiento de la página y de la hoja de estilos, pq hay un poco de confusión entre ids y clases

RBZ · #5 (**permalink**) 07/03/2006, 07:55

Cita:

Iniciado por xavi

Pero eso es porque en un caso te refieres al ID y en el otro a la clase. Prueba de añadir un margin:2px a la clase que tenga que mantener ese margen... aunque francamente te aconsejaría que revisaras el planteamiento de la página y de la hoja de estilos, pq hay un poco de confusión entre ids y clases

Gracias, pero eso lo que no me funciona, el margin ni el padding.
Lo que estoy intentando hacer es que el texto no ocupe toda la página, que se quede dentro de la capa. El explorer lo hace, pero el firefox ignora la capa por completo, el texto sale con el tamaño que quiero, pero los demás elementos no lo tienen en cuenta y salen debajo.

xavi · #6 (**permalink**) 07/03/2006, 09:06

puedes postear el código entero?

RBZ · #7 (**permalink**) 07/03/2006, 10:54

Es una prueba por eso repiten las imágenes. Gracias por el interés xavi.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Intento de CSS 6 de marzo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css" media="all">
	#contenedor {
			width:1024px;
			height:4000px;
			text-align:left;
			border:1px solid #c03;
			margin-top:0;
            margin-right:auto;
            margin-bottom:0;
            margin-left:auto;
			}
	#capa1 { width:1000px;
			height:50px;
			text-align:center;
			margin-top:20px;}
	.capa img{float:left;
	margin-left: 45px;
	margin-right: 45px;
	margin-top: 50px;}
	  body {
	margin-left: 0px;
}
	.capa2 img{float:left;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 50px;}
	#capa3 { width: 396px;
			height:497px;
			text-align:left;
			padding-top:50px;} 
	  body {
	margin-left: 0px;
}

.Estilo1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 50px;
}
    .Estilo2 {font-family: Arial, Helvetica, sans-serif;
	font-size:18px;}
    </style>
</head>

<body>
<div id="contenedor">
<div class="Estilo1" id="capa1">Prueba de CSS </div>
<div class="capa">
<img src="0915701.jpg" alt="" border="6"/>
<img src="0915701.jpg" alt="" border="6"/>
<img src="0915701.jpg" alt="" border="6"/>
<img src="0915701.jpg" alt="" border="6"/>
<img src="0915701.jpg" alt="" border="6"/>
<img src="0915701.jpg" alt="" border="6"/>
</div>
<div class="capa2">
<img src="4121001.jpg" alt="" border="6"/>
<img src="4121001.jpg" alt="" border="6"/>
<img src="4121001.jpg" alt="" border="6"/>
<img src="4121001.jpg" alt="" border="6"/>
<img src="4121001.jpg" alt="" border="6"/>
<img src="4121001.jpg" alt="" border="6"/>
<div class="Estilo2" id="capa3">  <p align="justify" class="Estilo1" > LA CATEDRAL </p>
  <p align="justify"><strong>Edificada sobre la antigua mezquita que ya se usaba como templo cristiano y qued&oacute; muy da&ntilde;ada en el terremoto del 1356. Se conservan algunos de sus restos en el patio de los naranjos (patio de abluciones) y la Giralda (torre alminar). Tiene planta de sal&oacute;n (rectangular) con una nave central y cuatro laterales, veinticinco capillas m&aacute;s otras construcciones a&ntilde;adidas como sacrist&iacute;as, archivos, bibliotecas, patios, sala capitular, sala de ornamentos... configurando todo ello la tercera catedral m&aacute;s grande del mundo, tras las de San Pedro de Roma y San Pablo de Londres. Posee un extenso y valioso patrimonio hist&oacute;rico-art&iacute;stico-religioso, del que es muy dif&iacute;cil escoger alg&uacute;n ejemplo.</strong>  </p>
</div>
</div>
<div class="capa">
<img src="0915701.jpg" alt="" border="6"/>
<img src="0915701.jpg" alt="" border="6"/>
<img src="0915701.jpg" alt="" border="6"/>
<img src="0915701.jpg" alt="" border="6"/>
<img src="0915701.jpg" alt="" border="6"/>
<img src="0915701.jpg" alt="" border="6"/>
</div>
</div>
</body>
</html>

xavi · #8 (**permalink**) 07/03/2006, 11:48

A bote pronto, quita los espacios entre los tags IMG...

y luego intenta depurar un poco el código para evitar otras posibles fuentes de error. El border de la imagen pásalo por css, quita tags y clases innecesarias. Puedes sustituir, sin despeinarte esto

Código:

<div class="Estilo1" id="capa1">Prueba de CSS </div>

por

Código:

<h1>Prueba de CSS</h1>

etc. de forma que te quede lo más limpio posible. Y una vez lo tengas depurado vemos si falla en más sitios. Si te volviera a fallar, cuelga las imágenes en algun server y pon la ruta absoluta para poder testear exactamente lo que tu tienes.

RBZ · #9 (**permalink**) 08/03/2006, 05:29

Vaya muchas gracias, ya va bien en los dos. He aprendido a definir los estilos de textos. Aún así creo que sigo haciendo algo incorrecto, porque ahora la capa siguiente, se desajusta en ambos. ¿Es que no puedo usar la misma definición para mas de una capa?. Que raro, yo creia que esa era la diferencia entre las capas que empiezan por un punto y las que empiezan por #. También ocurre que el Firefox empieza el texto pegado a la imagen y el explorer no.
Te pego el código depurado. Y por si hace falta la página la he subido también en la siguiente dirección, http://hispalisrbz.iespana.es/8marzo.htm

No se que pasa, la página se ve centrada en el explorer en mi pc, y en el servidor no.

Mas raro aún, aquí se ve bien. http://es.geocities.com/rbzhispalis/8marzo.htm ¿Esto tiene explicación?

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Intento de CSS 8 de marzo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css" media="all">
	#contenedor {
			width:1024px;
			height:4000px;
			text-align:left;
			border:1px solid #c03;
			margin-top:0;
            margin-right:auto;
            margin-bottom:0;
            margin-left:auto;
			}
	h1 { width:1000px;
			height:50px;
			text-align:center;
			margin-top:20px;
			font-family: Arial, Helvetica, sans-serif;
	        font-size: 50px;}
	.capa img{float:left;
	margin-left: 45px;
	margin-right: 45px;
	margin-top: 50px;
	border-width: 6px; 
	border-style: solid; 
	color: #000000;}
	.capa2 img{float:left;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 50px;
	border-width: 6px; 
	border-style: solid; 
	color: #000000;}
	.capa3 img{float:right;
	margin-left: 45px;
	margin-right: 80px;
	margin-top: 125px;
	border-width: 6px; 
	border-style: solid; 
	color: #000000;}
	h3 { width: 396px;
		 text-align:justify;
		 font-family: Arial, Helvetica, sans-serif;
	     font-size:18px;} 
    h2 {font-family: Arial, Helvetica, sans-serif;
	text-align:justify;
	padding-top:50px;
	font-size:50px;}
	  body {
	margin-left: 0px;
}
 </style>
</head>

<body>
<div id="contenedor">
<h1>Prueba de CSS</h1>
<div class="capa">
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
</div>
<div class="capa2">
<img src="4121001.jpg" alt=""/>
<img src="4121001.jpg" alt=""/>
<img src="4121001.jpg" alt=""/>
<img src="4121001.jpg" alt=""/>
<img src="4121001.jpg" alt=""/>
<img src="4121001.jpg" alt=""/>
<div class="capa3">
<img src="0915701.jpg" alt=""/>
</div>
<h2>La Catedral. </h2>
<h3>Edificada sobre la antigua mezquita que ya se usaba como templo cristiano y qued&oacute; muy da&ntilde;ada en el terremoto del 1356. Se conservan algunos de sus restos en el patio de los naranjos (patio de abluciones) y la Giralda (torre alminar). Tiene planta de sal&oacute;n (rectangular) con una nave central y cuatro laterales, veinticinco capillas m&aacute;s otras construcciones a&ntilde;adidas como sacrist&iacute;as, archivos, bibliotecas, patios, sala capitular, sala de ornamentos... configurando todo ello la tercera catedral m&aacute;s grande del mundo, tras las de San Pedro de Roma y San Pablo de Londres. Posee un extenso y valioso patrimonio hist&oacute;rico-art&iacute;stico-religioso, del que es muy dif&iacute;cil escoger alg&uacute;n ejemplo.</h3>

<div class="capa">
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
</div>
</div>
</body>
</html>

xavi · #10 (**permalink**) 08/03/2006, 07:55

Si que está más limpio, si... aunque se puede mejorar ;)

ahora lo que te falta es cortar el flujo de floats de las imágenes. Para hacerlo, coloca un DIV después de la última imagen y aplícale una clase que "limpie" el float tal que así:

Código:

.clear { clear:both; height:0px; font-size:0px; }
<div class="clear">&nbsp;</div>

de esta forma, además, podrás quitarte de encima el height:400px porque forzarás el flujo correcto de la página.

El problema aparece cuando, al tener elementos flotados, el margen superior toma como referencia el primer elemento intentando colocar los demás alrededor del primero. De alguna forma la altura de los elementos flotados no se tiene en cuenta a no ser que cortes ese flujo.

Más didáctico no se puede ;)

RBZ · #11 (**permalink**) 08/03/2006, 08:20

Lo siento, eso no lo he entendido. Podrías repetírmelo. Antes oía campanas pero no sabía dónde, ahora me he quedado sordo.
Lo que tengo que corregir es que el floats afecta a las demas capas.

xavi · #12 (**permalink**) 09/03/2006, 04:50

css

Código:

.clear { clear:both; height:0px; font-size:0px; }

html (trozo)

Código:

<div id="contenedor">
<h1>Prueba de CSS</h1>
<div class="capa">
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<div class="clear">&nbsp;</div>
</div>

Recapitulemos. Aplicando un float (left o right) a un elemento lo sacas del flujo de su contenedor, de forma que el próximo elemento, en lugar de "empezar" donde termina el anterior empieza a su misma altura (si puede).

En tu caso, no se aplicaba el margen superior porque éste tomaba la posición del DIV que contenía los elementos flotados. Al estar todo el contenido de ese DIV fuera de flujo, la altura del DIV es la de sus elementos no-flotados, que en tu caso era ninguno.

Añadiendo el DIV con la clase clear, cortas el flujo de floats de los elementos, de forma que el contenedor termina donde termina dicho DIV.

Suena confuso pero puedes probarlo muy fácilmente. Añade un borde a capa1 antes de poner el div clear y verás que no ocupa el alto de su contenido. Añade luego el div clear y verás como sí lo ocupa.

RBZ · #13 (**permalink**) 14/03/2006, 06:25

Gracias xavi, ya me quedó claro. No respondí antes para añadir la siguiente duda, pero esta creo que mejor la pongo en un mensaje nuevo.
Gracias de nuevo,

me has sido de gran ayuda.