Foros del Web » Creando para Internet » CSS »

Margen, iexplorer lo hace, Firefox lo ignora

Estas en el tema de Margen, iexplorer lo hace, Firefox lo ignora en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/03/2006, 06:56
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2034
Pregunta Margen, iexplorer lo hace, Firefox lo ignora

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
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
  #2 (permalink)  
Antiguo 06/03/2006, 10:50
 
Fecha de Ingreso: abril-2005
Mensajes: 76
Antigüedad: 12 años, 8 meses
Puntos: 0
Tienes definido estilo2 en algún sitio?
__________________
* Si hubiera previsto las consecuencias, me hubiera hecho relojero.
  #3 (permalink)  
Antiguo 07/03/2006, 07:05
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2034
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.
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
  #4 (permalink)  
Antiguo 07/03/2006, 07:25
 
Fecha de Ingreso: abril-2005
Mensajes: 76
Antigüedad: 12 años, 8 meses
Puntos: 0
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

__________________
* Si hubiera previsto las consecuencias, me hubiera hecho relojero.
  #5 (permalink)  
Antiguo 07/03/2006, 07:55
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2034
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.
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
  #6 (permalink)  
Antiguo 07/03/2006, 09:06
 
Fecha de Ingreso: abril-2005
Mensajes: 76
Antigüedad: 12 años, 8 meses
Puntos: 0
puedes postear el código entero?
__________________
* Si hubiera previsto las consecuencias, me hubiera hecho relojero.
  #7 (permalink)  
Antiguo 07/03/2006, 10:54
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2034
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>
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
  #8 (permalink)  
Antiguo 07/03/2006, 11:48
 
Fecha de Ingreso: abril-2005
Mensajes: 76
Antigüedad: 12 años, 8 meses
Puntos: 0
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.
__________________
* Si hubiera previsto las consecuencias, me hubiera hecho relojero.
  #9 (permalink)  
Antiguo 08/03/2006, 05:29
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2034
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>
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
  #10 (permalink)  
Antiguo 08/03/2006, 07:55
 
Fecha de Ingreso: abril-2005
Mensajes: 76
Antigüedad: 12 años, 8 meses
Puntos: 0
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 ;)
__________________
* Si hubiera previsto las consecuencias, me hubiera hecho relojero.
  #11 (permalink)  
Antiguo 08/03/2006, 08:20
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2034
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.
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
  #12 (permalink)  
Antiguo 09/03/2006, 04:50
 
Fecha de Ingreso: abril-2005
Mensajes: 76
Antigüedad: 12 años, 8 meses
Puntos: 0
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.
__________________
* Si hubiera previsto las consecuencias, me hubiera hecho relojero.
  #13 (permalink)  
Antiguo 14/03/2006, 06:25
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2034
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.
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
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 16:59.