Varias dudas sobre "position"

Ánima · #1 (**permalink**) 30/01/2007, 02:56

Saludos!
Tengo un par de dudas sobre la propiedad position que no me dejan hacer las cosas como a mi me gustaría jeje

Respecto al valor absolute:

1) Tengo un pie de página, que lo posiciono con absolute a través de bottom. Si la página no supera los límites de la pantalla (no hay que hacer scroll) el pie de pagina se ve correctamente, el problema viene cuando hay mucha letra en la página y hay que hacer scroll. Resulta que el pie de página se coloca en la parte baja de la página en pantalla, pero si se hace scroll se va quedando en medio. Yo lo que quiero es que ese pie de página se vea únicamente al llegar al final de la página, y me resulta extremadamente dificil hacerlo con posicionamiento absoluto, y por la estructura de la página sería muy dificil hacerlo con otro posicionamiento.

2) ¿Porqué me resultaría difícil? Pues resulta que tengo el contenido de la página también como posicionamiento absoluto, y si lo pongo con otro posicionamiento, se iría el pie por encima del contenido de la página. Por este motivo mi segunda duda es: ¿Es posible posicionar un div sin posicionamiento absoluto debajo de un div con posicionamiento absoluto? Es decir, se puede tener en cuenta el tamaño de un div absoluto para posicionar otro div debajo?

Ahora mis dudas sobre posicionamiento relativo:

1) Tengo un div con posicionamiento relativo, según veo en la especificación, si tengo este div de forma relativa, el siguiente div que ponga no tendrá en cuenta este div. Pues resulta que me pasa esto:
******************************************
*----------------------------*******************
*----------------------------*----Div Relativo------**
*----------------------------* ******************
*-********************-------------------------*
*-*----otro div Rel. o no---*-------------------------*
*-********************-------------------------*
*----------------------------------------------------*
******************************************
Y nosé porqué, resulta que ponga relative o static, el comportamiento es el mismo. Además, como relative si permite la propiedad top, pongo top 0 para que el otro div suba al nivel del div primero, pero sigue sin funcionar.

Y aquí concluyen mis dudas sobre position, que no son pocas jejej.Nosé si seré yo o la especificación de CSS pero estas cosas no las veo que las deje muy claras. Si sabeis de algún manual más explicativo y práctico no dudeis en decirmelo.

Mikmoro · #2 (**permalink**) 30/01/2007, 03:52

En cuanto a tu primera pregunta, prueba con este código (he coloreado los divs para que veas bien como están colocados):

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>Pie de pagina</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <style type="text/css">
html, body { height: 92%;
}
div#contenedor { width: 90%;
background-color: rgb(102, 204, 204);
position: absolute;
height: auto ! important;
min-height: 100%;
height: 100%;
}
div#pie { background-color: rgb(0, 102, 0);
position: absolute;
bottom: 0pt;
left: 0pt;
width: 100%;
height: 30px;
margin-bottom: -30px;
clear: both;
}
  </style>
</head>
<body>
<div id="contenedor">
<div id="pie"></div>
</div>
</body>
</html>

Por mucho contenido que pongas, el pie siempre aparecerá debajo de todo. La clave es que esté dentro del contendor y tenga un corte con el contenido que aparezca antes que él (clear: both;)

En cuanto a la segunda cuestión, si el div principal tiene un alto variable no creo que se le pueda hacer "ganar espacio físico o posición" para que el otro quede debajo de él, tenga el tamaño que tenga. Igual me equivoco.

Y en cuanto a la tercera cuestión, el hecho de que sea relativo no es lo que hace que no ocupe espacio o no sea tenido en cuenta en el flujo del documento para la posición del siguiente div, sino que sea flotado o no (float).
Por mucho que tu div tenga una posición relativa, ocupará espacio físico, no así si le pones que esté flotado, por ejemplo con float: left;

Ya dirás si esto te resuelve algo:

Mikel.

Ánima · #3 (**permalink**) 30/01/2007, 09:55

Muchas gracias por tu respuesta Mikel. He visto el ejemplo de pie de página y lo veo claro en ese ejemplo, pero luego lo aplico a mi ejemplo y no funciona, quizás no tengo claras las condiciones de los demás divs.

Para aclararlo todo, acabo de realizar rápidamente un ejemplo dónde se puede apreciar claramente el problema de pie de página y lo del posicionamiento relativo.

Es un poco largo, espero q no pase nada por copiarlo aquí, separando el documento HTML del CSS.
El documento CSS se ven 2 divs anidados dentro de otro div(absolute). Esos dos divs son los que quiero que estén a la misma altura que son: contenido-auxiliar y pagina. El contenido-auxiliar incluye un menú(no creo que perjudique en nada).
Y por último está el div bottom, que es el pie de página.

Con este ejemplo supongo que se verá mejor dónde cometo errores...

HTML:

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prueba</title>
		 <LINK rel="stylesheet" href="estilo_prueba.css" type="text/css">
</head>

<body>

<div class="pageaux">
	<div class="contenido_auxiliar">
		<h3>menu</h3>
		<ul>
			<li><a href="#">Link1</a></li>
			<li><a href="#">Link2</a></li>
			<li><a href="#">Link3</a></li>
		</ul>
	</div>
	
	<div class="page">
			<h2>Titulo</h2>
			<p>Este texto tendria que estar a la misma altura que el</p>

	</div>
	
	

</div>

<div class="bottom"></div>
</body>
</html>

CSS:

Código:

/* CSS Document */

/*ESTRUCTURA PAGINA*/
/*DIV PRINCIPAL*/
.pageaux{
	padding:0;
	position:absolute;
	width:98%;
	top: 130px;
	height:800px;
	background:#CCCCCC;
	border-width:1px;
	border-style:solid;
	border-color:#596158;
}

.page{
	float:left;
	position:relative;
	padding:0;
	width:75%;
	height:70%;
	background:#333333;
	left: -2px;
	border-width:1px;
	border-style:solid;
	border-color:#596158;
}



/*MENU*/
.contenido_auxiliar{
        //Aquí he probado de poner float:right, pero tp funciona.
	position:relative;
	top:0px;
	margin:30px 0px 10px 80%;
	text-align:center;
	}

div.contenido_auxiliar UL{
	list-style:none;
	padding:0px;
	margin:0px;
}

div.contenido_auxiliar LI{
	font-weight:bold;
	text-align:center;
	border:solid;
	padding:0;
	margin-top:4px;
	border-color:#596158;
	border-width:1px 0px 1px 1px;

}

div.contenido_auxiliar LI a{
	padding:2px;
	display:block;
	text-decoration:none;
	color:#333333;
}
div.contenido_auxiliar LI a:hover{
	background:#596158;
	color:#CCCCCC;
}
/*------------------*/


/*PIE DE PAGINA*/
.bottom { 
background-color: rgb(0, 102, 0);
position: absolute;
bottom: 0pt;
left: 0pt;
width: 100%;
height: 30px;
margin-bottom: -30px;
clear: both;
}

Mikmoro · #4 (**permalink**) 30/01/2007, 10:34

Cuando tenga un rato lo miro un poco mejor, pero como te decía antes, una de las claves es que el pie esté dentro del contendor principal, y tu lo tienes fuera.

Mikel.

Ánima · #5 (**permalink**) 30/01/2007, 11:13

Cierto, no me había percatado de ese detalle, ya está solucionado lo del pié de página, muchas gracias!

Aver si me podéis ayudar con lo otro

Mikmoro · #6 (**permalink**) 30/01/2007, 11:31

Hola otra vez, Ánima. Me alegro de que te haya funcionado.
¿Y qué era lo otro? Porque si te refieres a lo de los divs de posición relativa y eso (la tercera cuestión), creo que no te has fijado en mi primer mensaje, porque ya estaba respondido.

Si no era eso, dí a qué te referías, a ver qué se puede hacer.

Mikel.

Ánima · #7 (**permalink**) 30/01/2007, 12:03

Te refieres al float?
Quería alinear .page y le puse float:left junto con position:relative y por si no era suficiente probé en poner el otro div .contenido_auxiliar con float:right, pero lo quité porque no funcionaba y no se veía bien. Y aún así sigue viendose .page por debajo de .contenido_auxiliar....

Creo que te referías a esto no?

Mikmoro · #8 (**permalink**) 30/01/2007, 12:40

Ah, de acuerdo.
Ahora he mirado tu código. Lo puedes solucionar poniendo a tu selector .page un margen superior negativo margin-top -170px;.

Pero eso no resuelve del todo tu duda. Lo que creo que ocurre es:
como tu contenedor .contenido_auxiliar (el del menú) no tiene un tamaño de ancho definido, se posiciona en base a los márgenes que has establecido. Por eso, si le pones float: right se reduce. Entonces, si le das un tamaño (digamos 190px), le pones float: right y al contenedor .page le pones float: left, creo que conseguirás lo que quieres.

Código:

  .page { border: 1px solid rgb(89, 97, 88);
    padding: 0pt;
    background: rgb(51, 51, 51) none repeat scroll 0% 50%;
    float: left;
    position: relative;
    width: 75%;
    height: 70%;
    left: -2px;
    }

  .contenido_auxiliar { margin-top: 30px;
    margin-right: 0px;
    margin-bottom: 10px;
    top: 0px;
    text-align: center;
    width: 190px;
    float: right;
    }

Mikel.

Ánima · #9 (**permalink**) 01/02/2007, 11:36

Muchas gracias Mikel, me ha servido de mucho todo lo que me has ayudado! Así sí que me funciona y gracias a esto ya sé solucionar esos problemillas y entender más o menos el porqué.

Aunque haya arreglado eso, no salgo de un bache para meterme en otro, me está dando muchos problemillas, más de lo que pensaba. Me explico:

Resulta que, partiendo de un html modificado del post anterior para arreglar los pqueños fallos antes mencionados( le he quitado el pie de página xq ya está solventado).

Código:

<body>
<div class="pageaux">
	<div class="page">
			<h2>Titulo</h2>
			AQUI PUEDE HABER MUCHO O POCO TEXTO.		
	</div>

	<div class="contenido_auxiliar">
		<h3>menu</h3>
		<ul>
			<li><a href="#">Link1</a></li>
			<li><a href="#">Link2</a></li>
			<li><a href="#">Link3</a></li>
		</ul>
	</div>	
</div>
</body>

Con esto me veía con un problema, si había poco texto las cajas quedaban muy pequeñas y no ocupaba la visibilidad del navegador.
Entonces pensé, le pongo un min-height al bloque padre y listos! Pero no, porque dependiendo de la resolución el height sería uno u otro así que no sería la opción más apropiada.
En segundo lugar pensé, en vez de eso le pongo un bottom:30px y así se adapta el bloque padre hasta abajo(esos 30px serían xq el pie de pagina ocuparia 30px). Bien, esta solución funcionaba para todo tipo de resolución! (cuando había poco texto claro, no podía ser todo tan bonito)

Pongo mucho texto, y resulta que la caja padre no se adapta al texto, se queda por encima, porqué?? por el bottom, si quitaba el bottom (y tp tiene height) se adapta perfectamente, da = el texto que pusieras...pero entonces, de esta manera no cubría el primer problema, es decir, que hubiera poco texto.

He probado muchas cosas pero nada...nada que me arregle los dos problemas a la vez.

PD: Lo siento por mis dudas, ya sé que son muchas pero en parte creo que es por culpa de la especificación de CSS (aunque gran parte de culpa sea mia), desde mi humilde opinión no está muy bien hecha, porque no deja claros muchos aspectos.

Mikmoro · #10 (**permalink**) 01/02/2007, 12:13

Hola, Ánima.
No estoy seguro del todo de entenderte, pero puedes probar esto: ponle a tu selector .page (el del contenido)

height: auto ! important;
min-height: 100%;
height: 100%;

Con esto le dices que ocupe como mínimo el 100%.

Ánima · #11 (**permalink**) 01/02/2007, 18:24

Quizás con un ejemplo super super simple se verá más claro:

HTML:BODY

Código:

<body>
<div class="principal">
  <div class="secundario">
	TEXTO 
  </div>
</div>
</body>

CSS:

Código:

.principal{
	padding:0;
	position:absolute;
	width:98%;
	top: 130px;
	background:#CCCCCC;
	border-width:1px;
	border-style:solid;
	border-color:#596158;

	height:auto !important;
	//bottom:30px;
}
.secundario{
	float:left;
	position:relative;
	padding:0;
	width:75%;
	background:#333333;
	left: -2px;
	border-width:1px;
	border-style:solid;
	border-color:#596158;
	
	height: auto !important;
	min-height: 100%;
	height:100%;
}

Okey, partiendo de esto:
Amí exactamente como está me sale dos divs muy juntos y muy finos. Bien, si descomentamos el bottom, se verá un incremento de los dos divs hasta llegar 30px por encima del final, que eso es lo que quiero cuando hay poco texto como es el caso.
Pero cuando hay mucho texto, sólo se adapta el div secundario, el div primario se queda más pequeño por culpa de la sentencia bottom:30px. Si lo quito, se adaptará bien, pero claro, entonces no me servirá cuando haya poco texto...

PD:Lo siento por molestar tanto con estas dudas pero es que es un sin sentido que me trae loco xD

Ánima · #12 (**permalink**) 03/02/2007, 18:25

Nadie sabe nada sobre esto?

Sino entendeis algo o quereis que lo explique mejor decirmelo...pero por favor decirme algo que estoy muy liado con esto.

Laufwerk · #13 (**permalink**) 14/12/2007, 10:59

Hola chicos!!!
me pasa algo muy parecido pero con la ocultacion de divs, no consigo que el footer siempre se me vea abajo de cualquier contenido.
El codigo es el siguiente :
HTML :

Código:

<html>
<head>
<title>Untitled</title>
 <link href="estilos.css" rel="stylesheet" type="text/css" />
<script language="Javascript">
function mostrar(nombre_Capa,num_Capa,ntotal_capas){
for (i=1;i<=ntotal_capas;i++){
	if (nombre_Capa+[i]== nombre_Capa+num_Capa){
		document.getElementById(nombre_Capa+[i]).style.visibility="visible";
	}
	else{
	document.getElementById(nombre_Capa+[i]).style.visibility="hidden";
	}
}
//document.getElementById(nombre_Capa).style.visibility="visible";
}
function ocultar(nombre_Capa){
document.getElementById(nombre_Capa).style.visibility="hidden";
}
</script>
</head>
<body>
<div id="content">
    <a onClick='mostrar("capa",1,6)'>Traslado de maquinaria.</a>&nbsp;&nbsp;
    <a onClick='mostrar("capa",2,6)'>Instalaciones.</a>&nbsp;&nbsp;
    <a onClick='mostrar("capa",3,6)'>Mantenimiento.</a>&nbsp;&nbsp;
    <a onClick='mostrar("capa",4,6)'>Montaje de cuadros eléctricos.</a>&nbsp;&nbsp;
    <a onClick='mostrar("capa",5,6)'>Fabricación de bobinas toroidales.</a>&nbsp;&nbsp;
    <a onClick='mostrar("capa",6,6)'>Ingeniería Eléctrica.</a>
    <br/>
    
    <div id="capa1">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td><h3>Traslado de maquinaria:</h3>
        
        <p>Nos ocupamos del traslado de máquinas y células robotizadas incluyendo la totalidad del proceso del desmontaje y reubicación:</p>
        •	Aseguramiento de la geometría y etiquetaje de elementos.<br />
        •	Desconexión de acometidas: eléctrica, neumática, gas y refrigeración.<br />
        •	Desmontaje y traslado.<br />
        •	Implantación y montaje.<br />
        •	Realización de acometidas: eléctrica, neumática, gas y refrigeración.<br />
        •	Comprobación de funcionamiento y asistencia a la puesta en marcha.<br />
        </td>
        <td width="400px"><img src="images/LINEAmini.jpg" alt="Traslado" border="0"/></td>
    </tr>
    </table></div>
    
    <div id="capa2">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td width="180px"><img src="images/instalacionesmini.jpg" alt="Traslado" border="0"/></td>
        <td><h3>Instalaciones:</h3>
    •	Instalación de redes eléctricas y de alumbrado en oficinas y naves industriales.<br />
    •	Instalaciones neumáticas y  de refrigeración.<br />
        </td>
    </tr>
    <tr>
    <td width="180px"><img src="images/MAQUINA-AUTOMATICAmini.jpg" alt="Máquinas Automáticas" /></td>
    <td>•	Instalación de máquinas y líneas automáticas.<br /></td>
    </tr>
    </table></div>
    
    <div id="capa3">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td><h3>Mantenimiento:</h3>
        <p></p>
    •	Modificación máquinas automáticas.<br />
    •	Redes eléctricas y de alumbrado en oficinas y naves industriales.<br />
    •	Redes neumáticas y de refrigeración.<br />
        </td>
        <td width="240px"><img src="images/Integracion-de-seguridades-en-un-util-manualmini.jpg" alt="Traslado" border="0"/></td>
    </tr>
    </table></div>
    
    <div id="capa4">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td width="128px"><img src="images/CUADRO-DISTRIBUCIONmini.jpg" alt="Traslado" border="0"/></td>
        <td width="205px"><img src="images/MONTAJE-SERIES-1mini.jpg" alt="Traslado" border="0"/></td>
        <td width="225px"><img src="images/MONTAJE-SERIES-2mini.jpg" alt="Traslado" border="0"/></td>
        <td><h3>Montaje de cuadros eléctricos:</h3>
        <p>Diseño, suministro del material y montaje de:</p>
    •	Cuadros eléctricos de distribución y potencia.<br />
    •	Cuadros de control y maniobra con relés o autómatas programables.<br />
        </td>
    </tr>
    </table></div>
    
    <div id="capa5">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td><h3>Fabricación de bobinas toroidales:</h3>
        <p>Suministramos bobinas toroidales para controles de soldadura (medición de corriente en secundario). Diseño y fabricación propios.</p>
        <p>Características:</p>
    •	Resolución 150 mV/KA. <br />
    •	Diámetros 100, 150 y 250 mm.<br />
        </td>
        <td width="106px"><img src="images/PLANO-BOBINAmini.jpg" alt="Plano bobina" border="0"/></td>
        <td width="205px"><img src="images/BOBINASmini.jpg" alt="Plano bobina" border="0"/></td>
    </tr>
    </table></div>
    
    <div id="capa6">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td colspan="2"><h3>Ingeniería Eléctrica:</h3>
        <p>Uno de los servicios de instalaciones VALERO es la Ingeniería Eléctrica que se ocupa de ofrecer soluciones integrales de automatización que incluyen el estudio y la realización de proyectos eléctricos, la programación de autómatas, el seguimiento del montaje e instalación y la puesta en marcha.</p>
        </td>
    </tr>
    <tr>
        <td width="293px"><img src="images/AUTOMATIZACIONmini.jpg" alt="Plano bobina" border="0"/></td>
        <td>•	Automatización:<br />
    <p>Nuestros técnicos colaboran, aportando su amplia experiencia, con ingenierías mecánicas y fabricantes de maquinaría, asesorándoles en el diseño del automatismo más adecuado en cada caso o como apoyo en proyectos de gran envergadura.</p>
    <p>Así mismo colaboramos con industrias dando asistencia técnica en la localización de averías y en la modificación de procesos en líneas y máquinas automáticas.</p><br />
        </td>
    </tr>
    <tr>
        <td width="300px"><img src="images/PROYECTO-EPLANmini.jpg" alt="Plano bobina" border="0"/></td>
        <td>•	Realización de proyectos eléctricos:<br />
    <p>Eplan</p><br />
        </td>
    </tr>
    <tr>
        <td width="375px"><img src="images/automatas_OMROMmini.jpg" alt="Automatas OMRON" border="0"/></td>
        <td>•	Programación de Autómatas:<br />
    <p>Siemens S7, S5<br />
    Omrom<br />
    Allen Bradley</p><br />
        </td>
    </tr>
    </table></div>
<div id="footer">by Jordi</div>
</div>

</body>
</html>

CSS:

Código:

#main{
	background-color:#CCCCCC;
	position:absolute;
	float:left;
	width:100%;
	height:auto;
}
#left{
	background-color:#FFFF00;
	position:relative;
	float:left;
	width:5%;
	height:100%;
}
#center{
	background-color:orange;
	position:relative;
	float:left;
	width:90%;
	height:300px;
}
#right{
	background-color:#99FF00;
	position:relative;
	float:left;
	width:5%;
	height:auto;
}
#div_clear{
	clear:both;
}
#content{
	background-color:YELLOW;
	border-color:yellow;
	border-width:thin;
	border-style:solid;
	
	position:absolute;
	width:100%;
	height:auto !important;
}
#content a{
cursor:hand;
}

#content #capa1,#capa2,#capa3,#capa4,#capa5,#capa6{
	position:absolute;
	width:630;
	height:auto;
	top:20;
	left:0;
	background-color:#CCFFFF;
	visibility:hidden;
}
#footer{
	background-color:pink;
	border-color:pink;
	border-width:thin;
	border-style:solid;

	position: relative;
	height: auto !important;
	min-height: 100%;
	height:100%;

	text-align:center;
}

seguro que es un fallo muy simple, pero no tengo manera de pillarlo.

Mil gracias!!!!