preparando el diseno III
PD: vete a Paginawebgratis.es, entra en tu cuenta y vete a editar diseño. Una vez alli selecciona Css-Design - no tan popular y vas a opciones avanzadas. Una vez que estes en opciones avanzadas vete colocando los codigos que te decimos por orden, en CSS-Code sin Style Tags.
Ocultar elementos por defectos de Paginawebgratis.es
Como ya habiamos dicho Paginawebgratis.es tiene elementos por defecto que solo se quitan con dos tipos de codigos, nosotros utilizaremos el avanzado.
-Añade este codigo(no se modifica):
- Código:
li.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
-Ahora colocamos(no recomendable modificar):
- Código:
* {
margin: 0;
padding: 0;
}
El fondo
-Añade este codigo(modificalo):
- Código:
body {
background: url(http://i50.tinypic.com/2642s09.jpg);
font: normal 13px Verdana;
color: #000000;
padding-bottom: 1em;
}
*Background: es una forma rapida para las propiedades mas especificas relacionadas con background y en este caso define el fondo de la web.
*font: puede usarse como una forma rápida para las diferentes propiedades de fuentes.
*color: permite especificar el color de un elemento.
*padding: es una manera rápida de aplicar las propiedades padding-top, padding-right, padding-bottom y padding-left. En este caso utilizamos padding-bottom, describe cuanto espacio colocar entre el borde inferior y el contenido del selector.
-Ahora copia esto por debajo de body(recomendable no modificar):
- Código:
a {
color: #0066AA;
}
a:hover {
color: #003366;
}
p {
padding: 0.1em 0 0.8em;
}
h1 {
font: normal 1.8em Georgia,Tahoma,sans-serif;
}
h2 {
font: normal 1.5em Georgia,sans-serif;
}
h3 {
font: bold 1em Tahoma,sans-serif;
}
html {
height: 100%;
padding-bottom: 1px;
}
ul,ol {
margin: 0 0 1em 1.6em;
}
ul ul, ol ol {
margin: 0.3em 0 0.3em 1em;
}
img {
border: none;
}
img.bordered {
background: #000000;
padding: 5px;
border: 2px solid #000000;
}
img.left {
margin-right: 1em;
}
img.right {
margin-left: 1em;
}
small,.small {
font-size: 0.8em;
}
big,.big {
font-size: 1.2em;
}
#layout_wrapper {
margin: 5px auto 0;
width: 780px;
}
#layout_container {
background: #FFF;
padding: 5 5px;
}
#layout_edgetop, #layout_edgebottom {
background: url(BARRA SOBRE HEADER) no-repeat left top;
display: block;
height: 5px;
font-size: 0;
line-height: 0;
} #
layout_edgebottom {
background-position: left bottom;
}
¡clic aqui!
El header
-Despues del fondo colocamos el header, copia este codigo(modificalo):
- Código:
#header-wrapper {
background: url(http://i25.tinypic.com/zv7p0x.png) repeat-x left top;
padding: 45px 136px;
}
En background colocamos la url de tu header o cabezal. Yo recomiendo 780 de ancho, ya que el menu tambien mide 780 de ancho.
El menu
-Copia y pega este codigo(modificalo):
- Código:
/*-- (Menu) --*/
#navigation {
background: url(http://i47.tinypic.com/atrqqq.png) no-repeat left bottom;
padding: 65px 156px 0;
}
/* Tabs */
#tabs ul {
margin: 0;
padding: 0;
}
#tabs li {
display: inline;
list-style: none;
}
#tabs a {
background: url(MENU HOVER) no-repeat left top; float: left;
font: bold 0.9em sans-serif;
margin-right: 3px;
padding-left: 4px;
text-decoration: none;
}
#tabs a span {
float: left;
display: block;
background: url(MENU AHOVER) no-repeat right top; padding: 5px 10px 5px 6px;
color: #FFFFFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */ #tabs a span {float: none;} /* End IE5-Mac hack */ #tabs a:hover span {color: #000000;} #tabs a:hover {background-position: 0% -42px;} #tabs a:hover span {background-position:100% -42px;} #tabs li.current_page_item a {color: #47A; background-position: 0% -42px;} #tabs li.current_page_item a span {background-position:100% -42px;}
Bien recomiendo que modifiqueis solo el menu y los tabs, el otro codigo no lo toqueis. Como vemos en menu son las mismas propiedades que en body. background quiere decir el fondo del menu. Donde nosotros hemos añadido nuestra imagen que mide 780x90.
En tabs, lo he dejado tal cual, sin modificar nada, ya que cuando el raton pase por encima del texto se vea de color blanco. No hace falta añdir imagen, si quieres añadir una imagen iria en "MENU AHOVER".
*Si quieres que el menu mida lo mismo que tu cabezal de ancho, recomiendo porner repeat-x y el menu quedaria asi:
Código:
#header-wrapper {
background: url(http://i25.tinypic.com/zv7p0x.png)
repeat-x left top;
padding: 45px 136px;
}
El contenido
-copia este codigo y pegalo despues del
- Código:
/*-- (Contenedor) --*/
.h5 {
height:5px;
}
/* Contenido */
#content {
width: 515px;
float: left;
}
.date-header {
color: #999999;
padding-top: 0px;
font-size: 0.50em;
float:right;
}
.post-footer, p.comment-footer {
padding: 8px 10px 6px;
background: #F5F5F5;
font-size: 0.8em;
}
.post-footer a{
color: #567;
}
.post-footer a:hover{
color: #002;
}
.post-footer .comment-link {
background: none no-repeat left center;
padding-left: 6px;
float:right;
}
.post_bottom {
background: url(http://i46.tinypic.com/1znr868.png) no-repeat left top;
display: block;
height: 0px;
font-size: 0;
line-height: 0;
}
.feed-links {display:none;}
.blog-pager {margin:10px 0;
font-size:0.8em;}
La mayoria de codigos no sirven para nada practicamente, pero en este codigo se modifica el tamaño de ancho del contenido.:
- Código:
/* Contenido */
#content {
width: 515px;
float: left;
}
El sidebar
- Código:
/* Sidebar */
#sidebar { float: right;
width: 240px;
}
#sidebar ul{
margin-left: 0;
border-bottom: 2px solid #000000;
}
#sidebar li{
list-style: none;
padding: 4px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#sidebar li:first-child {
border-top: none;
}
#sidebar li a{
text-decoration: none;
}
#sidebar li a:hover{
text-decoration: underline;
}
#sidebar h2 {
background: url(http://i49.tinypic.com/r1ar9c.png) no-repeat left top;
padding: 6px 10px 5px;
font-weight: bold;
font-size: 0.9em;
color: #FFFFFF;
display:block;
}
#sidebar .widget-content {
background: #eeeeee repeat-x left top;
padding: 8px 10px1px;
font-size: 0.9em;
}
#sidebar.widget {
padding-bottom: 5px;
background: url(http://i47.tinypic.com/33o1aud.png) no-repeat left bottom;
margin-bottom:5px;
}
En #sidebar se puede modificar el tamaño del sidebar. En #sidebar h2 se pone el boton de arriva del box y el color de la letra. Nosotros hemos puesto una imagen en el boton de arriva, la puedes ver haciendo clic aqui y el texto blanco(#FFFFFF). En #sidebar.widget hemos puesto una imagen en el boton de abajo, la puedes ver haciendo clic aqui.
El footer
-Despues del sidebar, coloca este codigo (es modificable)
- Código:
/*-- Footer --*/
#footer {
background: #A3B5C1 url(http://i46.tinypic.com/1znr868.png) no-repeat left top;
padding: 8px 12px 2px;
font-size: 0.85em;
color: #FAFCFF;
text-align:center;
}
#footer {
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
text-decoration: none;
}
#footer a:hover {
color: #FFE;
text-decoration: underline;
}
.left {
float: left;
}
.right {
float: right;
}
.clear,.clearer {
clear: both;
}
.clearer,.spacer {
display: block;
font-size: 0;
line-height: 0; }
En el footer es lo mismo que el menu, sidebar, contenido, se puede modificar de varias formas, pero tal y como esta te recomiendo que utilizes solo tu imagen y la cambies.
*Hemos terminado este tema y nuevamente repito que si no has entendido alguna propiedad, puedes buscar su significado en esta web:
clic aqui.