Foros del Web - Ver Mensaje Individual

lisi1986 · #1 (**permalink**) 24/08/2012, 13:18

Hola a todos, resulta que soy de la escuela antigua del diseño de sitios web con tablas y me estoy queriendo actualizar al tema de los div y las posiciones absolutas. Despues de estar todo el dia leyendo tutoriales y haciendo prueba-error, no pude lograr un layout como esperaba. Mi pagina deberia quedar de la siguiente forma:[URL="http://www.lisandroscofano.com.ar/estudios%20-%20Copy%20%282%29.html"]Pagina hecha con tablas[/URL]

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:

<!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>

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!