MEDIDAS Y POSICI??N DEL CUERPO Y SIDEBAR «HACER UN BLOG»
Ahora, digamos que quieres que el cuerpo de las entradas sea m??s amplio, y la sidebar m??s estrecha, o transparente, o cambiarla de posici??n: /* Outer-Wrapper ———————————————– */ #outer-wrapper { width: 920px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } #main-wrapper { width: 500px; float: left; margin-left: 0px; padding: 15px; border: double 0.4em $bordercolor; background-color:#f8f8ff; filter:alpha(opacity=85); -moz-opacity:0.85; opacity:0.85; -khtml-opacity:0.85; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 140px; float: right; padding: 10px; border:6px outset grey; background-color:black; filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; -khtml-opacity:0.90; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } OUTER-WRAPPER: es la envoltura externa, lo que contiene al cuerpo y a la sidebar; ajusta las medidas, y recuerda que deben ser mayores que el tama??o de lo que contiene: es decir, si el cuerpo principal o «main-wrapper» mide 600px y la sidebar 200px, y adem??s tienen entre ellas un margen de 10 px (para separarlas), pues el «outer-wrapper«deber?? medir al menos 810px, o la barra lateral se desplazar?? hacia abajo por falta de espacio; tambi??n has de respetar la alineaci??n, si la sidebar la pones a la derecha, acu??rdate de cambiar la alineaci??n del cuerpo principal hacia la izquierda. MAIN-WRAPPER: es el cuerpo principal y contiene las entradas, y lo que pongas encima o debajo de ??stas. En este caso est?? posicionada a la derecha (right) de la sidebar, pero podr??as ponerla a la izquierda (left). Eso s??, no olvides entonces cambiar tambi??n la posici??n de la sidebar para que se coloque al otro lado. Ponle el color que quieras, en mi caso, escog?? que fuera un poco transparente, y para ello a??ad?? un filtro de opacidad; si quieres transparencia, copia y pega esa l??nea y disminuye el n??mero para hacerla m??s transparente y aum??ntalo para menor transparencia. ??Ojo! La transparencia se aplicar?? a TODO lo que contenga, es decir, texto y fotos de las entradas; asi que no te pases o ser?? ilegible e invisible. SIDEBAR-WRAPPER: pues s??, s??, es la sidebar como ya habr??s intuido; y, ??qu?? es elpadding? Pues la distancia entre el borde y lo que contiene; dale un valor de entre 6 y 10 px. para evitar que el texto se pegue a los bordes.
No Comments Found