Problema con divs 3 columnas pagina web Pero hasta ahora lo unico que he logrado es lo siguiente:[URL="http://www.lisandroscofano.com.ar/estudios%20-%20Copy.html"]Intento con CSS[/URL]
Les pego el codigo CSS para ver como pueden ayudarme, creo que la idea es que haya una cabecera, un pie y luego 3 columnas, una con los botones de navegacion a la izquierda, otra con los subtitulos de mi CV y la tercera a la derecha con la descripcion de este subtitulo.
Código:
El tema de los tributos de cada parte lo pude lograr bien, lo que se me complica es ubicar cada elemento en la pagina... Bueno si alguien tiene ganas de ayudarme se los agradecere muchisimo!!! Saludos!<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formacion Academica</title>
<style type="text/css">
<!--
body {
background-image: url(tapiz.jpg);
font-family: Helvetica57-Condensed, Helvetica-CondensedLight;
}
.titulo {
color: #35c012;
}
.contenido {
color: #FFFFFF;
}
.copyright a {
text-decoration: none;
color: #000000;
}
#botonera {
float: left;
width: 150px;
}
#texto {
float: right;
width: 500px;
}
#contenedor {
width: 1000px;
margin: auto;
text-align: left;
}
#principal {
margin-left: 180px;
margin-right: 510px;
}
#univ {
position: absolute;
top: 70px;
left: 180px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('iniciob.gif','estudiosb.gif','formacionb.gif','idiomasb.gif','experienciab.gif','contactob.gif')">
<div id="contenedor">
<img src="encabezado.gif" width="1000" height="120" />
<div id="botonera"
<table width="977" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="95" height="310"><table width="154" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="154"><img src="ajuste.gif" width="150" height="25" /></td>
</tr>
<tr>
<td><a href="index.html" target="_self" onmouseover="MM_swapImage('inicio','','iniciob.gif',1)" onmouseout="MM_swapImgRestore()"><img src="inicioa.gif" name="inicio" width="150" height="25" border="0" id="inicio" /></a></td>
</tr>
<tr>
<td><img src="ajuste.gif" width="150" height="20" /></td>
</tr>
<tr>
<td><a href="estudios.html" target="_self" onmouseover="MM_swapImage('estudios','','estudiosb.gif',1)" onmouseout="MM_swapImgRestore()"><img src="estudiosa.gif" name="estudios" width="150" height="25" border="0" id="estudios" /></a></td>
</tr>
<tr>
<td><img src="ajuste.gif" alt="" width="150" height="20" /></td>
</tr>
<tr>
<td><a href="formacion.html" target="_self" onmouseover="MM_swapImage('formacion','','formacionb.gif',1)" onmouseout="MM_swapImgRestore()"><img src="formaciona.gif" name="formacion" width="150" height="25" border="0" id="formacion" /></a></td>
</tr>
<tr>
<td><img src="ajuste.gif" width="150" height="20" /></td>
</tr>
<tr>
<td><a href="idiomas.html" target="_self" onmouseover="MM_swapImage('idiomas','','idiomasb.gif',1)" onmouseout="MM_swapImgRestore()"><img src="idiomasa.gif" name="idiomas" width="150" height="25" border="0" id="idiomas" /></a></td>
</tr>
<tr>
<td><img src="ajuste.gif" width="150" height="20" /></td>
</tr>
<tr>
<td><a href="experiencia.html" target="_self" onmouseover="MM_swapImage('experiencia','','experienciab.gif',1)" onmouseout="MM_swapImgRestore()"><img src="experienciaa.gif" name="experiencia" width="150" height="25" border="0" id="experiencia" /></a></td>
</tr>
<tr>
<td><img src="ajuste.gif" width="150" height="20" /></td>
</tr>
<tr>
<td><a href="contacto.html" target="_self" onmouseover="MM_swapImage('contacto','','contactob.gif',1)" onmouseout="MM_swapImgRestore()"><img src="contactoa.gif" name="contacto" width="150" height="25" border="0" id="contacto" /></a></td>
</tr>
<tr>
<td><img src="ajuste.gif" width="150" height="40" /></td>
</tr>
</table></td>
</div>
<div id="principal">
<div id="univ"><span class="titulo">Estudios Universitarios</span>
</div>
<div id="secun"><span class="titulo">Estudios Secundarios</span>
</div>
<div class="prim"><span class="titulo">Estudios primarios</span>
</div>
</div>
<div id="texto">
<p><span class="contenido">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</span></p>
<p><span class="contenido">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</span></p>
<p><span class="contenido">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</span>
<br><br><span class="contenido">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</span></p>
</div>
<div align="center"><span class="copyright">Copyright @ 2012 . dsadasdasdasd - Arquitecto - Tel. xxxxxxxxxx - <a href="contacto.html" target="_self">Contacto</a></span></div>
</div>
</body>
</html>
