
Pero tras mucho probar e investigar, y en espera de que la W3C normalice el CSS·3 y hacer columnas resulte la mar de sencillo, os voy a dar unas sencillas y efectivas orientaciones para conseguir precisamente la maquetación en tres columnas.
Nuestro archivo .css debería contener algo parecido a ésto:
body {
margin:0; padding:0;
font-size:80%;
font-family: sans-serif;
}
#wrap{
width:780px;
margin: auto;
text-align:left;
}
#header{
height:100px;
background: url(../img/header.jpg) no-repeat top left;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#contenedor {
width: 80%;
margin: auto;
padding:0;
display: table;
border: 1px solid black;
}
#row {
display: table-row;
}
#izquierda {
width:150px;
padding:1em;
background: #EEF;
display: table-cell;
}
#derecha{
width:150px;
padding:1em;
background:#FEE;
display: table-cell;
}
#central{
padding: 1em;
background:yellow;
display: table-cell;
}
#pie{
clear:both;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
Y en el tag de nuestro archivo .html, algo parecido a ésto
[body]
[div id="wrap"]
[div id="header"][p]Título de tu página.[/p][/div]
[/div]
[div id="contenedor"]
[div id="row"]
[div id="izquierda"]
[h4]Col. Izq.[/h4]
[p]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rutrum, urna eget gravida auctor, mauris neque tempus lorem, non condimentum sem purus et eros. Donec non lectus. Phasellus eu massa. Praesent felis metus, tempor a, vehicula ut, interdum id, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nec est. Nulla facilisi. Integer a dolor. Duis vitae diam. Morbi laoreet tellus ut diam. Vestibulum lacinia congue nunc.[/p]
[/div]
[div id="central"]
[h4]Col. Central[/h4]
[p]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rutrum, urna eget gravida auctor, mauris neque tempus lorem, non condimentum sem purus et eros. Donec non lectus. Phasellus eu massa. Praesent felis metus, tempor a, vehicula ut, interdum id, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nec est. Nulla facilisi. Integer a dolor. Duis vitae diam. Morbi laoreet tellus ut diam. Vestibulum lacinia congue nunc.[/p]
[/div]
[div id="derecha"]
[h4]Col. Dcha.[/h4]
[p]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rutrum, urna eget gravida auctor, mauris neque tempus lorem, non condimentum sem purus et eros. Donec non lectus. Phasellus eu massa. Praesent felis metus, tempor a, vehicula ut, interdum id, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nec est. Nulla facilisi. Integer a dolor. Duis vitae diam. Morbi laoreet tellus ut diam. Vestibulum lacinia congue nunc.[/p]
[/div]
[/div]
[/div]
[div id=pie"]
Aquí el contenido de tu pie de página.
[/div]
[/div]
[/body]
[/html]
Y salvo que yo me haya equivocado al copiar el código, el efecto que conseguiremos será una página maquetada con cabecera y pie independientes, y tres columnas, que puedes transformar en dos o en una a tu antojo, con tan solo eliminar los
correspondientes a las columnas laterales a tu antojo. Y funciona. Comprúebalo tú mismo.
Referencias
URL para realizar referencias...
http://exceso.bitacoras.com/archivos/2005/10/12/maquetacion-a-3-columnas-con-css/trackback/
http://exceso.bitacoras.com/archivos/2005/10/12/maquetacion-a-3-columnas-con-css/trackback/
Comentarios
Comentario de Martín Riva | 14 de octubre de 2005, a las 21:45 h.
Comentario de Afisionao | 15 de octubre de 2005, a las 01:19 h.
Olvidé decir que el código HTML está transcrito con "[" y "]" en vez de "<" y ">" por razones obvias: el "blockquote" del CMS lo transformaba en código propio de la página y no permitía mostrarlo como texto plano. Si has copiado tal cual la parte del código que debes insertar dentro del , cambia todos los corchetes por "<" y ">". Puede que sea ese el problema...
Comentario de Martín Riva | 15 de octubre de 2005, a las 15:47 h.
No sé si es ese u otro. Quizá con Blogger algunas cosas haya que hacer pero es claro que todavía no domino los códigos html como para saberlo. Pero de tomas maneras hay partes que ahora te acepta, es decir, que seguramente con un poco de trabajo puede hacerse. Lo que noté es que Blogger ahora acepta (o yo lo sé usar ahora) el Front Page: se copian los códigos allí y se diseña sobre eso y lo que vaya marcando error o no lo modifique o acepte, se lo puede ir haciendo manualmente, por ejemplo, el fondo. Creo que hay que configurar en Java Sprit al Front Page para que lo lea bien. Lo cierto es que no hace falta ser un erudito sobre el tema para mejora las plantillas. Hay que dedicarle tiempo y paciencia. Saludos y gracias por los aportes.
Comentario de Afisionao | 15 de octubre de 2005, a las 15:58 h.
No hay de qué. No obstante frontpage es un pésimo programa para edición web. Prueba cualquier versión de Dreamweaver y luego me cuentas. Pero lamento discrepar sobre lo último que dices. Para hacer retoques en una plantilla no hace falta saber gran cosa. Para hacer una buena plantilla sí hace falta controlar determinado soft. Saludos.
Comentario de Darth Oscar | 15 de octubre de 2005, a las 19:39 h.
Comentario de Martín Riva | 15 de octubre de 2005, a las 22:34 h.
Sí, estoy de acuerdo en lo de buena planilla pero yo hablo de mejorla. Estuve dando vueltas por algunos blog, viendo que hacen y demás y noto que hay muchas discordias, pequeñas peleas y mal entendidos (en el mejor de los cosos —no lo digo por nadie en especial, es una impresión). Quizá sea una costumbre social. Me causa gracias por lo de aburrido, porque estoy trabajando con la pc, de hecho parte de mi trabajo sería escribir, leer, agradecer, comunirme. Pero si estuviera aburrido e igual quisiera mostrar mi ignorancia en estas cosas, no lo veo nada malo en eso, acaso no está bien dejar de estar aburrido. Pero no es así. Ya estaré aburrido e iré a ver tu sitio. Y lo que no sé te lo pregunto a vos (lado excelente de interntet, el hecho de colaborar, ese aspecto de una comunidad que comparte cosas). Que anden bien.
Comentario de Darth Oscar | 16 de octubre de 2005, a las 11:26 h.
Comentario de Darth Oscar | 16 de octubre de 2005, a las 11:33 h.
Y te advierto que tu comentario en mi blog ha sido eliminado. Como comprenderás si quieres saber algo sobre tu CMS, el foro correspondiente es el de quien presta el servicio. Si deseas obtener información, un comentario no es el lugar correcto, sino directamente un email PRIVADO al administrador del sitio (salvo, claro está, que el comentario verse sobre la materia sobre la que buscas información -cosa que no es caso ni aquí ni en mi blog). Y te recomiendo que no vayas haciendo eso por ahí porque amigo, un buen día te encontrarás con la desagradable sorpresa de que alguien te haga comentarios indeseados, o algo más, en tu propia casa. Creo que no entiendes lo que es un blog: un blog es como una casa, puedes entrar libremente siempre que no te sea vetada la entrada; pero una vez dentro debes respetar a su dueño y sus principios, puesto que este puede verse en la ¿desagradable? obligación de invitarte a que salgas, por las buenas o por las malas. Y recuerda que los antiguos latinos sabían mucho: "do ut des", te daré lo que des. Así que, eso.
Darth Oscar, más Darth que nunca.
Darth Oscar, más Darth que nunca.
Comentario de Darth Oscar | 16 de octubre de 2005, a las 11:44 h.
Y que conste que digo esto con respeto y buen rollo. Si quieres entrar en mi blog estás absolutamente invitado, entra, curiosea, copia, plagia lo que quieras. Todo es GNU/GPL. Quizá te sea complicado leer el CSS puesto que es una administración Joomla!, pero por lo demás, estamos de puertas abiertas. Te recomiendo no obstante que si deseas obtener mayores conocimientos sobre diseño busques en los foros adecuados -en algunos de los cuales yo participo- pero siempre recomendándote encarecidamente que que si dejas algún comentario lo hagas en el sitio correcto: piensa que en un foro el administrador veta los comentarios que no se encuentran en la categoría correcta, así que lo que te ha pasado en mi blog te pasará más de una vez.
No es malo mostrar la ignorancia, por supuesto. Espero que no interpretes mis palabras en sentido peyorativo. Todos comenzamos con ignorancia y terminamos con conocimientos. Lo único es que hay que saber hacer las cosas de acuerdo con los principios de la Netiquette.
Suerte en tu futuro blog.
No es malo mostrar la ignorancia, por supuesto. Espero que no interpretes mis palabras en sentido peyorativo. Todos comenzamos con ignorancia y terminamos con conocimientos. Lo único es que hay que saber hacer las cosas de acuerdo con los principios de la Netiquette.
Suerte en tu futuro blog.
Comentario de Martín Riva | 16 de octubre de 2005, a las 14:18 h.
Me causa gracia lo que decís, porque no me aburro, de hecho trabajo bastante, tengo mujeres (estoy en un plan de lazos parentales de bigamia —sólo es el principio), trabajo todo el día: soy escritor, vendedor, estoy aprendiendo diseño, tengo una revista de arte y pensamiento que se llama "Macedonio" (impresa y virtual), algunos blogs que estoy viendo de armar junto a uno sitios. Por lo tanto lo del aburrimiento, me parece gracioso y erróneo. Por otro lado agradezco la información, me resulta de utilidad. Podemos estar o no de acuerdo pero creo que (insisto) hay, como en otros ámbitos sociales, mucha agresividad. Deberiamos usar esa energía con otra cosa. El diálogo, cuanto más elevado seguramente será mejor (no olvidar que el lenguaje nos hace hombres, y cuanto más lenguaje quizá mayor comprensión).
Comentario de Darth Oscar | 16 de octubre de 2005, a las 16:36 h.
Tus reflexiones acerca de la bigamia, tu alarde acerca de tu falta de tiempo de asueto, tus proyectos personales, y tu extensa vida laboral como escritor-vendedor-aprendiz_de_diseño-creador_de_blogs-webmaster y tu concepción acerca del lenguaje me parecen totalmente respetables, a la par que superfluas e innecesarias. El hecho de hacer publicidad encubierta de tu revista de arte y pensamiento sería motivo más que suficiente para considerar como spam el que dejes tu comentario en este blog. No seré yo quien lo censure, pero sí quien, desde esta tribuna que tú muy erróneamente consideras pública (puesto que si hay cátedra es gracias al catedrático, en este caso Raúl), intente cuanto menos hacerte ver que , si bien es cierto que el lenguaje nos hace hombres, no es más cierto que el silencio nos hace respetar. Así que desde ahora mismo, y si no hay más novedades, doy por zanjada est estúpido cruce de comentarios que no hará sino engrosar consultas en la base de datos de esta bitácora. Agradezco la diarréica verbal de la que has hecho gala y te encomiendo encarecidamente a que visites mucho más ese mundo del que te has separado (el mundo real), a la vez que te conmino a que visites ése en el que quieres entrar (la blogsfera). La blogsfera hay que entenderla antes de criticarla alegando agresividad o siquiera intentar cambiarla: yo he tardado un año y demuestro mi ignorancia y mi júbilo cada vez que alguien me enseña algo. Como en tu amplitud de conocimientos veo que se escapa la política (en su griega concepción primera, te recomiendo la lectura de todos los libros de 'La República' de Platón), debo decirte que es extrapolable: del mismo modo que no puedes pretender tener la razón en base a tus únicos, propios y convenientes argumentos, tampoco puedes pretender imponerlos como verdad replicando una y otra vez ante las indicaciones de tus interlocutores con los mismos. Existen distintos puntos de vista, que debes conocer y comprender para crear tu propio juicio de valor, y ante todo, respetarlos; puesto que es la única manera de acercarte a la realidad y comprenderla analizándola de forma empática. Tu desconocimiento de la blogsfera obviamente te hace ver fantasmas de los cuales tu razón no conocía su existencia, y por tanto enfrentarte a ellos de forma intolerante y narcisista. Mi último consejo para tí, oh mi querido Martín Riva: La agresividad comienza por una chispa. Es cuestión de quien provoca la ignición el ser consciente de que, una vez prendida la llama, es muy fácil quemarse.
Y concluyo con las mismas palabras con las que Don Miguel terminó con las andanzas de Don Alonso Quijano, dando fin las andanzas del noble hidalgo incluso para el apócrifo de Avellaneda: 'Vale'.
Darth Óscar pretende guardar silencio.
Y concluyo con las mismas palabras con las que Don Miguel terminó con las andanzas de Don Alonso Quijano, dando fin las andanzas del noble hidalgo incluso para el apócrifo de Avellaneda: 'Vale'.
Darth Óscar pretende guardar silencio.
Comentario de Martín Riva | 16 de octubre de 2005, a las 17:20 h.
Comentario de Martín Riva | 16 de octubre de 2005, a las 17:23 h.
Comentario de Darth Oscar | 16 de octubre de 2005, a las 17:31 h.
Comentario de María CRISTINA GALERA | 09 de enero de 2006, a las 14:25 h.
Añadir un Comentario