Hola.
Hoy encontré este post, y seguí la ayuda del sitio
http://www.satzansatz.de/cssd/columnswapping.html, pero más exactamente
el ejemplo que se trabaja con dos columnas de diferentes anchos:
http://www.satzansatz.de/cssd/columnswappingrevisited.html
El artículo dice que en teoría debería funcionar reemplazando las
medidas de em por px, pero cuando lo hago se desarma todo.
¿alguien intentó hacer el cambio?
Les pego el html casi como lo dan ellos (porque le saqué algunas cosas y
ordené un poco el código):
/*******************************************************************************************************************/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd";>
<html>
<head>
<title>columnswapping revisited</title>
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Chao">
<style type="text/css">
<!--
body { margin: 2.5% 0 2.5% 0; padding: 0; font: 100%/1.5em arial,
helvetica, sans-serif; color: #000; background: #fff; }
.ccontainweb { width: 100%; text-align: center; background: #f7f7f7;
margin: 0; padding: 0; }
.ccontainpage { padding: 2% 2.5% 3% 2.5%; margin: 0 auto; width: 90%;
text-align: left; background: #999999; border: 1px solid #8F8F8F; }
.header{ text-align: center; background: #CCCCCC; }
.footer{ background: #CCCCCC; }
/* columnswapping ---------------------------*/
.wrapper{ width: 40em; margin: 0 auto; padding: 0; }
/* containers stay at their origin */
.containerRight{ float: right; width: 25em; margin: 0; padding: 0;
background: #A9A9D4 url(line.png) repeat-y 0.4em top; }
/* IE6win overflow solution by Thomas Berregren, hidden from IE5mac \*/
* html .containerLeft { overflow: hidden; }
* html .containerRight { overflow: hidden; }
/* End hide from IE5mac */
.columnShiftToLeft{ position: relative; width: 15em; /* correspond to
width of containerLeft */ left: -15em; /* negative offset = width of
containerLeft */ margin: 0; padding: 0; background: #DEB887
url(line.png) 0.4em top repeat-y; z-index: 1; }
/* IE5mac hack */
* html>body .columnShiftToLeft { overflow: visible; display: inline-block; }
.containerLeft{ float: left; width: 15em; margin: 0; padding: 0;
background: #A04040 url(line.png) 0.4em top repeat-y; }
.columnShiftToRight{ position: relative; width: 25em; /* correspond to
width of containerRight */ top: 0; left: 15em; /* positive offset =
width of containerLeft */ margin: 0; padding: 0; background: #A9A9D4
url(line.png) 0.4em top repeat-y; z-index: 2; }
/* IE mac hack */
* html>body .columnShiftToRight { display: inline-block; overflow:
visible; }
.brclear { clear: both; height: 0; margin: 0; font-size: 1px;
line-height: 0; }
.clearfloat { clear: both; height: 1%; font-size: 2px; margin-bottom:
20px; }
/* some content ---------------------------*/
.content { text-align: left; padding: 0.5em 0.5em 1em 1em; margin: 0; }
.content p{ margin: 0 0 0.5em 0.5em; padding: 0; }
h1, h2 { color: #000000; font-family: "Lucida Grande", "Lucida Sans
Unicode", arial, helvetica, sans-serif; /* */ font-weight: normal;
padding: 1.5em 0 1em 0; margin: 0; font-weight: normal; font-size: 1.25em; }
h2 { font-size: 1em; }
-->
</style>
</head>
<body>
<div class="ccontainweb">
<div class="ccontainpage">
<div class="wrapper" >
<div class="header">
<div class="content">
<h1>column-swapping, revisited</h1>
</div>
</div> <!--header-->
<div class="containerRight">
<div class="columnShiftToLeft">
<div class="content">
<h2>Consectetuer adipiscing elit</h2>
<p> Praesent lobortis tellus. In hac
habitasse platea dictumst. Etiam consequat mi non ligula. Nullam wisi.
Sed id sapien. Fusce posuere magna at felis viverra luctus. Ut blandit
augue. Phasellus pellentesque, nisl in feugiat tristique, mauris risus
convallis nunc, sed pharetra ligula tellus sed justo. Praesent
fringilla. Morbi arcu justo, interdum eu, consequat sit amet, elementum
et, ante.</p>
<p>Donec justo massa, varius in, tempus nec,
elementum eget, wisi. Morbi et risus. Sed at justo. Aenean mollis, justo
ac vulputate ultrices, purus eros molestie lorem, ut placerat massa
sapien vel justo. Donec aliquet lorem a mauris. Proin blandit enim id
lorem. Curabitur a dolor. Nulla nec libero sit amet est venenatis
ultrices. Quisque commodo. Suspendisse euismod ipsum a lacus. Vestibulum
convallis wisi eu metus.</p>
</div> <!--content-->
</div> <!--columnShiftToLeft-->
</div> <!--containerRight-->
<div class="containerLeft">
<div class="columnShiftToRight">
<div class="content">
<h2>Vestibulum id lectus</h2>
<p>Nunc imperdiet, magna a facilisis
accumsan, mi nunc fringilla justo, egestas tincidunt neque sapien vitae
lorem. Praesent ac mauris eu velit tincidunt tempor. Pellentesque
ultrices turpis eget dui. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nulla nibh felis,
pharetra eu, ornare eget, sollicitudin eget, enim. Duis scelerisque,
erat elementum tincidunt aliquet, turpis odio malesuada enim, id
placerat felis nulla nec diam. Cras interdum. Aliquam ullamcorper mi vel
eros. Proin tempus imperdiet risus. Nunc sagittis erat et odio. Ut in
ante. Phasellus sagittis rhoncus augue. Nulla tempus dapibus est. In
lorem.</p>
<h2>Cras et leo</h2>
<p>Integer at lectus. In hac habitasse
platea dictumst. Morbi faucibus vehicula quam. Donec nonummy vestibulum
sem. Mauris aliquet convallis dolor. Phasellus placerat, eros eget
vestibulum aliquet, tellus ligula rutrum elit, a tincidunt felis elit et
magna. Aliquam et nunc a magna commodo ultrices. Etiam facilisis sapien
sed nibh. Nulla at velit nec wisi ultrices bibendum. Quisque porttitor
est at diam.</p>
</div> <!--content-->
</div> <!--columnShiftToRight-->
</div> <!--containerLeft-->
<br class="brclear">
<div class="footer">
<div class="content">
<p>Nunc lacinia auctor eros. Vivamus justo
ligula, pulvinar vel, lacinia in, pellentesque accumsan, nisl. Sed
vehicula erat ac nunc. Quisque lobortis erat sed velit. Pellentesque
luctus felis at nunc. Sed id tellus. Mauris ipsum dui, malesuada eu,
euismod in, bibendum sit amet, quam. Nunc hendrerit arcu ut metus. Donec
dictum, felis nec blandit fermentum, orci lectus feugiat dolor, ac
mattis wisi eros vitae diam. Cras felis dui, cursus sed, auctor in,
tempor id, quam. Phasellus neque sem, laoreet eu, mollis sit amet,
sagittis ac, ipsum.</p>
</div> <!--content-->
</div> <!--footer-->
</div> <!-- wrapper -->
</div> <!-- ccontainpage -->
</div> <!-- ccontainweb -->
<div class="clearfloat"> </div>
/*******************************************************************************************************************/
y aquí abajo, el que modifiqué yo para que estuviera con px:
/*******************************************************************************************************************/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd";>
<html>
<head>
<title>columnswapping revisited</title>
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Chao">
<style type="text/css">
<!--
body { margin: 2.5% 0 2.5% 0; padding: 0; font: 100%/1.5em arial,
helvetica, sans-serif; color: #000; background: #fff; }
.ccontainweb { width: 100%; text-align: center; background: #f7f7f7;
margin: 0; padding: 0; }
.ccontainpage { padding: 2% 2.5% 3% 2.5%; margin: 0 auto; width: 90%;
text-align: left; background: #999999; border: 1px solid #8F8F8F; }
.header{ text-align: center; background: #CCCCCC; }
.footer{ background: #CCCCCC; }
/* columnswapping ---------------------------*/
.wrapper{ width: 770px; margin: 0 auto; padding: 0; }
/* containers stay at their origin */
.containerRight{ float: right; width: 580px; margin: 0; padding: 0;
background: #A9A9D4; }
/* IE6win overflow solution by Thomas Berregren, hidden from IE5mac \*/
* html .containerLeft { overflow: hidden; }
* html .containerRight { overflow: hidden; }
/* End hide from IE5mac */
.columnShiftToLeft{ position: relative; width: 180px; /* correspond to
width of containerLeft */ left: -180px; /* negative offset = width of
containerLeft */ margin: 0; padding: 0; background: #DEB887; z-index: 1; }
/* IE5mac hack */
* html>body .columnShiftToLeft { overflow: visible; display: inline-block; }
.containerLeft{ float: left; width: 180px; margin: 0; padding: 0;
background: #A04040; }
.columnShiftToRight{ position: relative; width: 580px; /* correspond to
width of containerRight */ top: 0; left: 180px; /* positive offset =
width of containerLeft */ margin: 0; padding: 0; background: #A9A9D4;
z-index: 2; }
/* IE mac hack */
* html>body .columnShiftToRight { display: inline-block; overflow:
visible; }
.brclear { clear: both; height: 0; margin: 0; font-size: 1px;
line-height: 0; }
.clearfloat { clear: both; height: 1%; font-size: 2px; margin-bottom:
20px; }
/* some content ---------------------------*/
.content { text-align: left; padding: 5px 5px 10px 10px; margin: 0; }
.content p{ margin: 0 0 5px 5px; padding: 0; }
h1, h2 { color: #000000; font-family: "Lucida Grande", "Lucida Sans
Unicode", arial, helvetica, sans-serif; /* */ font-weight: normal;
padding: 15px 0 10px 0; margin: 0; font-weight: normal; font-size: 18px; }
h2 { font-size: 15px; }
-->
</style>
</head>
<body>
<div class="ccontainweb">
<div class="ccontainpage">
<div class="wrapper" >
<div class="header">
<div class="content">
<h1>column-swapping, revisited</h1>
</div>
</div> <!--header-->
<div class="containerRight">
<div class="columnShiftToLeft">
<div class="content">
<h2>Consectetuer adipiscing elit</h2>
<p> Praesent lobortis tellus. In hac
habitasse platea dictumst. Etiam consequat mi non ligula. Nullam wisi.
Sed id sapien. Fusce posuere magna at felis viverra luctus. Ut blandit
augue. Phasellus pellentesque, nisl in feugiat tristique, mauris risus
convallis nunc, sed pharetra ligula tellus sed justo. Praesent
fringilla. Morbi arcu justo, interdum eu, consequat sit amet, elementum
et, ante.</p>
<p>Donec justo massa, varius in, tempus nec,
elementum eget, wisi. Morbi et risus. Sed at justo. Aenean mollis, justo
ac vulputate ultrices, purus eros molestie lorem, ut placerat massa
sapien vel justo. Donec aliquet lorem a mauris. Proin blandit enim id
lorem. Curabitur a dolor. Nulla nec libero sit amet est venenatis
ultrices. Quisque commodo. Suspendisse euismod ipsum a lacus. Vestibulum
convallis wisi eu metus.</p>
</div> <!--content-->
</div> <!--columnShiftToLeft-->
</div> <!--containerRight-->
<div class="containerLeft">
<div class="columnShiftToRight">
<div class="content">
<h2>Vestibulum id lectus</h2>
<p>Nunc imperdiet, magna a facilisis
accumsan, mi nunc fringilla justo, egestas tincidunt neque sapien vitae
lorem. Praesent ac mauris eu velit tincidunt tempor. Pellentesque
ultrices turpis eget dui. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nulla nibh felis,
pharetra eu, ornare eget, sollicitudin eget, enim. Duis scelerisque,
erat elementum tincidunt aliquet, turpis odio malesuada enim, id
placerat felis nulla nec diam. Cras interdum. Aliquam ullamcorper mi vel
eros. Proin tempus imperdiet risus. Nunc sagittis erat et odio. Ut in
ante. Phasellus sagittis rhoncus augue. Nulla tempus dapibus est. In
lorem.</p>
<h2>Cras et leo</h2>
<p>Integer at lectus. In hac habitasse
platea dictumst. Morbi faucibus vehicula quam. Donec nonummy vestibulum
sem. Mauris aliquet convallis dolor. Phasellus placerat, eros eget
vestibulum aliquet, tellus ligula rutrum elit, a tincidunt felis elit et
magna. Aliquam et nunc a magna commodo ultrices. Etiam facilisis sapien
sed nibh. Nulla at velit nec wisi ultrices bibendum. Quisque porttitor
est at diam.</p>
</div> <!--content-->
</div> <!--columnShiftToRight-->
</div> <!--containerLeft-->
<br class="brclear">
<div class="footer">
<div class="content">
<p>Nunc lacinia auctor eros. Vivamus justo
ligula, pulvinar vel, lacinia in, pellentesque accumsan, nisl. Sed
vehicula erat ac nunc. Quisque lobortis erat sed velit. Pellentesque
luctus felis at nunc. Sed id tellus. Mauris ipsum dui, malesuada eu,
euismod in, bibendum sit amet, quam. Nunc hendrerit arcu ut metus. Donec
dictum, felis nec blandit fermentum, orci lectus feugiat dolor, ac
mattis wisi eros vitae diam. Cras felis dui, cursus sed, auctor in,
tempor id, quam. Phasellus neque sem, laoreet eu, mollis sit amet,
sagittis ac, ipsum.</p>
</div> <!--content-->
</div> <!--footer-->
</div> <!-- wrapper -->
</div> <!-- ccontainpage -->
</div> <!-- ccontainweb -->
<div class="clearfloat"> </div>
/*******************************************************************************************************************/
Si alguien me puede dar una mano... será eternamente egradecido...
Estuve viendo el de fauxcolumns, pero me parece más interesante este.
Si tiene otro que recomendar para que dos columnas tengan el mismo
largo, bienvenido el consejo.
Saludos.
Maira Vykus
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
