¡Pregunta!
¡Envía algo!
¡Envía un email!
Creador de Memes
Lo mejor de Leslie Nielsen
Versión Soft
Decimotercero post de ayuda. Podéis ver los anteriores aquí.
En este tutorial veremos cómo añadir una nueva barra lateral a nuestra página. Como ya tenemos una a la derecha, la añadiremos a la izquierda.
(Nota: Antes de nada, revisad los errores comunes. Es importante.)
Cómo ya sabemos la barra lateral está formada de la siguiente forma:
<div id="sidebar">
<div id="top">
CONTENIDO
</div>
</div>
Para añadir una barra a la izquierda vamos a usar la misma estructura, pero renombrando los id:
<div id="sideleft">
<div id="topleft">
CONTENIDO
</div>
</div>
Tenemos que hacer lo mismo en el CSS (style). Buscamos y copiamos los siguientes códigos completos (desde el primer # hasta el } de cierre):
#wrapper #sidebar {
#wrapper #sidebar #top {
Y los renombramos como arriba (#sideleft #topleft). Además, en #sideleft cambiamos:
float: right;
por
float: left;
Y añadimos:
margin: 0px 20px 0px 0px;
Siendo 20px el margen entre la barra de la izquierda y la parte del contenido (la de los post).
Y en el #topleft cambiamos:
padding: 0 20px;
por
padding: 20px;
Y añadimos:
margin: 0px 0px 20px 0px;
Los 20px de padding serán los márgenes interiores y los 20px la separación entre 2 topleft.
En mi caso quedaría lo siguiente (lo pongo de ejemplo para que veáis de forma más clara lo que debéis hacer, pero no recomiendo un copy/paste de este código, ya que vuestra barra de la izquierda será distinta de la de la derecha):
#wrapper #sideleft {
margin: 0px 20px 0px 0px;
width: 260px;
float: leftt;
color: {color:Background};
font-family: {font:Accent}
}
#wrapper #sideleft #topleft {
border-radius: 10px 10px 10px 10px;
border: 4px solid #000;
box-shadow: 0 0 5px 5px rgba(0,177,223,1);
background: #fff;
padding: 20px;
margin: 0px 0px 20px 0px;
}
Ahora tenemos que buscar #wrapper { y a su width sumarle el width de sideleft y el margen que hemos puesto. En mi caso teníamos esto:
#wrapper {
width: 845px;
margin: 0 auto;
}
Y nos quedará esto:
#wrapper {
width: 1125px; /* 845 + 260 + 20 de margen */
margin: 0 auto;
}
Por último, ya sólo nos queda añadir los <div> del principio a nuestra página. Buscamos <div id=”content”> y los pegamos justo antes. Por ejemplo:
<div id="sideleft"> <div id="topleft"> <img src="http://27.media.tumblr.com/tumblr_m2pavzQyNR1r1m0jso1_250.png"> </div> <div id="topleft"> <img src="http://assets.tumblr.com/images/default_avatar_128.gif"> </div> </div>
Quedaría de la siguiente forma:
PD: Si el banner de vuestra página se sitúa a la izquierda de todo, y queréis que salga centrado, simplemente tenéis que buscar en CSS (style) #wrapper #title { y añadirle:
text-align: center;
Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda
Enlace:
Ver Post • Ver las 6 notas • Ver comentarios
Anónimo
