Foros del Web - Ver Mensaje Individual - Como hacer que se ajuste el background del contenedor a 3 columnas

emprear · #3 (**permalink**) 01/01/2012, 11:13

@ferdan_2193, en primer lugar Bienvenido a FDW.
Yo más bien te diria que rehagas tu proyecto desde cero, tenes numerosos errores y exceso de código. Te propongo este modelo para trabajar (cuidado, es un modelo, seguramente tendrás que trabajar sobre anchos de columnas y otros detalles.
Para el menú, te sugiero que busques alguna guia de como hacer un menu con listas+css y sprites para los rollover.

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
div#centrar{
width: 900px;
margin: 0 auto;
}
div.cabecera{
width: 100%;
border: solid 0px #000;
height: 170px;
background: url('http://dl.dropbox.com/u/20611864/web/imagenes/cabecera.jpg');
position: relative;
}
.fl{
float: left;
height: 111px;
position:absolute; top:50%;left: 10px;
margin-top:-55px;
}
.fr{
float: right;
height: 150px;
position:absolute; top:50%;right: 10px;
margin-top:-75px;
}
div.menu {
width: 900px;
height: 29px;
margin: 0 auto;
overflow: auto;
background-color: #333;
clear: both;
}
.izquierda, .centro, .derecha {
float: left;
width: 33%;
height: 400px;
} 
.pie {
width: 100%;
height: 50px;
background-color: #666;
margin-top: 20px;
}
.limpiar {
clear: both;
}
/*]]>*/
</style>
</head>
<body>
<div id="centrar">
 
<div class="cabecera">
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/logoev.png" alt="" class="fl"/>
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/fmstyle.png" alt="" class="fr"/>
</div>
<div class="menu">Menú con listas + sprites para el efecto hover</div>
<div class="izquierda">Izquierda</div>
<div class="centro">Centro</div>
<div class="derecha">Derecha</div>
<div class="limpiar"><!-- rompemos los floats para agregar un pie --></div>
 
<div class="pie">
PIE
</div>
</div> <!-- fin centrado -->
</body>
</html>

SAludos