Foros del Web » Creando para Internet » CSS »

Como hacer para que una columna se pegue a otra, y no que pase por debajo.

 Estas en el tema de Como hacer para que una columna se pegue a otra, y no que pase por debajo. en el foro de CSS en Foros del Web. Disculpen si el titulo del post casi no se entiende, no sabia como hacerlo mas entendible. Estoy construyendo un proyecto personal con PrestaShop (CMS para ...
  #1 (permalink)  
Antiguo 11/02/2010, 21:47
Edmidimar
Invitado
  
Mensajes: n/a
Puntos:
Como hacer para que una columna se pegue a otra, y no que pase por debajo.
Disculpen si el titulo del post casi no se entiende, no sabia como hacerlo mas entendible.

Estoy construyendo un proyecto personal con PrestaShop (CMS para tienda virtual).

Estoy buscando la manera de que con la plantilla por defecto del PrestaShop se abra al ancho que tenga de resolución el monitor, pues nada mejor que navegar por una web que se abra al 100% del tamaño del monitor.

Lo unico que necesito es que por favor me orienten, sobre las sintaxis que se pudiera utilizar para conseguir hacerlo.

Ya la plantilla esta ampliada a todo el ancho del monitor, el problema en el que estoy ahorita, es entre la columna del medio y la de la derecha, viendo la imagen se puede apreciar en detalle:



[url=http://img2.pict.com/4c/24/4a/2816624/0/captura.jpg][img]http://img2.pict.com/4c/24/4a/2816624/0/300/captura.jpg[/img][/url]

Necesito que la columna del centro se quede a tome con la de la derecha, y no que se valla por debajo.

Los fragmentos de sintaxis del CSS que se utilizan (creo que no hay mas) para modificar esas columnas son:

Estos dos son los fragmentos que hacen mover la columna del medio:

Código CSS: 
Ver original
  1. #center_column {
  2.     float: left;
  3.     width: 64%;
  4.     margin: -35px 0 0 0;
  5.     
  6. }

Código CSS: 
Ver original
  1. div#center_column {width:100%}

Código CSS: 
Ver original
  1. #center_column div.block { width: 101%; float: left; }


Este es de la columna de la derecha donde estan los modulos.

Código CSS: 
Ver original
  1. #right_column {
  2.     float:right;
  3.     width: 190px;
  4.     padding-left: 10px;
  5.     margin-right: 5px;
  6. }

Solo necesito una orientación de cuales son las sintaxis que debo utilizar para hacer lo que necesito.

Saludos!!
Última edición por Edmidimar; 11/02/2010 a las 23:26
  #2 (permalink)  
Antiguo 11/02/2010, 23:39
DjX
 
Fecha de Ingreso: febrero-2010
Mensajes: 6
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Como hacer para que una columna se pegue a otra, y no que pase por debajo.
Para que la columna del centro pase debajo de la de la derecha esta última tendría que estar como absolute, no simplemente como float (al menos que yo sepa). De otro modo la columna de la derecha saldría de su lugar para acomodarse debajo. ¿seguro que sólo ese es el css?

Otra cosa es que todas las columnas deben estar dentro de un mismo div mayor que las cubra a todas, de otro modo no sirve de nada poner porcentajes en el valor de width.
  #3 (permalink)  
Antiguo 12/02/2010, 10:07
 
Fecha de Ingreso: diciembre-2008
Mensajes: 454
Antigüedad: 15 años, 4 meses
Puntos: 2
Respuesta: Como hacer para que una columna se pegue a otra, y no que pase por debajo.
creo que es simple, estas mezclando % con px en los width.

Si quieres que una columna este en la derecha con 64% intenta poner la de izquierda con 34% o 36% de esta manera equiparamos el equilibrio del 100% width

Saludos
  #4 (permalink)  
Antiguo 12/02/2010, 13:19
Edmidimar
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Como hacer para que una columna se pegue a otra, y no que pase por debajo.
Gracias por las respuestas.

Hola DjX yo no quiero que la columna del medio pase por debajo de la columna derecha, sino que quede a rraz con la de la derecha. Si le coloco a la columna derecha la variable absolute, está se mueve al lado izquierdo.

No existe una variable que limite todo lo que esta al rededor de una columna??

Yo muevo la ventana, y la columna del medio tiende a reducir, pero queda por debajo de la columna derecha y despues si redusco mas, la columna de la derecha se mueve hacia abajo como dices tu DjX.

Hola easy los PX es solo a la columna derecha ya que es una sola medida igual que la columna izquierda. El 64% es por prueba para hacer la captura de pantalla, si le coloco 100% a la columna del medio está se amplia al ancho del monitor, pero solo hacia el lado derecho, sin tocar la columna derecha. Es como si para la columna del medio no existiese la de la derecha.

Alguna sugerencia???
  #5 (permalink)  
Antiguo 12/02/2010, 14:42
Edmidimar
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Como hacer para que una columna se pegue a otra, y no que pase por debajo.
hhaaa se me olvidaba, la estructura completo, y sacando aquellos que no tienen nada que ver, seria este:

Esta original, solo se a cambiado algunas cosas que nada tiene que ver con el ancho de las columnas:

Código CSS: 
Ver original
  1. /* global layout */
  2. #page {
  3.     border-left: solid 4px #bdc2c9;
  4.     border-right: solid 4px #bdc2c9;
  5.     background-color: #faf7f0; 
  6.     width: 1010px;
  7.     margin: 0 auto 2px auto;
  8.     text-align:left;
  9.  
  10. }
  11. #page h1 {
  12.     text-align:center;
  13.     
  14. }
  15. h1#logo {
  16.     width: 100%;
  17.     margin-top: 0;
  18.     margin-left: 0px;
  19. }
  20. #header {
  21.     float: right;
  22.     width: 75%;
  23.     text-align: right;
  24.     margin-top: -300px;
  25.     margin-right: 0;
  26. }
  27. #left_column {
  28.     float:left;
  29.     clear:left;
  30.     width:190px;
  31.     padding-right: 10px;
  32.     margin-left: 5px;
  33. }
  34. #center_column {
  35.     float: left;
  36.     width: 600px;
  37.     margin: -35px 0 0 0;
  38.     
  39. }
  40. #right_column {
  41.     float:right;
  42.     width: 190px;
  43.     padding-left: 10px;
  44.     margin-right: 5px;
  45. }
  46.  
  47.  
  48. /* /global RTE fields */
  49.  
  50. /* global table style */
  51. div.table_block {
  52.     background: transparent url('../img/table_footer.gif') no-repeat bottom left;
  53.     padding-bottom:6px;
  54.     margin:0 auto 2em;
  55.     width:601px;
  56. }
  57. table.std {
  58.     border-spacing: 0;
  59.     border-collapse: collapse;
  60.     width:100%;
  61. }
  62. table.std td, table.std th {
  63.     padding: 0.6em 0.43em;
  64. }
  65. table.std th {
  66.     white-space:nowrap;
  67. }
  68. table.std tr.item td, table.std tr.item th {
  69.     background-color: white;
  70. }
  71. table.std tr.alternate_item td, table.std tr.alternate_item th {
  72.     background-color: #f1f2f4;
  73. }
  74. table.std tbody tr td, table.std tfoot tr td {
  75. border-color:#BDC2C9;
  76. border-right: medium;
  77.     border-top: 1px solid #bdc2c9;
  78. }
  79. table.std thead th {
  80.     background-color: transparent;
  81.     background-image: url('../img/table_header.gif');
  82.     background-repeat: no-repeat;
  83.     height:24px;
  84.     color: #374853;
  85.     font-weight: bold;
  86.     text-align: center;
  87.     white-space: nowrap;
  88. }
  89. table.std thead th.first_item {
  90.     background-position: top left;
  91. }
  92. table.std thead th.last_item {
  93.     background-position: top right;
  94. }
  95. table.std thead th.item {
  96.     background-position: -5px 0;
  97. }
  98. table.std tfoot td {
  99.     color: #374853;
  100.     text-align: right;
  101.     white-space: nowrap;
  102. }
  103. /* /global table style */
  104.  
  105. /* global form style */
  106. form.std {
  107.     clear: both;
  108. }
  109. form.std h3 {
  110.     color: #555;
  111.     font-size: 1.4em;
  112.     font-weight: normal;
  113.     border-bottom: 1px solid #d0d1d5;
  114.     padding: 0.5em;
  115.     margin: 0 0 0.5em 0;
  116. }
  117. form.std fieldset {
  118.     border: 1px solid #d0d3d8;
  119.     background: #D0D1D5 url('../img/form_bg.jpg') repeat-x top left;
  120.     margin-bottom: 1em;
  121.     padding-bottom: 1em;
  122. }
  123. form.std fieldset legend {
  124.     padding: 0.3em 0.6em;
  125.     margin: 1em 0 1em 0.5em;
  126.     font-size: 1.6em;
  127.     font-weight: 100;
  128.     border-color: #d0d1d5;
  129.     border-style: solid;
  130.     border-width: 1px;
  131. }
  132. form.std h4, form.std p {
  133.     padding: 0.3em 1em;
  134.     clear: both;
  135. }
  136. form.std label, form.std p span {
  137.     float: left;
  138.     text-align: right;
  139.     width: 30%;
  140. }
  141. form.std p span.like_input {
  142.     width: auto;
  143.     margin-left:0.7em;
  144. }
  145. input, textarea, select, span.editable {
  146.     margin-left: 0.7em;
  147.     font-size: 12px;
  148.     font-family: Verdana, Arial, Helvetica, Sans-Serif;
  149.     vertical-align: top;
  150.     outline: none;
  151. }
  152.  
  153. input, textarea, select {
  154.     border: 1px solid #bdc2c9;
  155. }
  156.  
  157. input.text {
  158.     height:18px;
  159.     padding-left:2px;
  160.     padding-right:2px;
  161. }
  162. .checkbox input, .radio input {
  163.     border: none;
  164. }
  165. form.std .checkbox label, form.std .radio label, form.std span.form_info {
  166.     margin: 0;
  167.     float: none;
  168.     text-align: left;
  169. }
  170. .required sup {
  171.     color: #da0f00;
  172. }
  173. form.std p.checkbox {
  174.     padding-left: 30%;
  175. }
  176. form.std p.submit {
  177.     padding-left:31%!important;
  178.     margin-bottom: 1.5em;
  179. }
  180.  
  181. #center_column form.std p.submit2 {
  182.     padding-left:170px;
  183.     margin-bottom: 1.5em;
  184. }
  185.  
  186.  
  187. /* Default block style */
  188. div.block {
  189.     margin-bottom: -0.0em;
  190.     width: 191px;
  191. }
  192. #left_column div.block, #right_column div.block {
  193.     padding-bottom: 6px;
  194.     background: transparent url('../img/block_footer.gif') no-repeat bottom left;
  195. }
  196. div.block h4 {
  197.     text-transform: uppercase;
  198.     font-family: Helvetica, Sans-Serif;
  199.     font-weight: bold;
  200.     font-size: 1.2em;
  201.     padding-left:0.5em;
  202.     border-bottom:1px solid #990000;
  203.     padding-top:0px;
  204.     line-height:5.7em;
  205.     color: #fefbe4;
  206.     height: 50px;
  207.     background: transparent url('../img/block_header.png') no-repeat top left;
  208. }
  209. div.block h4 a { color: #fefbe4; }
  210. div.block ul { list-style: none; }
  211. div.block ul.tree li { padding-left:1.2em; }
  212. div.block a:hover { text-decoration: underline; }
  213. #left_column div.block .block_content a.button_large, #right_column div.block .block_content a.button_large { margin:0 0 0 -3px; }
  214. div.block .block_content {
  215.     border-left: 1px #d0d3d8;
  216.     border-right: 1px #d0d3d8;
  217.     padding:0.5em 0.7em 0pt;
  218.     background-color: #e4e5e7;
  219.     min-height:20px;
  220. }
  221. div.block li {
  222.     padding: 0.2em 0 0.2em 0em;
  223.     list-style-position: outside;
  224. }
  225. div.block a {
  226.     color: #595a5e;
  227.     text-decoration: none;
  228. }
  229. /* block in the center column*/
  230. #center_column p { color: Highlight; margin: 0.1em 0; padding-left:0.7em;}
  231. #center_column div.block { width: 601px;}
  232. #center_column div.block h4 {
  233.     background: transparent url('../img/block_header_large.png') no-repeat top left;
  234.     height: 17px;
  235.     color: white;
  236. }
  237.  
  238. /* Special style for block products in center column */
  239. #center_column .products_block { border: none; }
  240. #center_column .products_block  { color: #595a5e; }
  241. #center_column .products_block h4 { line-height: 1.3em; }
  242. #center_column .products_block .block_content {
  243.     background: #d0d3d8 none;
  244.     padding:0pt;
  245. }
  246. #center_column .products_block ul li:hover {background-color: #bdc2c9; }
  247. #center_column .products_block ul li {
  248.     border-right: 1px solid white;
  249.     border-bottom:1px solid white;
  250.     float: left;
  251.     clear: none;
  252.     width: 149px; 
  253. /*  height:375px;*/
  254.  
  255.     background-color: #d0d3d8;
  256.     padding: 0;
  257.     margin-top:0;
  258. }
  259.  
  260. #center_column .products_block ul .product_accessories_description  {
  261.     margin:0;
  262.     padding:0;
  263. }
  264. #center_column .products_block ul .product_accessories_description .product_accessories_price{
  265.     margin-top:75px !important;
  266.     margin-top:0px;
  267. }
  268. #center_column .products_block ul .product_accessories_description {
  269.     margin:0;
  270.     padding:0;
  271.     height:280px;
  272. }
  273.  
  274. /*#center_column .products_block li.last_item { float:none; clear:both; */
  275. #center_column .products_block li.last_item_of_line { border-right:none; }
  276. #center_column .products_block li.first_item_of_line { width: 149px; clear:both; }
  277. #center_column .products_block li.last_line { border-bottom:none; }
  278. #center_column .products_block p, #center_column .products_block h5 { margin: 0.5em 0.1em; }
  279. #center_column div.products_block h5 {
  280.     display: block;
  281.     height: 2.57em;
  282. }
  283. #center_column div.products_block h5 a {
  284.     color: #374853;
  285.     font-size:1.1em;
  286. }
  287. #center_column div.products_block ul li p {
  288.     font-size:1.1em;
  289.     margin:0;
  290.     padding:0;
  291. }
  292. #center_column div.products_block p.product_desc {
  293.     height:8.5em;
  294.     color: #595a5e;
  295. }
  296. #center_column div.products_block a.product_image {
  297.     display: block;
  298.     background-color: transparent;
  299.     width: 129px;
  300.     height: 129px;
  301.     margin-left:10px;
  302. }
  303. #center_column div.products_block .product_accessories_description a.product_image {
  304.     width: 118px;
  305.     height: 85px;
  306. }
  307. #center_column div.products_block a.product_description {
  308.     display: block;
  309.     width: 118px;
  310.     height: 50px;
  311.     margin-left:2px;    
  312. }
  313.  
  314. #center_column div.products_block a.product_image img{
  315.     float:none;
  316.     margin:0;
  317. }
  318. #center_column div.products_block p.product_desc, #center_column div.products_block h5 {
  319.     margin-left:0.5em;
  320.     margin-right:0.5em;
  321. }
  322. #center_column div.products_block ul li p.product_desc a { font-weight:normal; }
  323. #center_column .products_block span.price {
  324.     text-align: center;
  325.     font-size: 1.2em;
  326.     padding: 0.5em 0;
  327.     /*display: block;*/
  328. }
  329. p.price_container {
  330.     text-align: center;
  331. }
  332. #center_column .products_block .featured_price { 
  333.     margin-top:2.5em;
  334. }
  335. #center_column .products_block a.button, #center_column .products_block a.exclusive, #center_column .products_block span.exclusive {
  336.     margin: 0.5em auto;
  337. }
  338.  
  339. /* Special style for block accessories in center column (product page) */
  340. #center_column .products_block.accessories_block .block_content{ background:none; }
  341. #center_column div.products_block.accessories_block p.product_desc { height:6.5em; }
  342. #center_column .products_block.accessories_block .block_content li{ background:none;  }
  343. #center_column .products_block.accessories_block .block_content li a.product_image, #center_column .products_block.accessories_block .block_content li a.product_description { border-right:1px solid #d0d3d8; font-weight:bolder; }
  344. #center_column .products_block.accessories_block .block_content li.last_item a.product_image{ border:none; }
  345.  
  346.  
  347. /* contact-form.tpl */
  348. body#contact-form div#center_column form input#email, body#contact-form div#center_column form select#id_contact, body#contact-form div#center_column form textarea#message{
  349.     width: 50%;
  350. }
  351.  
  352. form.std p.desc_contact span.like_input {
  353.     width: 366px;
  354.     text-align: left;
  355. }
  356.  
  357. /* conditions.tpl */
  358. #conditions #right_column { display: none; }
  359. #conditions h2 { background: transparent url('../img/title_bg_large.gif') no-repeat top left; }
  360. #conditions #center_column {
  361.     width: 730px;
  362.     text-align: justify;
  363. }
  364.  
  365. }

Yo se mas o menos algo de CSS, pero en este caso me considero novato.

Alguna sugerencia???
  #6 (permalink)  
Antiguo 14/02/2010, 18:35
 
Fecha de Ingreso: diciembre-2008
Mensajes: 454
Antigüedad: 15 años, 4 meses
Puntos: 2
Respuesta: Como hacer para que una columna se pegue a otra, y no que pase por debajo.
Cita:
Iniciado por Edmidimar Ver Mensaje
Gracias por las respuestas.

...

Hola easy los PX es solo a la columna derecha ya que es una sola medida igual que la columna izquierda. El 64% es por prueba para hacer la captura de pantalla, si le coloco 100% a la columna del medio está se amplia al ancho del monitor, pero solo hacia el lado derecho, sin tocar la columna derecha. Es como si para la columna del medio no existiese la de la derecha.

Alguna sugerencia???
A lo que me refiero es que a esa columna de la derecha la pongas dentro del 100% de lo ciontrario se te pondra encima y no te respetará la anchura que quieres verdaderamente (al menos la que te imaginas y como quieres que se vea).

intenta ponerle un ancho (width) dentro de los 100% por eso te dije que lo dividieras en % (porcentajes)

Saludos

Etiquetas: columna, pase
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 16:14.