Se me mueve la capa si introduzco

fmcampos · #1 (**permalink**) 01/12/2009, 07:52

Hola todos hace tiempo que no me pasa por aquí, pero he vuelto a programa en html+css y tengo un problemilla.
He estructurado la pagina Web, creo que mas o menos bien, pero cuando introduzco un párrafo .. , se me desplaza la capa en la cual esta hacia abajo y me estropea la maquetacion. Me imagino que esto será por que no he introducción bien las referencias relativos y absolutas, pero no encuentro información en Internet.
Os pongo el código por si podéis ayudarme.
Aquí tenéis la pagina Hmtl

Código:

<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="capas/disenno.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="contenedor">
	
  <div class="cabecera"></div>
		<div class="barra-lateral"> <p>Lateral</p>  </div>
  <div class="contenido">
    <div class="Seleccion">
		<div class="imagen_pilares_cabeza"><p>Me muevo</p></div>
	</div>
    <div class="Seleccion">
	</div>		
    <div class="Seleccion">
	</div>	
   </div>
   <div class="pie">Prueba de pie</div>

</div>
</body>
</html>

Y aqui teneis la CSS:

Código:

.contenedor{
	width:  900px;
	margin: auto;
}
.cabecera {
	background-color: blue;
    height: 75px;
	padding: 5px;
	clear: both;
	Margin-bottom: 10px;
}

.barra-lateral{
	background-color: orange;
	float:left;
	width: 140px;
	height: 100%;
}
.contenido{
	background-color: gray;
	float: left;
	width: 750px;
	height: 100%;
	Margin-left: 10px;
	
}
.Seleccion{
    background-color: red;
	Margin-top: 10px;
	float: left;
	width: 227px;
	height: 295px;
	Margin-left: 10px;
}


.pie{
	background-color:blue;
	clear:both;
	float: left;
    Margin-top: 10px;
	width: 900px;
	Padding-bottom: 5px;
}
.imagen_pilares_cabeza{
	background-image:url('../Imagenes/FondoCabecera_destaco_1.gif');
	position:adsolute;
	left:0px;
	top:0px;
	z-index:-1;
	width: 226px;
	height: 30px;
}

Muchas gracias a todos.

prava · #2 (**permalink**) 01/12/2009, 09:11

Hola Francisco, sabes que yo lo veo exactamente igual con y sin los . Dinos en que browser lo estas probando y en que versión así podemos tener idea mas acabada de lo que te está pasando.

Saludos,
Pablo

Ruben_JD · #3 (**permalink**) 01/12/2009, 09:23

Puede ser que el tipo de fuente que utilizes ocupe algo de espacio en las , asi como el estilo, negrita, italica, etc, te recomiendo definir el tamaño de la fuente y la linea de texto, asi como de colocar dentro de tu css un un margen cero un espacio cero para todos tus .
Tambien puedes colocar una linea en tu codigo que te permita eliminar espacios molestos de los exploradores.
*{
margin:0; padding:0; border:0;
}
y lo pruebas.

fmcampos · #4 (**permalink**) 01/12/2009, 12:01

Muchas gracias hoy mismo lo pruebo y os dijo.

prava · #5 (**permalink**) 01/12/2009, 12:27

Acordate de poner en el css lo siguiente:

Código:

body {
        text-align: center;
}
.contenedor{
        text-align: left
	width:  900px;
	margin: auto;
}

Esto es porque IE no entiende lo del margen "auto" y te vuelca la pagina para la izquierda.

Saludls,
Pablo.

jomaruro · #6 (**permalink**) 01/12/2009, 15:59

Hola:

No entiendo lo que quieres decir con "se mueve". Yo lo veo igual con y sin .

Saludos.

fmcampos · #7 (**permalink**) 02/12/2009, 01:05

Es que no he definido bien las clases, por favor modificar la clase "imagen_pilares_cabeza" por:

Código:

.imagen_pilares_cabeza{
	background-color:green;
	position:adsolute;
	left:0px;
	top:0px;
	z-index:-1;
	width: 226px;
	height: 30px;
}

No os puedo adjuntar imagenes todavia. Pero no me pasa con IE, pero si con Mozilla 3.5.5 y con la ultima versión de Chrome.

Un saludo y espero haberme explicado mejor esta vez.

Impostor · #8 (**permalink**) 02/12/2009, 03:34

¿has reseteado la plantilla? Nos enseñas los estilos de la clase p, si no lo has definido, hazlo.

Saludos¡¡

fmcampos · #9 (**permalink**) 02/12/2009, 07:49

Muchas gracias a todos ya he solucinado el problema he marcado a 0 los espaciones de los y solucionada.

Muchas gracias a todos.

Se me mueve la capa si introduzco <p>