Foros del Web » Creando para Internet » CSS »

Ayuda moldeando diseño hibrido

Estas en el tema de Ayuda moldeando diseño hibrido en el foro de CSS en Foros del Web. Buenas, Estoy intentando moldear un diseño híbrido, pero no consigo arreglármelas para conseguir lo siguiente: Son 3 columnas, izq y derecha son de tamaño fijo ...
  #1 (permalink)  
Antiguo 15/11/2009, 15:04
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Ayuda moldeando diseño hibrido

Buenas,

Estoy intentando moldear un diseño híbrido, pero no consigo arreglármelas para conseguir lo siguiente:

Son 3 columnas, izq y derecha son de tamaño fijo y lo que es liquido es la parte central, a la que le he dado un min-width:500px; para que no se haga extremadamente pequeña.

El problema que estoy teniendo es que cuando encojo la pantalla horizontalmente, la columna derecha sobrepasa tanto la columna central como la izquierda. Me gustaría limitar esto, y que si se encoge la ventana hasta el minimo de la zona central 500px, la columna derecha no se sobrepusiera por encima de estas capas.

¿Sabéis que modificaciones debo realizar?

Muchas gracias de antemano!

Dejo el código que estoy utilizando:

Código css:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <title>Dynamic Drive: CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)</title>
  7. <style type="text/css">
  8.  
  9. body{
  10. margin:0;
  11. padding:0;
  12. line-height: 1.5em;
  13. }
  14.  
  15. b{font-size: 110%;}
  16. em{color: red;}
  17.  
  18. #topsection{
  19. background: #EAEAEA;
  20. height: 90px; /*Height of top section*/
  21. }
  22.  
  23. #topsection h1{
  24. margin: 0;
  25. padding-top: 15px;
  26. }
  27.  
  28. #contentwrapper{
  29. float: left;
  30. width: 100%;
  31. }
  32.  
  33. #contentcolumn{
  34. margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
  35. min-width:500px;
  36. }
  37.  
  38. #leftcolumn{
  39. float: left;
  40. width: 230px; /*Width of left column*/
  41. margin-left: -100%;
  42. background: #C8FC98;
  43. }
  44.  
  45. #rightcolumn{
  46. float: left;
  47. width: 200px; /*Width of right column*/
  48. margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
  49. background: #FDE95E;
  50. }
  51.  
  52. #footer{
  53. clear: left;
  54. width: 100%;
  55. background: black;
  56. color: #FFF;
  57. text-align: center;
  58. padding: 4px 0;
  59. }
  60.  
  61. #footer a{
  62. color: #FFFF80;
  63. }
  64.  
  65. .innertube{
  66. margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
  67. margin-top: 0;
  68. }
  69.  
  70. </style>
  71.  
  72. <script type="text/javascript">
  73. /*** Temporary text filler function. Remove when deploying template. ***/
  74. var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
  75. function filltext(words){
  76. for (var i=0; i<words; i++)
  77. document.write(gibberish[Math.floor(Math.random()*3)]+" ")
  78. }
  79. </script>
  80.  
  81. </head>
  82. <body>
  83. <div id="maincontainer">
  84.  
  85. <div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)</h1></div></div>
  86.  
  87. <div id="contentwrapper">
  88. <div id="contentcolumn">
  89. <div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
  90. </div>
  91. </div>
  92.  
  93. <div id="leftcolumn">
  94. <div class="innertube"><b>Left Column: <em>230px</em></b> <script type="text/javascript">filltext(20)</script></div>
  95.  
  96. </div>
  97.  
  98. <div id="rightcolumn">
  99. <div class="innertube"><b>Right Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>
  100. </div>
  101.  
  102. <div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>
  103.  
  104. </div>
  105. </body>
  106. </html>
  #2 (permalink)  
Antiguo 15/11/2009, 17:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda moldeando diseño hibrido

prueba añadiendo un min-width a la columna central. Recomendable que también añadas un max-width (para evitar "desparrames": lo contrario al colapso ).
No olvides que debes añadir el equivalente para ie:
Código css:
Ver original
  1. #contenedor {
  2.   max-width: 1200px;
  3.   width: expression(document.body.clientWidth > 1201? "1200px": "auto");
  4. min-width: 300px;
  5.   width: expression(document.body.clientWidth < 301? "300px": "auto" );
  6. }
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 16/11/2009, 09:10
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda moldeando diseño hibrido

Cita:
Iniciado por kseso? Ver Mensaje
prueba añadiendo un min-width a la columna central. Recomendable que también añadas un max-width (para evitar "desparrames": lo contrario al colapso ).
No olvides que debes añadir el equivalente para ie:
Código css:
Ver original
  1. #contenedor {
  2.   max-width: 1200px;
  3.   width: expression(document.body.clientWidth > 1201? "1200px": "auto");
  4. min-width: 300px;
  5.   width: expression(document.body.clientWidth < 301? "300px": "auto" );
  6. }
Hola Kseso? muchas gracias por responder.

El ID que comentas en tu post no lo veo en mi codigo :S

Sobre agregar el min-width y max-width en la columna central, lo hice


Código css:
Ver original
  1. #contentcolumn{
  2. margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
  3. min-width:500px;
  4. max-width:700px;
  5. }

Pero sigo teniendo el mismo problema, la columna derecha se monta sobre la central y la izquierda al reducir la ventana.

Os he dejado el código completo por si queréis lanzarlo y ver el problema realmente.

Muchas gracias de antemano!
  #4 (permalink)  
Antiguo 16/11/2009, 09:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda moldeando diseño hibrido

Ah, vale. Con las prisas esta mañana no entré a mirar tu código.

Creo que lo que tienes es una estructura de falsas columnas equilibradas (igual altura). Y para ello sigues una técnica de encadenado de cajas.

Mira a ver si esta otra forma la encuentras menos afectada de "divitis".

Sólo tienes que cambiar en #contenedor el valor de width por un min-width apropiado. Y por supuesto, retirar el "margin: 0 auto" que ya será innecesario.

Nos cuentas.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 16/11/2009, 11:09
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda moldeando diseño hibrido

Cita:
Iniciado por kseso? Ver Mensaje
Ah, vale. Con las prisas esta mañana no entré a mirar tu código.

Creo que lo que tienes es una estructura de falsas columnas equilibradas (igual altura). Y para ello sigues una técnica de encadenado de cajas.

Mira a ver si esta otra forma la encuentras menos afectada de "divitis".

Sólo tienes que cambiar en #contenedor el valor de width por un min-width apropiado. Y por supuesto, retirar el "margin: 0 auto" que ya será innecesario.

Nos cuentas.
Funcionó perfecto, muchas gracias kseso?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:35.