- - Plantillas CSS

Plantillas CSS

Texto por encima de la pagina:
Code:

</style>
<div id="sidebar_container"></div> <div id="side"></div>
</style>

Texto por debajo de la pagina:
Code:

<div style="position:absolute;left:115px;top:135px"> <div id="tabs"> <ul> <li><a href="#" _fcksavedurl="#" title="Link 1"><span>Link 1</span></a></li> <li><a href="#" _fcksavedurl="#" title="Link 2"><span>Link 2</span></a></li> <li><a href="#" _fcksavedurl="#" title="Link 3"><span>Link 3</span></a></li> <li><a href="#" _fcksavedurl="#" title="Longer Link Text"><span>Longer Link Text</span></a></li> <li><a href="#" _fcksavedurl="#" title="Link 5"><span>Link 5</span></a></li> <li><a href="#" _fcksavedurl="#" title="Link 6"><span>Link 6</span></a></li> <li><a href="#" _fcksavedurl="#" title="Link 7"><span>Link 7</span></a></li> </ul> </div>

Codes sin style sin tags:
Code:

#tabs a { float:left; background:url("http://pixelea.com/s/acf81cdc52.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }

#tabs a span { float:left; display:block; background:url("http://pixelea.com/s/acf81cdc52.gif")

no-repeat right top; padding:5px 15px 4px 6px; color:#000000; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:# #ffffff; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; }

body{background-image:url(http://pixelea.com/s/dc9adf4090.jpg);background-attachment: fixed}

#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
#sidebar_container {display: none;}
div.header{display : none;}
h1#title{display: none;}
h2#title span {display: none;}
a{ color:#000000; text-decoration: none; font-size:13px;}
a:hover { color: #000000; font-size: 13px; text-decoration: none;}
a:link { color: #4A9AF6; font-size: 13px; text-decoration: none;}
a:active { color: #4A9AF6; font-size: 13px; text-decoration: none;}
a:visited { color: #000000; font-size: 13px; text-decoration: none;}
#header_container { position: absolute; left: 50%; margin-left:-360px; width: 770px; height:108px; background-color:#343434; background-image:url(http://pixelea.com/s/77b14de31a.png);
color:#FFFFFF; font-size:13px; border: 1px solid #000000;} #content { position: absolute; left: 50%; top: 176px; margin-left:-360px; width: 589px; height: auto; padding:10px; color: #000000; font-size:13px; background-color:#e7e7e7; background-image:url(http://pixelea.com/s/67e375259a.png); border: 1px solid #000000; overflow:auto;background-repeat:no-repeat;}
#nav_container{ position: absolute; left: 50%; top: 176px; margin-left: 250px; background-color:#dbdbdb; width: 160px; height: auto; border:1px solid #000000; overflow:auto;} ul#nav{ width: 160px; padding: 0px; margin: 0px;}
li.nav_element{ list-style-type: none; position: relative; padding:0px; width: 160px;}
border: 0px solid #000000;overflow:auto;background-repeat:no-repeat;} li.nav_element a:hover{ color: #000000; background-color:#C9C9C9; background-image: none;}
#sidebar_container{ position: absolute; left: 50%; top:176px; margin-left: 250px; width: 160px; height: 400px; background-color:#dbdbdb; background-image:url; border:1px solid #000000; color:#000000; overflow:auto;}
#side{ position: absolute; left: 50%; top:140px; margin-left: -360px; width: 770px; height: 35px; background-color:#dbdbdb; background-image:url(http://pixelea.com/s/51bfb34def.png); border:1px solid #000000; color:#000000; overflow:auto;}

Texto por encima de la pagina:
Code:

<head>
<title>tu titulo</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
</head>

<div id="cabecera"><img src="http://pixelea.com/s/58d4c353c8.png" width="700" height="106" alt="warioteayuda.es.tl" border="0"></div>

<div style="position:absolute;left:45px;top:200px;">
<img src="http://pixelea.com/s/056441bafb.png">
</div>

<div style="position:absolute;left:45px;top:420px;">
<img src="http://pixelea.com/s/056441bafb.png">
</div>

<div style="position:absolute;left:45px;top:650px;">
<img src="http://pixelea.com/s/056441bafb.png">
</div>
<div style="position:absolute;left:95px;top:300px;"><center>
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
</center></div>
<div style="position:absolute;left:775px;top:200px;">
<img src="http://pixelea.com/s/136080757d.png">
</div>

<div style="position:absolute;left:95px;top:510px;"><center>
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
</center></div>
<div style="position:absolute;left:95px;top:750px;"><center>
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
</center></div>

<div style="position:absolute;left:855px;top:220px;"><center>
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
<a href="#" class="enlacenav">link</a> <br />
</center></div>

<div style="position:absolute;left:675px;top:130px;"><center>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
</center></div>

<div style="position:absolute;left:45px;top:990px;">
<img src="http://pixelea.com/s/58fad67749.png">
</div>

<div style="position:absolute;left:110px;top:1035px;"><center>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
<a href="#" class="enlacenav">link</a>
</center></div>

Css codes sin style tags algoh asi xD:
Code:

BODY {
background : #C0D9D9 url(http://pixelea.com/s/515836e03f.png) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}

#content {
height: 740px;
width: 460px;
background:;
background-image:url(http://pixelea.com/s/7fb86853d2.png);
color: #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px;
display: inline;
float: left;
overflow:auto;
border: 1px solid #6E6E6E;
z-index: 4;
position:absolute;left:260px;top:170px;}

#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

a{
color:#4A9AF6;
text-decoration: none;
font-size:13px;}
a:hover {
color:#ffffff;
font-size: 13px;
text-decoration: none;}
a:link {
color:#4A9AF6;
font-size: 13px;
text-decoration: none;}
a:active {
color:#d3d7da;
font-size: 13px;
text-decoration: none;}
a:visited {
color:#1c3878;
font-size: 13px;
text-decoration: none;}

#counter {
position: absolute;
left: 50%;
top:4px;
margin-left: 300px;
width: 1000px;
height:0px;

Escoje el diseño que deseas ver con su codigo oprime en el nombre de la palntilla la cual deseas ver su codigo, todas estas plantillas que se encuntran en mi web son propias por lo tanto es porhibida su reroduccion sin una autorizacion

La otra dimencion artistica		Escritorio windows vista

Explocion Artistica Total		Mozilla Firefox Abstracta

Windows Live		Nedd For Speed

Mundo elfa		World Warcaft

Halo Wars		Diseño Rustico

Moxilla Firefox ( azul )		Moxilla Firefox ( gris )

Desing Gree

Pegar En Texto Por Encima De La Pagina

Pegar En Texto Por Debajo De La Pagina

Pegar En CSS-Code sin Style Tags:

* { margin: 0; padding: 0; } body { margin: 0px; background: #002F43 url(http://pixelea.com/s/ba0fa17679.jpg) repeat-x; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; color: #B9B9B9; } h1, h2, h3 { margin-bottom: 1.5em; } h1 { font-size: 2em; } h2 { font-size: 1.4em; } h3 { font-size: 1em; } p, ul, ol { margin-bottom: 1.5em; line-height: 180%; } ul, ol { margin-left: 3em; } blockquote { margin-left: 3em; margin-right: 3em; } a { color: #8AC800; } a:hover { text-decoration: none; } strong { color: #D7D7D7; } img.left { float: left; margin: 5px 25px 0px 0px; } img.right { float: right; margin: 5px 0px 0px 25px; } /* Background */ #bg1 { background: url(http://pixelea.com/s/c73a27e215.jpg) no-repeat center top; } #bg2 { background: url(http://pixelea.com/s/bda263a49c.jpg) no-repeat center top; } #bg3 { background: url(http://pixelea.com/s/f05e621d94.jpg) repeat-y center top; } #bg4 { background: url(http://pixelea.com/s/fe80edfbca.jpg) no-repeat center top; } #bg5 { background: url(http://pixelea.com/s/c8f54c9522.jpg) no-repeat center bottom; } /* Header */ #header { width: 900px; height: 145px; margin: 0px auto; text-transform: lowercase; color: #FFFFFF; } #header h1 { float: left; margin: 0px; padding: 70px 0px 0px 25px; font-size: 40px; } #header h1 sup { font-weight: normal; } #header h2 { float: right; margin: 0px; padding: 95px 25px 0px 0px; font-size: 14px; } #header a { text-decoration: none; color: #FFFFFF; } /* Header2 */ #header2 { width: 900px; height: 88px; margin: 0px auto; } /* Menu */ #menu { float: left; } #menu ul { margin: 0px; padding: 34px 0px 0px 0px; list-style: none; text-transform: lowercase; } #menu li { float: left; } #menu a { padding-left: 50px; text-decoration: none; font-size: 16px; font-weight: bold; color: #FFFFFF; } /* Search */ #search { float: right; } #search form { margin: 0px; padding: 35px 80px 0px 0px; } #search fieldset { margin: 0px; padding: 0px; border: none; } #search input.text { width: 160px; background: none; border: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #AEC38B; } #search input.button { display: none; } /* Page */ #page { width: 846px; margin: 0px auto; padding: 40px 0px 0px 0px; } /* Content */ #content { float: left; width: 583px; } .post { } .post .title { height: 49px; background: url(http://pixelea.com/s/37518651b0.gif) no-repeat; } .post .title h2 { float: left; padding: 12px 0px 0px 24px; font-size: 24px; text-transform: lowercase; } .post .title h2 a { text-decoration: none; color: #FFFFFF; } .post .title h2 a:hover { color: #8AC800; } .post .title p { float: right; padding: 12px 24px 0px 0px; font-size: 15px; font-weight: bold; color: #343434; } .post .entry { padding: 30px 23px 0px 23px; } .post .meta { height: 70px; clear: left; margin: 0px 23px; padding: 15px 0px 0px 0px; border-top: 1px solid #262626; } .post .meta .credit { float: left; } .post .meta .links { float: right; } .post .meta .links .more { padding-left: 17px; background: url(http://pixelea.com/s/7915f31be3.gif) no-repeat left center; } .post .meta .links .comments { padding-left: 19px; background: url(http://pixelea.com/s/eac0c928ac.gif) no-repeat left center; } /* Sidebar */ #sidebar { float: right; width: 236px; } #sidebar ul { margin: 0px; padding: 0px; list-style: none; } #sidebar li { background: url(http://pixelea.com/s/6705ead40f.gif) no-repeat; padding: 0px 23px 20px 23px; } #sidebar li ul { } #sidebar li li { padding: 8px 0px; background: none; border-bottom: 1px solid #262626; } #sidebar h2 { margin: 0px; padding: 16px 0px 30px 0px; text-transform: lowercase; font-size: 14px; color: #FFFFFF; } /* Footer */ #footer { } #footer p { margin: 0px; padding: 20px 0px; text-align: center; text-transform: lowercase; color: #566D77; } #footer a { color: #8097A1; } div.header, #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6, #pre_header, #post_header, #header_container, #pre_content, #nav_heading{ display: none;} div#nav_container{display: none;} div#sidebar_container{display: none;} div.header{display: none;} div#counter{display: none;} h1#title{display: none;} h2#title span {display: none;} li.nav_element{display: none;} li.nav_element a{display: none;}

Regalo

Pegar En Texto Por Encima De La Pagina

Pegar En CSS-Code sin Style Tags

La Mejor Web

Pegar En Texto Por Encima De La Pagina

Pegar En CSS-Code sin Style Tags:

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} #text{ color: ffffff; position: absolute; top: 100px; margin-left:-300px; left: 50%; } body { background-image:url(fondo );background-color:#000000;} *{ padding: 0; margin: 0; } #Ancient { margin: 0 auto; width: 1024px; height:768px; background-image:url(http://pixelea.com/s/ae58dac6a3.png);} #content { position: absolute; left:412px; top: 335px; margin-left:-171px; width: 550px; height: 420px; padding:10px; color: #transparent; font-size:13px; background-color:#transparent; background-image: none; border: 1px solid #; overflow:auto;} #menu { position: absolute; left: 1000px; top: 350px; margin-left:-171px; width: 150px; height: 400px; padding:10px; color: #white; font-size:10px; background-color:#ffffff; background-image: none; border: 3px solid #0006FF; overflow:auto;} #header { display:none;} #header2 { position: absolute; left: 43%; top: 65px; margin-left:-171px; width: 380px; height: 30px; padding:10px; color: #white; font-size:13px; background-color:#white; background-image: none; border: 1px solid #FFFFFF; overflow:none;} #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#cccccc;} a{ color:#ffffff; text-decoration: none; font-size:13px;} a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:link { color: #000000; font-size: 13px; text-decoration: none;} a:active { color: #000000; font-size: 13px; text-decoration: none;} a:visited { color: #000000; font-size: 13px; text-decoration: none;}

My Web Navideña

Pegar En Texto Por Encima De La Pagina

Pegar En CSS-Code sin Style Tags:

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} #text{ color: ffffff; position: absolute; top: 100px; margin-left:-300px; left: 50%; } body { background-color:#ffffff;} *{ padding: 0; margin: 0; } #Designmystic { margin: 0 auto; width: 800px; height:700px; background-image:url(http://pixelea.com/s/59f48364bd.png);} #content { position: absolute; left:60%; top: 230px; margin-left:-226px; width: 500px; height: 460px; padding:10px; color: #707070; font-size:12px; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;} #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#cccccc;} a{ color:#707070; text-decoration: none; font-size:13px;} a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:link { color: #000000; font-size: 13px; text-decoration: none;} a:active { color: #707070; font-size: 13px; text-decoration: none;} a:visited { color: #cccccc; font-size: 13px; text-decoration: none;} div.lux { position: absolute; z-index: 3; top: 58px; left: 52%; margin-left: -160px; width: 100px; } .lux a { border: 0px solid #xxxxxx; background-color: #xxxxxx; background-image:  none; text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; margin: 0px; display: block; height:21px; color: #FFF; font-size: 60px; }