HTML - posicion de capa depende del tamaño de otra

posicion de capa depende del tamaño de otra

Publicado por localhost (16 intervenciones) el 03/08/2011 17:58:49

Hola, tengo un problemilla, estoy haciendome una web personal y la estoy haciendo con una plantilla.dwt en dreamweaver y estoy utilizando capas, tema que con controlo mucho. La plantilla ya la tengo y todo bien, pero ahora esta plantilla tiene una zona editable que va a ser el cuerpo de la página, el cual va a tener distintos tamaños según la sección en la que me encuentre. La pregunta es: ¿Se puede ajustar la posicion en altura de la capa que aparece debajo del cuerpo a la altura de la capa del cuerpo?
¿Se puede puede hacer esto de alguna manera?

Si se puede hacer o alguno sabe como hacerlo les ruego que me den una pista, porque si no, no me sirve de nada la plantilla, no??

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

posicion de capa depende del tamaño de otra

Publicado por DerangedMX (47 intervenciones) el 08/08/2011 23:54:03

La solución es emplear CSS, en principio la relación de la altura para ambos elementos es automática, siempre y cuando no tengas determinada la misma por un valor absoluto. Me explico:

si, por ejemplo, si tu plantilla fuese:

<html>

<head>

<title>Imagen expandible</title>

<style>

body {background:#ccc; margin:0; padding:0;}

.contenedor {width:980px; margin:0 auto;}

.columna1 {width:300px; float:left; margin:0; padding:10px; background:#fff;}

.contenido {width:640px; float:left; padding:10px; background:#eee;}

</style>

</head>

<body>

<div class="contenedor">

	<div class="columna1">

		ejemplo columna x

	</div>

	<div class="contenido">

		cualquier contenido

	</div>

</div>

</body>

</html>

verás que el div con la clase "contenido" se ajusta al tamaño del contenido por defecto. Si el div "contenedor" tuviese una restricción en cuanto a su altura, p.e: height:300px; el contenido rebasará la altura del contenedor.

Espero lo anterior sea de ayuda.

----------------------------------------------------------------------------------------------------------------------
.:DerangedMX:. Sitios realmente seguros con certificados de seguridad y protocolo SSL.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

posicion de capa depende del tamaño de otra

Publicado por localhost (16 intervenciones) el 09/08/2011 18:31:14

Ante todo darte las gracias DerangedMX, he comprobado lo que me dices y es más o menos lo que quiero pero en lugar de que la capa contenido por ejemplo aparezca a la derecha de la capa columna1, quiero que aparezca debajo y siempre aparezca debajo independientemente de si la capa columna1 tiene un renglón de texto o 100 renglones, quiero que se ajusta a la capa anterior, esto puede ser???

De todas formas Muchisimas gracias.

Valora esta respuesta

Comentar

posicion de capa depende del tamaño de otra

Publicado por DerangedMX (47 intervenciones) el 09/08/2011 19:07:37

La respuesta es si. Sólo depende de la maquetación del sitio y como flotes las capas. Si tienes la oportunidad de colocar un bosquejo del código con gusto te ayudo.

Saludos.

----------------------------------------------------------------------------------------------------------------------
.:DerangedMX:. Sitios realmente seguros con certificados de seguridad y protocolo SSL.

Valora esta respuesta

Comentar

posicion de capa depende del tamaño de otra

Publicado por localhost (16 intervenciones) el 10/08/2011 19:00:18

Hola de nuevo, muchas gracias nuevamente por tu brevedad y bueno voy poner más menos lo que hago y si puedes ayudarme te lo agradezco enormemente, ok??

Primero te pongo el codigo del html, ok??

<BODY>

	<!--Capa contenedor, va a tener todo el contenido de la web-->

<div id="Contenedor">

      <!--Capa editable que va a contener el cuerpo de la web-->

	  <div id="cuerpo">

     	<!-- TemplateBeginEditable name="regionEditableCuerpo" -->

		<!-- TemplateEndEditable -->

     	</div>

    <!--Capa de va a tener los enlaces a las distintas redes sociales-->

   		<div id="Redes">

			<img src="../imagenes/facebook.jpg" alt="Perfil facebook" width="60" height="60" longdesc="Enlace al perfil de facebook del dueño de Informática Galiano" />&nbsp;<img src="../imagenes/tuenti.jpg" alt="Perfil tuenti" width="60" height="60" longdesc="Enlace al perfil de Tuenti del dueño de Informática Galiano" />		</div>

<!--Capa que contendrá el pie de página-->

    	<div id="pie" align="center">

	  	  <p>&nbsp;</p>

      		<h5 class="Estilo2">Informática Galiano © copyright 2011, Aviso Legal, Política de  privacidad</h5>

   	  </div>

  <div id="barrahorizontal"></div>

</div>

</BODY>

Las capas Redes, pie y barrahorizontal, quiero q aparezcan justo a continuacion de la capa cuerpo, independientemente de lo que ocupe la capa cuerpo, puesto que esto es una plantilla.

A continuación pongo el contenido del css que contiene todas la capas.

#Contenedor {

	position: absolute;

	width: 821px;

	height: 786px;

	z-index: 1;

	top: 2px;

	left: 50%;

	background-color: transparent;

	margin-left: -410px;

#Redes {

	position:absolute;

	width:140px;

	height:65px;

	z-index:6;

	left: 683px;

	top: 615px;

/*parametros de la capa Pie de página*/

#pie {

	position:absolute;

	width:80%;

	height:85px;

	z-index:5;

	top: 690px;

	left: 10%;

/*parámetros de la capa que contiene la barra horizontal del pie de página*/

#barrahorizontal {

	position:absolute;

	width:80%;

	height:8px;

	z-index:7;

	top: 690px;

	left: 10%;

	background-image: url(./imagenes/pie.JPG);

bueno espero q no se me olvide nada que puedas necesitar en cualquier caso no tienes más que pedirmelo, ok??

Un saludo y muchas gracias.

Valora esta respuesta

Comentar

posicion de capa depende del tamaño de otra

Publicado por DerangedMX (47 intervenciones) el 10/08/2011 22:45:11

Hola localhost,

anexo este código, espero te sea de utilidad. Saludos!

<html>

<head>

<title>Test</title>

<style>

body {background:#eee; padding:0; margin:0;}

#Contenedor {width:980px; height:90%; margin:0 auto; .margin:0 10%; background:#fff;}

#cuerpo {width:700px; float:left; height:100%; min-height:300px; background:#ccc;}

#redes {width:280px; float:left; height:100%; min-height:300px; background:#e1e1e1; }

#pie {width:100%; float:left; padding:5px 0; background:fff; text-align:center;}

</style>

</head>

<body>

<BODY>

	<!--Capa contenedor, va a tener todo el contenido de la web-->

<div id="Contenedor">

      <!--Capa editable que va a contener el cuerpo de la web-->

	  <div id="cuerpo">

     	<!-- TemplateBeginEditable name="regionEditableCuerpo" -->

<p>

		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut metus elit. Aenean varius, orci eget pharetra tincidunt, leo risus venenatis arcu, sit amet fermentum magna metus at velit. Ut ac tellus in dolor suscipit interdum. Quisque ac sem leo. Mauris et nunc purus. Sed ac orci eros. Sed elementum ipsum ut sem facilisis euismod. Sed a turpis urna. Aliquam ut nisi eu odio posuere fermentum. Maecenas orci orci, mattis ut luctus sed, auctor ac eros.

		</p>

		<!-- TemplateEndEditable -->

     </div>

    <!--Capa de va a tener los enlaces a las distintas redes sociales-->

   		<div id="Redes">

			<img src="../imagenes/facebook.jpg" alt="Perfil facebook" width="60" height="60" longdesc="Enlace al perfil de facebook del dueño de Informática Galiano" />&nbsp;<img src="../imagenes/tuenti.jpg" alt="Perfil tuenti" width="60" height="60" longdesc="Enlace al perfil de Tuenti del dueño de Informática Galiano" />

		</div>

<!--Capa que contendrá el pie de página-->

    	<div id="pie">

      		<strong>Informática Galiano © copyright 2011, Aviso Legal, Política de  privacidad</strong>

   	  </div>

</div>

</BODY>

</html>

[hr][/hr]
----------------------------------------------------------------------------------------------------------------------
.:DerangedMX:. Sitios realmente seguros con certificados de seguridad y protocolo SSL.

Valora esta respuesta

Comentar

posicion de capa depende del tamaño de otra

Publicado por localhost (16 intervenciones) el 17/08/2011 19:21:49

Buenas tardes, y muchas gracias nuevamente, he probado lo que me comentas, pero en cuanto le quito la intruccion top: xxxpx; a cualquier capa se va arriba del todo, eso por que es??? no se que demonios le pasa a esto si se te ocurre algo nuevo me comentas, vale?? un saludo

Valora esta respuesta

Comentar

posicion de capa depende del tamaño de otra

Publicado por DerangedMX (47 intervenciones) el 17/08/2011 19:35:46

Saludos,

Es probable que el tema sea algún estilo genérico, es decir, que afecte a todos los div en conjunto. Lo recomendable sería ver el archivo publicado para poder revisarlo. Puedes abrir una cuenta en http://www.000webhost.com/ para probarlo.

certificados ssl
protocolo ssl

Valora esta respuesta

Comentar

posicion de capa depende del tamaño de otra

Publicado por localhost (16 intervenciones) el 17/08/2011 19:48:06

Muchas gracias encuento la tenga subida te mando la url, ahora estoy un poco parcheandola para sacarla a delante y ya después la corrijo, ok??

En cualquier caso muchas gracias por tu ayuda prestada

Valora esta respuesta

Comentar

Verificar E-mail

Cómo empezar con html5