Hola,
En primer lugar, enhorabuena a todos lo que participáis normalmente en los foros porque nos resolvéis muchísimas dudas a otros...
Llevo dos días intentándome pasar al maquetado con divs y css en vez de con tablas...
Al grano, os presento por un lado los divs anidados de la página, creo que esta bien pero seguro que puede haber algún fallo de anidación. El caso es que la web lleva cabecera, menú, y un cuadrado en el que se engloba el texto. Eso con tablas, sin problemas...pero con las capas el problema que tengo es tengo que separlo por capas:
Lo que he hecho es: (por divs): cabecera, menu, barrasup, contenido (dentro: barradcha(float left), barra izda(float right)y principal (con margen), barra inf y pie. Por tanto, quiero que la imagen de fondo en las laterales (la imagen de la barra) este determinada en función del height del div id "principal" (en el que va el texto). Acbo de reeditar el post porque no veia qie estiviera muy claro,
Creo que me he podido hacer un lío al intentar convertir de tablas a capas...al no tener vision de su diseño. Sabéis como pueo hacerlo, el resultado final está en el link de abajo sólo que maquetado con tablas...
Os dejo el htm:
Código PHP:
<div id="contenedor">
<div id="cabecera">
Cabecera
</div>
<div id="menu">
menu
</div>
<div id="barrasup">
barra sup
</div>
<div id="cuerpo">
<div id="barraizda">i</div>
<div id="barradcha">d</div>
<div id="principal">
LLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa cursus ullamcorper. Donec quis justo. Pellentesque fermentum. Etiam pharetra, ipsum eget faucibus malesuada, ante elit tristique nibh, ut commodo sem dolor aliquam ante. Aliquam ut leo rhoncus arcu dictum sodales. Morbi viverra, dui vel mollis iaculis, urna libero tincidunt leo, nec interdum ligula lacus congue lacus. Nam porttitor, nibh quis scelerisque lobortis, neque diam consectetuer magna, sit amet mattis diam quam vitae erat. Donec wisi tortor, lacinia et, blandit nec, semper nec, urna. Aliquam erat volutpat.
<p> Aliquam erat volutpat. Sed ac augue non libero commodo lacinia. Morbi molestie augue at felis. Mauris ornare, est ac imperdiet vehicula, tortor dui sagittis lacus, sed tempor lorem tellus ut turpis. Donec dui est, rhoncus sit amet, bibendum sed, rutrum sit amet, ligula. Suspendisse ac sapien ac mi posuere rutrum. Vivamus sollicitudin, mi eu vehicula convallis, sem magna blandit purus, id pellentesque augue dui vitae urna. Nam imperdiet. Curabitur libero. Suspendisse sodales sem in nunc. Proin diam augue, nonummy non, posuere in, lacinia eget, pede. Pellentesque felis sem, cursus mattis, commodo et, condimentum egestas, quam. Morbi lacinia. Praesent pulvinar elit vitae arcu. Integer sagittis metus ut justo. Etiam pharetra adipiscing nunc. </p>
<p> Etiam sodales nulla non neque. Duis porttitor faucibus leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ipsum nunc, sodales nec, faucibus quis, euismod at, arcu. Phasellus id odio. Aenean nibh mauris, venenatis eget, commodo id, gravida ut, arcu. Pellentesque dui metus, nonummy sit amet, aliquet sed, pretium sit amet, diam. Sed dapibus rhoncus sem. Integer blandit elit at mauris. Praesent vel nunc a massa lacinia pharetra. Etiam nibh arcu, rhoncus a, ultrices et, feugiat in, ipsum. Phasellus suscipit tincidunt urna. </p>
<p> Vivamus mattis eros euismod lectus. Suspendisse potenti. Vestibulum justo odio, ullamcorper a, semper in, eleifend non, turpis. Nunc urna pede, blandit vehicula, gravida at, luctus a, leo. Nulla facilisi. Etiam vitae elit ut nisl tempor pretium. Aliquam erat volutpat. Fusce molestie commodo wisi. Proin pretium libero in eros. Donec blandit. Mauris blandit, ligula non convallis laoreet, sapien nunc elementum metus, eu accumsan sapien est sollicitudin mauris. Aliquam vulputate. Nulla eget massa quis sapien pulvinar ornare. Integer suscipit magna eget orci. Sed rutrum adipiscing tortor. Donec aliquet dapibus neque. Aliquam sed arcu non est sollicitudin lobortis. </p>
<p> Sagittis lacus, sed tempor lorem tellus ut turpis. Donec dui est, rhoncus sit amet, bibendum sed, rutrum sit amet, ligula. Suspendisse ac sapien ac mi posuere rutrum. Vivamus sollicitudin, mi eu vehicula convallis, sem magna blandit purus, id pellentesque augue dui vitae urna. Nam imperdiet. Curabitur libero. Suspendisse sodales sem in nunc. Proin diam augue, nonummy non, posuere in, lacinia eget, pede. Pellentesque felis sem, cursus mattis, commodo et, condimentum egestas, quam. Morbi lacinia. Praesent pulvinar elit vitae arcu. Integer sagittis metus ut justo. Etiam pharetra adipiscing nunc. </p>
<p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ipsum nunc, sodales nec, faucibus quis, euismod at, arcu. Phasellus id odio. Aenean nibh mauris, venenatis eget, commodo id, gravida ut, arcu. Pellentesque dui metus, nonummy sit amet, aliquet sed, pretium sit amet, diam. </p>
</div>
</div>
<div id="barrainf">
barra inf
</div>
<div id="pie">
© 2008 patatin patatan
</div>
</div>
Y el css:
Código PHP:
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0;
text-align: center;
background-color: #737373;
}
#contenedor{
text-align: left;
width: 1000px;
margin: auto;
}
#cabecera{
background-color: #735673;
width:1000px;
height:160px;
padding: 0;
}
#menu{
width:1000px;
height:38px;
background: #30F;
}
#barrasup{
width:1000px;
height:8px;
background-color:#999;
}
#cuerpo{
width:1000px;
height:auto;
}
#barraizda{
width: 16px;
background: #999;
float:left;
}
#barradcha{
width:15px;
height:100%;
float: right;
background: #999;
}
#principal{
margin-left: 16px;
background: #fff;
padding:0;
width: 969px;
}
#barrainf{
width:1000px;
height:18px;
background-color:#999;
}
#pie{
background-color: #ccc;
padding:0;
text-align:center;
clear: both;
}
Y bueno, antes de pasarme a capas la he hecho en tablas, de momento hasta que pueda cambiarlo, a excepción del menu que si que es con css.
Os dejo lo web acabada por si os ayudara:
http://cursos.anfap.com/60user0874/web/es/web.html
Muchas gracias de antemano...
Aresillo!!