estilo-css

preparando el diseno I

[Tema 2] preparando el diseño:
En este tema veremos como preparar nuestro diseño, basicamente se basa en ver la estructura que va a tener. Por lo que si vas a ver este tema vete a Paginawebgratis.es, si no tienes cuenta registrate y vete a editar diseño y selecciona CSS Design - general - no tan popular. Cuando tengamos esto guardado vamos a "Configuraciones avanzadas".


Ocultar elementos por defecto

En Paginawebgratis.es hay elementos por defecto, como por ejemplo cuando añades un menu, se visualiza en tu pagina atomaticamente, al igual que si añadimos contenido.

Estos elementos se pueden ocultar añadiendo "{display: none;} a los elementos por defecto.

Un ejemplo sensillo:
Código: lli.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;}

un ejemplo avanzado:
Código: #pre_header {display: none;}
#post_header {display: none;}
#header_container {display: none;}
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}


El codigo completo de estructuracion

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;}

* {
margin: 0;
padding: 0;
}

body { background: #404040 url(FONDO.png);
font: normal 13px Verdana;
color: #345;
padding-bottom: 1em;
}

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: #FFF; padding: 5px;
border: 1px solid #DDD;
}

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: 10px auto 0;
width: 780px;
}

#layout_container { background: #FFF;
padding: 0 5px;
}

#layout_edgetop, #layout_edgebottom { background: url(BARRA SOBRE HEADER) no-repeat left top;
display: block;
height: 10px;
font-size: 0;
line-height: 0;
}

#layout_edgebottom { background-position: left bottom;
}

/* Seachform */ table.search { width: 100%;
border-collapse: collapse;
}

.search td { vertical-align: center; }

#main-wrapper { overflow:hidden; }

.clear { clear:both; }

#blog-pager-newer-link { float: left; }

#blog-pager-older-link { float: right; }

#blog-pager { text-align: center; }

/*-- (Cabecera) --*/

#header-wrapper { background: #C5DEF0 url(HEADER.png) repeat-x left top; padding: 6px 18px;
}

#header-wrapper h1 { font: normal 2.4em sans-serif;
letter-spacing: -1px;
color: #507A9A;
float:left;
}

#header-wrapper h1 a { color: #507A9A;
text-decoration: none;
}

#header-wrapper h1 a:hover { color: #305A7A
}

#header-wrapper p { padding: 1.4em 0 0;
font: normal 1.1em sans-serif;
color: #667799; float:right;
}
#top_separator { background: url(SEPARADOR ENTRE HEADER Y MENU.png) repeat-x left top;
display: block;
font-size: 0;
height: 3px;
line-height: 0;
}

/*-- (Menu) --*/

#navigation { background: #739CBA url(IMAGEN DONDE ESTARA EL MENU.png) no-repeat left bottom;
padding: 82px 10px 0;
}

/* Tabs */
#tabs ul { margin: 0; padding: 0; } #tabs li { display:inline;
list-style:none; }
#tabs a { background: url(MENU HOVER.png) 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.png) no-repeat right top;
padding: 5px 10px 5px 6px;
color: #608AAA;
}
/* Commented Backslash Hack hides rule from IE5-Mac */ #tabs a span {float: none;} /* End IE5-Mac hack */
#tabs a:hover span {color: #608AAA;} #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;}

/*-- (Contenedor) --*/
.h5 {
height:5px;
}

/* Contenido */

#content { width: 545px;
float:left;
}

#content a { }
#content a:hover { }
.date-header { color: #999999;
padding-top: 1px;
font-size: 0.85em;
float:right;
}

.post-footer, p.comment-footer {
padding: 8px 10px 6px;
background: #F5F5F5;
color: #666;
border-top: 1px solid #E5E5E5; 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: 18px;
float:right;
}
.post_bottom { background: url(BARRA ABAJO DE FOOTER) no-repeat left top;
display: block;
height: 5px;
font-size: 0;
line-height: 0;
}
.feed-links {display:none;} .blog-pager {margin:10px 0; font-size:0.8em;
}

/* Sidebar */
#sidebar { float:right;
width: 220px;
}

#sidebar ul{ margin-left: 0;
border-bottom: 1px solid #E2ECF2;
}

#sidebar li{ list-style: none;
padding: 4px;
border-top: 1px solid #E2ECF2;
border-bottom: 1px solid #D0D8DE;
}

#sidebar li:first-child {
border-top: none;
}

#sidebar li a{
text-decoration: none;
}

#sidebar li a:hover{
text-decoration: underline;
}

#sidebar h2 {
background: #C6D2DB url(BARRA SIDEBAR SUPERIOR.png) no-repeat left top;
padding: 6px 10px 5px;
font-weight: bold; font-size: 0.9em;
color: #505E69;
display:block;
}

#sidebar .widget-content {
background: #DAE3E9 url(IMAGEN DE CONTENIDO SIDEBAR.png) repeat-x left top;
padding: 8px 10px 1px;
font-size: 0.9em;
}

#sidebar .widget {
padding-bottom: 5px; background: url(BARRA SIDEBAR INFERIOR.png) no-repeat left bottom;
margin-bottom:5px;
}

/*-- Footer --*/

#footer { background: #A3B5C1 url(IMAGEN FOOTER.png) no-repeat left top;
padding: 8px 12px 2px;
font-size: 0.85em;
color: #FAFCFF;
text-align:center;
}

#footer { color: #C8DBE8; }

#footer a { color: #D3E5F1; 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; }
Recomendamos que revises el código y empiezes a diseñar las imágenes de la web, el header, el menú, el box y el footer. Prepáralo en una carpeta y cuando termines pasa al siguiente tema.

Siguiente pagina

Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis