Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje08-10-2008, 17:25 (UTC)    
Título del mensaje: [Tutorial Css] Plantillas para avanzados SENCILLO

Un ejemplo de esta plantilla la encuentan en
http://tutoresweb.es.tl

Con este codigo podran crear un plantilla para avanzados a sus webs todo esto va en el diseño Css Desing

1 parte

Peguen esto por encima de la pagina

Cita:
<div id="Design">
<div id="Header_oben"></div>


2 parte

Peguen esto por debajo de la pagina

Cita:
<div id="Feld_oben"><b> </b></div></div>
<div id="Feld_oben_2"><b> </b></div></div>
<div id="Feld_unten-2"><b> </b></div></div>
<div id="Feld_rechts_3"><b> </b></div></div>
<div id="Feld_rechts_5"><b> </b></div></div>
<div id="Feld_rechts_6"><b> </b></div></div>
<div id="Feld_rechts_7"><b> </b></div></div>
<div id="content_2"><b> </b></div></div>
<div id="Nav_hinten"><b> </b></div></div>
<div id="top_1"><b> </b></div></div>
<div id="Anzeige">
Design-"Css"
</div></div>


3 parte

-Esta zona requiere de mucha modificacion asi que analicen bien el codigo

-Peguen el siguiente codigo en CSS-Code sin Style Tags


Cita:
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
div{z-index: 2px;}
#Header_oben {
height: 170px;
width: 955px;
background:;
background-image:url(URL DEL ENCABEZADO);
color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
z-index: 2;
position:absolute;left:20px;top:26px;
}
#top_1 {
height: 25px;
width: 980px;
background:;
background-image:url(URL DE LA BARRA PRINCIPAL);
color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
z-index: 2;
position:absolute;left:13px;top:141px;
}
body {background-image:url();
background-attachment: fixed;
background:#000000;
background-repeat: repeat-y;
background-position: center center;
z-index: -2;
font-size: 12px;
font-family: Arial;
}
a{color#000000; font-size: 12px; text-decoration: none;}
a:hover {color: #000000; font-size: 12px; text-decoration: none;}
a:link {color: #00013B; font-size: 12px; text-decoration: none;}
a:active {color: #000000; font-size: 12px; text-decoration: none;}
a:visited {color: #000000; font-size: 12px; text-decoration: none;}
li.nav_element a{
color:#000000;
display: block;
line-height: 25px;
margin: 5px;
padding-left: 10px
text-decoration: none;
text-align: center;
width: 180px;
height: 30px;
background-image:url(URL DEL BOTON);
background-color:}
li.nav_element a:hover{
color:#ffffff;
display: block;
line-height: 25px;
margin: 5px;
padding-left: 10px
text-decoration: none;
text-align: center;
width: 180px;
height: 30px;
background-image:url(URL DEL BOTON);
background-color:}
* { padding: 0; margin: 0; }
* { padding: 0; margin: 0; }
#Design {
width: 921px;
height: 1520;
}
#nav_container {height: 300px;
width: 200px;
background:;
background-image:url();
color:#ffffff;
margin: 0px 0px 0px 0px;
padding: 0px;
border: 1px solid #6E6E6E;
float: left;
overflow:auto;
z-index: 4;
position:absolute;left:780px;top:240px;}
#Nav_hinten{
width: 218px;
height: 430px;
background:;
background-image:url();
color: ;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;overflow:auto;
z-index: 1;
position:absolute;left:650px;top:183px;}
#content {
height: 726px;
width: 730px;
background:;
background-image:url();
color: #000000;
margin: 0px 0px 0px 0px;
padding: 0px;
display: inline;
float: left;
overflow:auto;
border: 1px solid #6E6E6E;
z-index: 4;
position:absolute;left:25px;top:239px;}
#content_2 {
height: 1000px;
width: 980px;
background:;
background-image:url(URL DEL FONDO Y TEXTO DE LA WEB);
color: #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px;
display: inline;
float: left;
overflow:auto;
z-index: 0;
position:absolute;left:13px;top:27px;}
#sidebar_container {
height: 396px;
width: 200px;
background:;
background-image:url();
color:#000000;
margin: 0px 0px 0px 0px;
padding: 0px;
border: 1px solid #6E6E6E;
float: left;
overflow:auto;
z-index: 4;
position:absolute;left:780px;top:570px;}
#Feld_oben {
width: 202px;
height: 20px;
background-image:url(URL DE LA BARRA DIVISORA DEL MENU PRINCIPAL);
color: ffffff;
margin: 0px 0px 10px 0px;
padding: 0px;
clear: both;
z-index: 4;
position:absolute;left:780px;top:220px;}
#Feld_oben_2 {
width: 202px;
height: 20px;
background-image:url(URL);
color: ffffff;
margin: 0px 0px 10px 0px;
padding: 0px;
clear: both;
z-index: 4;
position:absolute;left:710px;top:500px;}
#Feld_rechts_5 {
height: 40px;
width: 742px;
background:;
background-image:url(URL DE LA BARRA ESPACIADORA DEL 1 BOX);
color:#ffffff ;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
overflow:auto;
z-index: 2;
position:absolute;left:25px;top:220px;}
#counter{
position:absolute;
left: 815px;
top: 6px;
font-size: 12px;
z-index: 6;
color: #ffffff;
}
#Anzeige{
position:absolute;
left: 40px;
top: 223px;
z-index: 5;
font-family:;
color: #ffffff;
}



Espero que el tutorial les sirva
______________
Codigos gratis
Plantillas Gratis

Entra ami web y consigue lo mejor en ayuda
.::Tutores web::.
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group