Entrar

¿que se hace para que una capa superior desplace a una infer

Tania · · Solicitar retirada
Estoy haciendo pruebas con las capas, para ver si me aclaro
Este es el código de css:


Body{
background-color:#151b8d;
font-size:12px;
font-family:Georgia1, Georgia, serif;
font-weight:bold;
text-align:center;

}
P {PADDING: 5px 10px 5px 10px}

#global {BACKGROUND-COLOR:#ffffff ;
position:absolute;
width:800px;
height:600px;
left:25px;
top:25px;
}
#logotipo{BACKGROUND-COLOR:#00ce89 ;
FLOAT:left;
position:absolute;
left:0px;
top:0px;
width:125px;
height:80px;
}
#menusuperior {BACKGROUND-COLOR:#0cd003 ;
FLOAT:righ;
position:absolute;
left:125px;
top:0px;
width:675px;
height:50px;
}
#capainformativa{BACKGROUND-COLOR:silver;
FLOAT:righ;
position:absolute;
left:125px;
top:50px;
width:675px;
height:30px;
}
#linea{
BACKGROUND:url(linea.gif);
position:absolute;
left:0px;
top:80px;
width:800px;
height:9px;
}
#menulateral {BACKGROUND-COLOR:pink;
FLOAT:left;
position:absolute;
left:0px;
top:92px;
width:125px;
height:508px;
}
#volver {BACKGROUND-COLOR:#0dd006 ;
FLOAT:righ;
position:absolute;
left:125px;
top:580px;
width:675px;
height:21px;
}
#firma{BACKGROUND-COLOR:green ;
FLOAT:righ;
position:absolute;
left: 25px;
top:625px;
width:800px;
height:20px;
}

#contenido {BACKGROUND-COLOR:#123005 ;

position:absolute;
left:125px;
top:95px;
width:675px;

}




Y este el de html:

<HTML>
<HEAD><TITLE>CON CAPAS</TITLE></HEAD>
<link rel="StyleSheet" media="screen" type="text/css" href="estilodiv.css">
<BODY>
<DIV id="global">
<div id="logotipo">logotipo</div>
<div id="menulateral">menu lateral</div>
<div id="capainformativa">capa informativa</div>
<div id="linea">donde estas que no te veo</div>
<div id="menusuperior">menu superior</div>
<div id="contenido">contenido
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a


</DIV>
<div id="volver">volver</div>
<div id="firma">firma</div>
</BODY>
</HTML>

Ya he probado a quitarles la altura, a anidarlas, a poner
debajo de las capas
a que las lea antes o despues en la hoja de estilos y: o se monta o pasa por debajo.

Tania · · Solicitar retirada
quiero que cuando escribo en la capa contenido esta al llegar al final ni se me monte en la capa pie ni pase por debajo, simplemente la desplace
Tania · · Solicitar retirada
Vale, pues quitandole la posicion absoluta no me las va desplazando, me las sube arriba
Jugoncan · · Solicitar retirada
Fíjate como va tomando forma, lo importante es poner en la hoja html la capas en orden, y las que tienen float dentro de otras capas:

Código html:

<HTML>
<HEAD><TITLE>CON CAPAS</TITLE></HEAD>
<link rel="StyleSheet" media="screen" type="text/css" href="estilodiv.css">
<BODY>
<DIV id="global"> <div>
<div id="logotipo">logotipo</div>
<div id="menusuperior">menu superior</div>
<div id="capainformativa"> capa informativa</div></div>
<div id="linea">donde estas que no te veo</div>
<div><div id="menulateral">menu lateral</div>
<div id="contenido">contenido
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
</DIV> </div>
<div id="volver">volver</div>
<div id="firma">firma</div>
</BODY>
</HTML>


estilodiv.css


Body{
background-color:#151b8d;
font-size:12px;
font-family:Georgia1, Georgia, serif;
font-weight:bold;
text-align:center;

}
P {PADDING: 5px 10px 5px 10px}

#global {BACKGROUND-COLOR:#ffffff ;
width:800px;
height:600px;
}
#logotipo{BACKGROUND-COLOR:#00ce89 ;
FLOAT:left;
width:125px;
height:80px;
}
#menusuperior {BACKGROUND-COLOR:#0cd003 ;
FLOAT:right;
width:675px;
height:50px;
}
#capainformativa{BACKGROUND-COLOR:silver;
FLOAT:right;
width:675px;
height:30px;
}
#linea{
BACKGROUND:url(linea.gif);
width:800px;
height:9px;
}
#menulateral {BACKGROUND-COLOR:pink;
FLOAT:left;
width:125px;
height:508px;
}
#volver {BACKGROUND-COLOR:#0dd006 ;
FLOAT:righ;
width:675px;
height:21px;
}
#firma{BACKGROUND-COLOR:green ;
FLOAT:righ;
width:800px;
height:20px;
}

#contenido {BACKGROUND-COLOR:#123005 ;
float: right;
width:675px;

}



Saludos, Juanma
Tania · · Solicitar retirada
Muchas gracias jugoncan, lo he probado y funciona, en la prueba. Ahora a ver si lo adapto a la página que a estas horas tiene muchísimos cambios. Lo he intentado (los que tienen float dentro de otra capa) pero se me ha ido todo a tomar por saco :cry: menos mal que tenía copia. He visto que has abierto un div donde englobas el contenido y el menu lateral que son los dos que pueden crecer y "molestar" a la capa firma y a la capa volver. Ese no lleva nombre (no sabía que se pudiese hacer. Y hay más menús que llevan float y no los has metido entre div.
¿Los de los que llevan float en otra capa es una regla?
Tania · · Solicitar retirada
Uf, lo siento,se me olvidó
dar al enter. Es que ya no estoy para mirar más pantallas. Contestame si puedes porfa, y mañana me lo miro. Gracias.
Tania · · Solicitar retirada
Bueno ya lo he hecho. He englobado las partes fijas de arriba en una capa, las moviles (menulateral y contenido) en otra, lo he cambiado de posicion en la hoja de estilos. He puesto los float (excepto a los cuatro enlaces porque no se donde ponerlos a flotar, estan en medio) Y ahora se me quedan las dos lines que deberian estar abajo arriba. La página la habia modificado mucho, pero en esencia es lo mismo. Mira.
Body{
background-IMAGE:url(fondo.jpg);
font-size:12px;
font-family:Georgia1, Georgia, serif;
font-weight:bold;
text-align:center;
}
a{
font-size:15px;
font-family:Arial;
text-decoration:none;
color:#000000;
}
a:link{

}
a:visited{
font-size:15px;
font-family:Arial;
text-decoration:none;
color:#000000;
}
a:hover{
font-size:15px;
font-family:Arial;
text-decoration:none;
color:#ffffff;
}
a:active{
font-size:15px;
font-family:Arial;
text-decoration:none;
color:#000000;
}
table{
width:700px;
text-align:center;

}
td{
border-width:2px;
border-style:inset;
text-align:center;
background-color:#3bb9ff;
padding:8px;
}
P {PADDING: 5px 10px 5px 10px}

#global {BACKGROUND-COLOR:transparent;
border-width:0px;
position:absolute;
width:800px;
height:600px;
left:25px;
top:25px;
}
#logotipo{
FLOAT:left;
text-align:center;
font-size:70px;
font-family:monotype corsiva, ludida calligraphy;
font-style:italic;
color:black;
position:absolute;
left:0px;
top:0px;
width:125px;
height:80px;
}
#enlaces{
position:absolute;
width:675px;
top:0px;
left:0px;
height:60px;
}
#inicio{
position:absolute;
width:149px;
top:0px;
left:125px;
height:50px;
border-style:inset;
padding:10px;
}
#bandas{
position:absolute;
width:149px;
top:0px;
left:274px;
height:50px;
border-style:inset;
padding:10px;
}
#conservatorios{
position:absolute;
width:189px;
top:0px;
left:423px;
height:50px;
border-style:inset;
padding:10px;
}
#instrumentos{
position:absolute;
width:187px;
top:0px;
left:612px;
height:50px;
border-style:inset;
padding:10px;
}
#capainformativa{
FLOAT:righ;
position:absolute;
width:675px;
top:54px;
left:125px;
height:25px;
border-style:outset;
padding:1px;
text-align:center;
}
#linea{ BACKGROUND:url(linea.gif);
position:absolute;
left:0px;
top:80px;
width:800px;
height:9px;
}


#volver {BACKGROUND-COLOR:#0dd006 ;
FLOAT:righ;
left:125px;
top:580px;
width:675px;
height:20px;
}
#firma{BACKGROUND-COLOR:green ;
FLOAT:righ;
left: 0px;
top:600px;
width:800px;
height:20px;
}
#menulateral {BACKGROUND-COLOR:transparent;
FLOAT:left;
position:absolute;
left:0px;
top:100px;
width:125px;
height:505px;
}
#contenido {
FLOAT:righ;
BACKGROUND-COLOR:transparent;
position:absolute;
left:125px;
top:100px;
width:675px;
}
------------------------------------------------------------
<HTML>
<HEAD><TITLE>CON CAPAS</TITLE></HEAD>
<link rel="StyleSheet" media="screen" type="text/css" href="estilodiv.css">
<BODY>

<DIV id="global"><DIV>
<div id="logotipo">TR</div>

<div id="enlaces">
<div id="inicio">

INICIO</p></div>
<div id="bandas">

BANDAS</p></div>
<div id="conservatorios">

CONSERVATORIOS</p></div>
<div id="instrumentos">

INSTRUMENTOS</p></div>
</div>

<div id="capainformativa">BANDAS</div></DIV>
<div id="linea"></div>
<DIV>
<div id="menulateral"></div>


<div id="contenido">

Alava ·
Albacete ·
Alicante ·
Almer&iacute;a ·
Asturias ·
Avila ·
Badajoz ·
Baleares ·
Barcelona ·
Burgos ·
C&aacute;ceres ·
C&aacute;diz ·
Cantabria ·
Castell&oacute;n ·
Ceuta ·
Ciudad Real ·
C&oacute;rdoba ·
La Coru&ntilde;a ·
Cuenca ·
Gerona ·
Granada ·
Guadalajara ·
Guipuzcoa ·
Huelva ·
Huesca ·
Ja&eacute;n ·
Le&oacute;n ·
L&eacute;rida ·
Lugo ·
Madrid ·
M&aacute;laga ·
Melilla ·
Murcia ·
Navarra ·
Orense ·
Palencia ·
Las Palmas de Gran Canaria ·
Pontevedra ·
La Rioja ·
Salamanca ·
Santa Cruz de Tenerife ·
Segovia ·
Sevilla ·
Soria ·
Tarragona ·
Teruel ·
Toledo ·
Valencia ·
Valladolid ·
Vizcaya ·
Zamora ·
Zaragoza </p>



[contenido no disponible]<map id="mapa">
<area shape="poly" coords="216,53,214,39,225,38,232,47,232,58" href="alava.html" alt="Alava"/>
<area shape="poly" coords="222,198,246,203,264,196,273,202,274,212,285,222,272,227,261,240,255,240,235,254,236,243,222,213" href="albacete.html" alt="Albacete"/>
<area shape="poly" coords="289,260,281,227,309,214,322,221,323,226" href="alicante.html" alt="Alicante"/>
<area shape="poly" coords="215,307,249,311,266,281,253,276,250,261,243,261,217,296" href="almeria.html" alt="Almer&iacute;a"/>
<area shape="poly" coords="147,119,160,124,165,139,175,144,163,163,142,167,127,154,147,128" href="avila.html" alt="Avila"/>
<area shape="poly" coords="75,197,83,191,93,201,103,200,114,208,161,192,160,205,151,211,152,226,144,222,137,232,129,235,129,249,111,255,83,241,76,238,72,224,80,210" href="badajoz.html" alt="Badajoz"/>
<area shape="poly" coords="414,162,392,181,415,197,429,177" href="baleares.html" alt="Islas Baleares"/>
<area shape="poly" coords="363,63,374,75,383,76,382,85,391,95,379,108,363,113,353,98" href="barcelona.html" alt="Barcelona"/>
<area shape="poly" coords="173,64,180,52,186,52,189,41,202,36,211,44,209,47,214,57,209,79,213,86,199,99,188,102,179,93,184,86,184,76" href="burgos.html" alt="Burgos"/>
<area shape="poly" coords="85,157,98,157,108,152,137,166,145,192,115,206,103,197,93,198,81,188,73,195,66,183,82,173" href="caceres.html" alt="C&aacute;ceres"/>
<area shape="poly" coords="103,303,142,301,132,315,137,326,127,338,105,318,99,309" href="cadiz.html" alt="C&aacute;diz"/>
<area shape="poly" coords="284,172,299,155,306,140,317,137,325,146,307,177,294,178" href="castellon.html" alt="Castell&oacute;n"/>
<area shape="poly" coords="154,224,152,212,162,206,162,193,170,191,190,201,209,195,217,199,219,215,226,232,175,240" href="ciudadreal.html" alt="Ciudad Real"/>
<area shape="poly" coords="144,223,174,240,168,255,170,262,177,277,183,279,167,285,154,284,148,266,132,272,132,253,127,250,129,237,141,232" href="cordoba.html" alt="C&oacute;rdoba"/>
<area shape="poly" coords="34,47,61,40,60,30,65,12,54,8,16,28,22,41" href="lacoruna.html" alt="La Coru&ntilde;a"/>
<area shape="poly" coords="211,169,215,163,241,142,249,146,256,161,264,162,274,172,264,194,253,201,225,197" href="cuenca.html" alt="Cuenca"/>
<area shape="poly" coords="364,64,374,73,385,76,385,86,393,94,413,78,406,58" href="gerona.html" alt="Gerona"/>
<area shape="poly" coords="169,287,180,304,193,312,215,305,215,295,243,261,230,255,219,272" href="granada.html" alt="Granada"/>
<area shape="poly" coords="198,122,206,112,224,112,236,121,249,121,262,135,261,143,249,146,240,141,214,161,198,122" href="guadalajara.html" alt="Guadalajara"/>
<area shape="poly" coords="236,44,228,36,232,29,250,29,243,38" href="guipuzcoa.html" alt="Guipuzcoa"/>
<area shape="poly" coords="65,283,62,269,71,251,86,243,108,255,97,266,99,303,84,284" href="huelva.html" alt="Huelva"/>
<area shape="poly" coords="282,49,328,53,328,78,319,96,318,110,287,84,281,59" href="huesca.html" alt="Huesca"/>
<area shape="poly" coords="176,241,227,234,233,243,228,253,216,271,199,271,185,279,173,265,170,256" href="jaen.html" alt="Ja&eacute;n"/>
<area shape="poly" coords="93,68,136,81,151,73,152,58,159,37,156,28,142,36,125,37,117,37,93,44,87,54,87,59" href="leon.html" alt="Le&oacute;n"/>
<area shape="poly" coords="323,110,353,96,361,61,330,47,346,51,330,49,330,79,322,95" href="lerida.html" alt="L&eacute;rida"/>
<area shape="poly" coords="214,80,211,71,216,58,234,61,257,73,253,84,235,73,223,81" href="larioja.html" alt="La Rioja"/>
<area shape="poly" coords="63,56,64,27,72,8,82,14,90,40,81,61" href="lugo.html" alt="Lugo"/>
<area shape="poly" coords="196,121,171,159,194,171,212,165" href="madrid.html" alt="Madrid"/>
<area shape="poly" coords="138,324,134,315,157,285,165,285,179,306" href="malaga.html" alt="M&aacute;laga"/>
<area shape="poly" coords="238,255,256,242,263,246,269,229,280,228,293,271,267,280,254,275" href="murcia.html" alt="Murcia"/>
<area shape="poly" coords="252,29,280,48,259,84,256,75,233,58,238,54,236,47" href="navarra.html" alt="Navarra"/>
<area shape="poly" coords="58,56,51,62,54,71,48,85,76,89,93,68,87,60,74,64" href="orense.html" alt="Orense"/>
<area shape="poly" coords="83,16,94,44,118,35,127,37,144,35,153,27,165,23,129,13" href="asturias.html" alt="Asturias"/>
<area shape="poly" coords="160,39,172,39,177,54,174,64,182,77,178,90,153,82,155,54" href="palencia.html" alt="Palencia"/>
<area shape="poly" coords="367,400,377,379,459,330,443,396" href="canarias.html" alt="Las Palmas de Gran Canaria"/>
<area shape="poly" coords="29,79,34,49,61,43,62,57,54,55,52,62,52,72" href="pontevedra.html" alt="Pontevedra"/>
<area shape="poly" coords="90,156,96,156,108,148,120,154,127,150,146,126,144,118,104,115,90,120,88,127" href="salamanca.html" alt="Salamanca"/>
<area shape="poly" coords="286,401,292,348,363,361,350,400" href="tenerife.html" alt="Santa Cruz de Tenerife"/>
<area shape="poly" coords="179,49,173,34,162,30,165,23,193,20,204,22,200,33,187,35,187,45" href="cantabria.html" alt="Cantabria"/>
<area shape="poly" coords="176,140,165,134,163,124,159,120,169,108,199,100,203,110,184,130" href="segovia.html" alt="Segovia"/>
<area shape="poly" coords="111,257,100,266,103,301,142,300,154,285,148,269,131,273,132,263,132,255,126,251" href="sevilla.html" alt="Sevilla"/>
<area shape="poly" coords="238,120,225,111,206,107,202,98,217,82,226,81,235,78,250,89,239,108" href="soria.html" alt="Soria"/>
<area shape="poly" coords="317,119,322,112,352,98,361,115,337,126,337,140,326,148,320,135" href="tarragona.html" alt="Tarragona"/>
<area shape="poly" coords="257,127,275,120,285,121,294,112,317,121,319,136,305,139,282,170,276,171,263,162,257,161,250,146,260,142,263,134" href="teruel.html" alt="Teruel"/>
<area shape="poly" coords="141,169,150,194,172,188,191,199,209,193,221,195,209,166,193,174,171,162" href="toledo.html" alt="Toledo"/>
<area shape="poly" coords="276,173,283,172,294,179,308,179,309,213,286,220,277,212,276,201,268,191" href="valencia.html" alt="Valencia"/>
<area shape="poly" coords="159,119,141,116,142,77,149,74,152,83,184,95,178,103,164,107" href="valladolid.html" alt="Valladolid"/>
<area shape="poly" coords="215,34,207,25,224,23,230,29,225,38" href="vizcaya.html" alt="Vizcaya"/>
<area shape="poly" coords="107,109,115,94,89,78,97,69,138,81,139,117" href="zamora.html" alt="Zamora"/>
<area shape="poly" coords="242,119,242,111,246,107,251,88,263,87,265,76,279,51,286,85,299,98,320,114,313,117,296,111,284,119,266,120,259,128" href="zaragoza.html" alt="Zaragoza"/>
<area shape="poly" coords="127,364,135,344,149,360" href="ceuta.html" alt="Ceuta"/>
<area shape="poly" coords="179,386,203,370,220,379,212,388" href="melilla.html" alt="Melilla"/>
</map></p>
</DIV></DIV>
<div id="volver">volver</div>
<div id="firma">firma</div>
</BODY>
</HTML>
Jugoncan · · Solicitar retirada
Las capas contenido y menu lateral las metí en una misma porque
estaban en el mismo sitio respecto a arriba y abajo.
Para que una esté a la izquierda le puse float: left y a la otra float: right
Si quieres que una quede enmedio no se le pone float.
¿Ahora que es lo que quieres hacer?¿Le queda algun problema?
Saludos, Juanma
Tania · · Solicitar retirada
Todo eso lo hice, y a las intermedias ante la duda no les puse nada. Ele problema es que el pie de págna y la capa volver se me han subido arriba con esa solucion. Claro que yo ya habia quitado el alto de las capas para que pudiesen desplazarse, pero como vi que en tu solucion no le ponias alto no les puse.
Resumiendo, que no es que quiera hacer nada ahora, es que ahora no estan en su sitio, estan arriba.
Jugoncan · · Solicitar retirada
He visto que no quitaste las posiciones absolutas en el nuevo código. Respecto a las capas, sin posición absoluta, las debes poner en el código en el orden que quieran que te aparezcan.
Saludos, Juanma
Tania · · Solicitar retirada
Me vas a llamar pesada pero....hablamos siempre de las dos de abajo.
Con posicion absoluta se quedan abajo pero conforme crecen
las otras no se mueven, así que las de menu lateral y contenido
las pasan por debajo.
Si les quito la posicion absoluta se suben arriba aunque tanto
en la hoja de estilo como en el codigo las ponga donde deben ir
Yaneth · · Solicitar retirada
Hola he mirado los codigos, y me enrredé toda jejej

creo que jugoncan te dió una buena solución

yo hice otra prueba, y me quedó asi:

<HTML>
<HEAD><TITLE>CON CAPAS</TITLE></HEAD>
<link rel="StyleSheet" media="screen" type="text/css" href="estilo2.css">
<body>
<div id="global">
<div id="cabecera">
<div id="logotipo">logotipo</div>
<div id="menusuperior">menu superior</div>
<div id="capainformativa">capa informativa</div>
</div>
<div id="linea">.</div>
<div id="menulateral">menu lateral</div>
<div id="contenido">contenido
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a


</div>
<div id="volver">volver</div>
<div id="firma">firma</div>
</div>

</BODY>
</HTML>

estilo2.css
body {background-color:#151b8d; text-align:center}

#global {background-color:yellow;
width:800px; text-align:center}

#cabecera {width:800px;
height:80px; background-color:#CCFFFF}

#logotipo {background-color:#00ce89 ;
width:125px;
height:80px;
float:left}

#menusuperior {background-color:#0cd003 ;
width:675px;
height:50px;
float:left}

#capainformativa{background-color:silver;
width:675px;
height:30px;
float:left}
#linea {background-color:#FF3399;
width:800px;
height:15px;}

#menulateral {BACKGROUND-COLOR:pink;
float:left;
width:125px;
height:508px;}

#contenido {background-color:#123005 ;
width:675px;
float:left}

#volver {background-color:#0dd006 ;
width:670px;
height:21px;
float:left}

#firma{background-color:green ;
width:800px;
height:20px;
float:right}



checalo y nos avisas

saludos
Tania · · Solicitar retirada
Gracias yaneth,sí, la solución de jugoncan funciona, con ese código que fue la prueba que hice ayer cuando empecé a ver las capas. Pero cuando la adapto a mi pagina es cuando no funciona. En realidad la capa cabecera la cree solo para englobar a ver si así podia cuadrarlas pero ya......... Bueno, ya he subido la página, he tenido que renunciar al pie y poner el inicio arriba solamente. Si quieres echale un vistazo. Yo ire probando, pero debe de haber una formula no?
Tania · · Solicitar retirada
Sí, funciona. Todas son relativas, incluso la global y la cabecera. Sólo tiene float el menú lateral
(no entiendo como no lo tiene el logo) y funciona ¿no entiendo nada, cual es la regla?


PERDONA, ante todo tenía que haberos daro las gracias