yazın sanal aleminin eğlence sitesi

tasarımdgd

Lun Nov 24, 2008 5:45 pm
Título del mensaje: [Diseño para CSS-Desing] ..::Web 2.0 Blog style::..

Lo ize yo de nuevo y me aventure a hacer algo parecido a un blog o mas bien fotolog no lo se pero lo dejo a criterio de ustedes.

Texto por encima de la pagina:

Texto por encima de la pagina: escribió:

<div id="tb">Diseño por <a href="http://todobanners.es.tl">todobanners</a> </div>
<div id="afilado1">Aca coloque la imagen del afiliado1 </div>
<div id="afilado2">Aca coloque la imagen del afiliado2 </div>
<div id="afilado3">Aca coloque la imagen del afiliado3 </div>
<div id="afilado4">Aca coloque la imagen del afiliado4 </div>
<div id="content"></div>
<div id="menu_tbcontenedor">
<div id="menu_tb">
<div id="menu">
<ul>
<li><a href="http://todobanners.es.tl">Link1</a></li>
<li><a href="http://todobanners.es.tl">link2</a></li>
<li><a href="http://todobanners.es.tl">link3</a></li>
<li><a href="http://todobanners.es.tl">link4</a></li>
<li><a href="http://todobanners.es.tl">link5</a></li>
<li><a href="http://todobanners.es.tl">link6</a></li>
<li><a href="http://todobanners.es.tl">link7</a></li>
<li><a href="http://todobanners.es.tl">link8</a></li>
<li><a href="http://todobanners.es.tl">link9</a></li>
<li><a href="http://todobanners.es.tl">link10</a></li>
<li><a href="http://todobanners.es.tl">link11</a></li>
<li><a href="http://todobanners.es.tl">link12</a></li>

</ul>
</div>
</div>
</div>
<div id="imagen1">Aca coloque una imagen2</div>
<div id="imagen2">Aca coloque una imagen3</div>
<div id="imagen3">Aca coloque una imagen4</div>
<div id="header_oben">Texto del cabezal </div>

CSS-Code sin Style Tags:

CSS-Code sin Style Tags: escribió:

body {
background-image: url(http://img75.imageshack.us/img75/103/webdesing20zs7.png);
background-color: #0000FF;
background-repeat: no-repeat;
overflow: scroll;
}
#header {
visibility: hidden;
}
#nav_container {
visibility: hidden;
}
#tb {
position:absolute;
left:316px;
top:1322px;
width:285px;
height:-4px;
z-index:1;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #FF0000;
background-color: #666666;
}
a:link {
color: #FFCC00;
}
#afilado1 {
position:absolute;
left:31px;
top:1192px;
width:180px;
height:110px;
z-index:2;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#afilado1 {
position:absolute;
left:33px;
top:1194px;
width:174px;
height:109px;
z-index:3;
overflow: auto;
}
#afilado2 {
position:absolute;
left:238px;
top:1192px;
width:177px;
height:108px;
z-index:4;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#afilado3 {
position:absolute;
left:439px;
top:1191px;
width:179px;
height:110px;
z-index:5;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#afilado4 {
position:absolute;
left:645px;
top:1192px;
width:176px;
height:110px;
z-index:6;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#content {
position:absolute;
left:20px;
top:571px;
width:795px;
height:579px;
z-index:7;
vertical-align: 2%;
text-align: justify;
padding-left: 12px;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
color: #FFFFFF;
overflow: auto;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
margin-top: 8px;
margin-right: 10px;
margin-bottom: 50px;
margin-left: 0px;
color: #CCCCCC;
}
#menu {
padding:50px 135px 0 0;
float:right;
position: absolute;
left: 2px;
top: 474px;
height: -2px;
width: 799px;
font-family: Arial, Helvetica, sans-serif;
}
#menu ul {margin-top:0;}
#menu ul li {display:inline;}
#menu a {font-size:14px; text-decoration:none; color:#FFFFFF; padding:5px 10px; text-transform:lowercase;}
#menu a:hover {border-bottom:2px solid #FFFF00;}
#counter {
visibility: hidden;
}

#sidebar_container {
position:absolute;
left:10px;
top:299px;
width:199px;
height:188px;
z-index:9;
background-image: url(boxdercho_imagen);
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#imagen1 {
position:absolute;
left:236px;
top:302px;
width:186px;
height:187px;
z-index:10;
background-image: url(imagen1fondo);
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#imagen2 {
position:absolute;
left:446px;
top:304px;
width:191px;
height:184px;
z-index:11;
background-image: url(imagen2fondo);
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#imagen3 {
position:absolute;
left:658px;
top:305px;
width:183px;
height:183px;
z-index:12;
background-image: url(imagen3fondo);
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#header_oben {
position:absolute;
left:68px;
top:59px;
width:230px;
height:46px;
z-index:13;
background-image: url(imagen_del_cabezal);
font-family: Arial, Helvetica, sans-serif;
padding-top: 150px;
padding-right: 12px;
padding-bottom: 12px;
padding-left: 500px;
color: #FFFFFF;
font-size: 24px;
overflow: auto;
}

hola aca les traigo una plantilla que la creamos con esmero y eseramos que les guste

de parte wedmasterayuda todobanners y nosedeqe

El codigo es asi

pega este por encima de la pagina

Código:

pega esto por debajo de la pagina

Código:

pega esto en css code sin style tags

Código:

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: 250px;
width: 400px;
background:;
background-image:url(http://pixelea.com/s/17781be9fb.png
);
color: #ffffff ;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
z-index: 2;
position:absolute;left:320px;top:55px;}

#top_1 {
height: 25px;
width: 980px;
background:;
background-image: none;
color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
z-index: 2;
position:absolute;left:13px;top:200px;}

body {
background-image: none;
background-attachment: fixed;
background:#000000;
background-repeat: repeat-y;
align:center;
z-index: -2;
font-size: 12px;
font-family: Arial;text-align:center;
font-color:red;
font-size: 12px;}

a{color:#000000; font-size: 13px; text-decoration: none;}
a:hover {color: #000000; 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;}
li.nav_element a{
color:#ffffff ;
display: block;
line-height: 25px;
margin: 5px;
padding-left: 50px
text-decoration: none;
text-align: center;
width: 180px;
height: 30px;
background-image:url(https://img.webme.com/pic/t/the-playa/unbenannt-30.jpg
);
background-color:}
li.nav_element a:hover{
color:#ffffff;
display: block;
line-height: 25px;
margin: 5px;
padding-left: 50px
text-decoration: none;
text-align: center;
width: 180px;
height: 30px;
position: relative;
align:center;
background-image:url(https://img.webme.com/pic/t/the-playa/unbenannt-30.jpg);
background-color:}
* { padding: 0; margin: 0; }
* { padding: 0; margin: 0; }

#Design {
width: 900px;
height: 1520px;}

#nav_container {
height: 320px;
width: 185px;
background:;
background-image:url(http://img165.imageshack.us/img165/1876/vistamenukg3.png);
color:#000000;
margin: 0px 0px 0px 0px;
padding: 0px;
border: 1px solid #6E6E6E;
float: left;
overflow:auto;
z-index: 4;
position:absolute;left:750px;top:35px;}

#content {
height: 726px;
width: 1000px;
background:;
background-image:url(http://img141.imageshack.us/img141/4150/centrovistahs9.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:0px;top:440px;}

#content_2 {
height: 1520px;
width: 900px;
background:;
background-image: none;
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: 320px;
width: 210px;
background:;
background-image:url(http://img155.imageshack.us/img155/6629/boxvistajh8.png
);
color:#000000 ;
margin: 0px 0px 0px 0px;
padding: 0px;
border: 1px solid #6E6E6E;
float: left;
overflow:auto;
z-index: 4;
position:absolute;left:50px;top:35px;}

#Feld_oben {
width: 0px;
height: 0px;
background-image: none;
color: ffffff;
margin: 0px 0px 10px 0px;
padding: 0px;
clear: both;
z-index: 4;
position:absolute;left:780px;top:250px;}
#Feld_rechts_5 {
height: 0px;
width: 0px;
background:;
background-image: none;
color:#ffffff ;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
overflow:auto;
z-index: 2;
position:absolute;left:25px;top:40px;}

#counter{
position:absolute;
left: 900px;
top: 8px;
font-size: 14px;
z-index: 6;
color: #ffffff; }

#navegador{
background : #ffffff url(http://www.fileden.com/files/2007/6/19/1190933/bmid_072.gif);
padding : 5px 750px 7px 10px;
position:absolute;
left: 5%;
top: 370px;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
}
A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{
color: #000000;
}
A.enlacenav:HOVER{
color: #3F7DE3;
}

Vie Nov 14, 2008 1:30 am
Título del mensaje: [Diseño para - Css Desing]wedmasterayuda y nosedeqe

Despues de haber tantas plantillas solo he decidido unirme con algien muy especial en P.W.G el fin de la union es ayudar mas a los usuarios de P.W.G en sus webs

Hablo de wedmasterayuda y nosedeqe

El primer proyecto es una plantilla para Css Desing

Su codigo es

pega este por encima de la pagina

Código:

<div id="navcontainer">
<ul id="navlist">

<li id="active"><a id="current" href="#">Link</a></li>

<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>

<div id="content1">
</div>
<div id="footer">

<a href="#">Texto</a>
|
<a href="#">Texto</a>

<br>
<br>Copyright © 2008 - 2007
<br> Derechos reservados <a href="http://wedmasterayuda.es.tl/" class="">wedmasterayuda</a>

</div>
<div id="container">
<div id="header_container">
<div id="pre_header"></div>
<div class="header"><h1 id="header"><span>pwg</span></h1></div>
<div id="post_header"></div>
</div>
<div id="nav_container">

<h2 id="nav_heading"><span></span></h2>
<ul id="nav">

</div>
<div id="content_container">
<div id="pre_content"></div>
<div id="content">
<h2 id="title"><span>Home</span></h2>

<div id="post_content"></div>
<div id="sidebar_container">
<h2 id="sidebar_heading"><span></span></h2>
<div id="sidebar_content"></div>
</div>
</div>
</div>

pega este en css code sin Style Tags

Código:

#content_container {
padding-bottom:3em;
}

BODY {scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#666666;
scrollbar-base-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:transparent;
scrollbar-highlight-color:transparent;
scrollbar-shadow-color:transparent;
}

/* Design */
body#hpb_cssonly{
background-color: #FFFFFF;
background-image: none;
background-repeat: no-repeat;
position:absolute;
margin-top: 0px;
padding-top: 0px;
margin-left: auto;
margin-right: auto;
}

a{
color: #969696;
text-decoration: none;
}
a:hover{
color: #DADADA;
text-decoration: none;
}

/* Header */
div.header{
background-image: url(http://www.fileden.com/files/2008/5/22/1925126/wedmasterayduacabezalnsdq.png);
background-repeat: no-repeat;
height: 104px;
width: 850px;
}
div#header_container{
position:absolute;
top: 17px !important;
height: 104px;
margin-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
left: 100px;
margin-left: 0px;
}

/* Navigation */
div#nav_container{
display: none;
}

#navcontainer {
float:left;
position: absolute;
top: 125px;
left: 100px;
margin-left: 0px;
width: 850px;
height: 25px;
padding: 5px 0px 0px 0px;
background: #808080;
background-repeat: no-repeat;
}

#navcontainer ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a {
background: #00ccff;
width: 78px;
height: 18px;
border-top: 1px solid #00ccff;
border-left: 1px solid #00ccff;
border-bottom: 1px solid #00ccff;
border-right: none;
padding: 0;
margin: 0 0 10px 0;
color: #000;
text-decoration: none;
display: block;
text-align: center;
font: normal 11px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover {
color: #fff;
background: #808080;
}

#navcontainer a:active {
background: #808080;
color: #fff;
}

#navcontainer li#active a {
background: #808080;
border: 1px solid #000;
color: #fff;
}

/* Seitentitel */
h2#title{
font-size: 12px;
font-style: none;
text-align: left;
color: white;
background-color: #000000;
background-image: URL(http://www.fileden.com/files/2008/5/22/1925126/barra5wedmasterayuda.gif);
height: 20px;
width: 100%;
margin-left: 0px;
padding-top: 5px;
margin-right: auto;
margin-top: 5px;
margin-bottom: 10px;
}

/* Seiteninhalt */

div#content{
position: absolute;
top: 130px;
left: 400px;
margin-left: 0px;
margin-right: auto;
margin-top: 30px;
margin-bottom: 10px;
background: white url(http://www.fileden.com/files/2008/5/22/1925126/contenedorwedmasterayuda.jpg);
border: 1px dotted #ffffff;
width: 531px;
height: 544px;
text-align: left;
padding: 0px 10px 10px 5px;
color: #ffffff!important;
overflow:auto;
z-index: 7;
}
div#container{
margin-top: 10px;
}
div#content_container{
margin-top: 50px;
}

#content1 {
background: white url(http://www.fileden.com/files/2008/5/22/1925126/wedmasterayudaynsdq.png
) left center;
background-repeat: no-repeat;
width: 300px;
height: 600px;
position:absolute;
top: 160px;
left: 100px;
margin-left: 0px;
border: 1px dotted #000000;
margin-bottom: 0px;
bottom:0px;
text-align:left;
padding-left: 0px;
padding-top:5px;
padding-buttom: 5px;
margin-top: 0px;
z-index: 3;
color: white;
}

#footer {
margin-bottom: 0px;
position:absolute;
left: 100px;
margin-left: 0px;
top: 685px;
border: 1px dotted #000000;
bottom:0px;
background: white url(http://www.fileden.com/files/2008/5/22/1925126/barra5wedmasterayuda.gif) repeat-x;
width: 845px;
height: 90px;
text-align:left;
padding-left: 5px;
padding-top:0px;
padding-buttom: 0px;
margin-top: 0px;
z-index: 5;
color: #000000;
}

/* Counter */
#counter{
position: absolute;
top: 725px;
left: 720px;
vertical-align: bottomline;
margin-top: 0px;
padding-top: 5px;
text-align: center;
font-color: #000000!important;
font-size: 8px;
width: 155px;
height: 40px;
border: 1px dotted #969696;
background-color: transparent;
background-image: url(URL);
background-repeat: no-repeat;
z-index: 8;
}

/* Style Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 12px;
font-family: arial;
vertical-align: baseline;
}

img{
border: 0px;
}
/* Ausblendungen */
div.header span, div#post_header, div#pre_header, h2#nav_heading, h2#nav_heading span, div#pre_content{
display: none;
}