Tengo un par de problemillas:
1.- no consigo que el div content se me adapte automaticamente a la altura cuando diviso o oculto algun div
2.-no consigo que el footer siempre se me vea abajo de cualquier contenido.
El codigo es el siguiente :
HTML :
Código:
CSS:<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>
<a onClick='mostrar("capa",2,6)'>Instalaciones.</a>
<a onClick='mostrar("capa",3,6)'>Mantenimiento.</a>
<a onClick='mostrar("capa",4,6)'>Montaje de cuadros eléctricos.</a>
<a onClick='mostrar("capa",5,6)'>Fabricación de bobinas toroidales.</a>
<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="http://www.forosdelweb.com/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="http://www.forosdelweb.com/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="http://www.forosdelweb.com/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="http://www.forosdelweb.com/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="http://www.forosdelweb.com/images/CUADRO-DISTRIBUCIONmini.jpg" alt="Traslado" border="0"/></td>
<td width="205px"><img src="http://www.forosdelweb.com/images/MONTAJE-SERIES-1mini.jpg" alt="Traslado" border="0"/></td>
<td width="225px"><img src="http://www.forosdelweb.com/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="http://www.forosdelweb.com/images/PLANO-BOBINAmini.jpg" alt="Plano bobina" border="0"/></td>
<td width="205px"><img src="http://www.forosdelweb.com/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="http://www.forosdelweb.com/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="http://www.forosdelweb.com/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="http://www.forosdelweb.com/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>
Código:
la cuestion de los divs es que se vean debajo de los links, es decir que visiono uno, cuando quiero ver el otro que se vea encima, en la misma posicion. NO SE SI ME EXPLICO espero que si.#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!!!!
