#1 
Diseño amarillo como PWG el Dom Ago 15, 2010 10:35 am
Diseño amarillo como PWG el Dom Ago 15, 2010 10:35 am
~ User TFW ~
Sexo: 
Mensajes: 126 
Reputacion: 2
Puntos: 800
Registrado: 27/09/2009
Localización: nnn
Edad: 17
jaja bueno os prometi un tercer diseño, pero he mentido, creo que este ya es mi 5º diseño, en fin estaba bloqueado en pensar una nueva estructura y se me ocurrio esta, puede que el sigiente diseño que traiga sea muy diferente a este.
espero que os haya gustado y que comenteis!!!
vista previa en vivo:
http://pruebas-ecss.es.tl/ (puede que dentro de una semana no este disponible este diseño)
imagen:
http://wimg.co.uk/JmY.png
Por encima de la pagina:
Por debajo de la pagina:
CSS Code sin stye tags:
espero que os haya gustado y que comenteis!!!
vista previa en vivo:
http://pruebas-ecss.es.tl/ (puede que dentro de una semana no este disponible este diseño)
imagen:
http://wimg.co.uk/JmY.png
Por encima de la pagina:
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/www.w3.org/1999/xhtml">
<div style="width:1000px; position: relative; margin-left: auto; margin-right: auto;">
<div class='navbar section' id='navbar'>
<div class='widget Navbar' id='Navbar1'></div>
<div id='layout_wrapper'>
<div id='layout_edgetop'></div>
<div id='layout_container'>
<!-- Head -->
<div id='header-wrapper'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'><div class='titlewrapper'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>jqcc=jQuery.noConflict(true);</script>
</div>
</div>
</div></div>
<div class='clear'></div>
</div>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/></script>
<script src='http://dl.dropbox.com/u/647003/CiudadBlogger/scripts/jqueryslidemenu.js' type='text/javascript'/></script>
<div id="myslidemenu"
class="jqueryslidemenu">
<ul>
<li><a href="#">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a></li>
<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#">Sub 3.1</a></li>
<li><a href="#">Sub 3.2</a>
<ul>
<li><a href="#">Sub 3.2.1</a></li>
<li><a href="#">Sub 3.2.2</a></li>
<li><a href="#">Sub 3.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Pestaña 4</a></li>
<li><a href="#">Pestaña 5</a>
<ul>
<li><a href="#">Sub 5.1</a></li>
<li><a href="#">Sub 5.2</a></li>
<li><a href="#">Sub 5.3</a></li>
<li><a href="#">Sub 5.4</a></li>
</ul>
</li>
<li><a href="#">Pestaña 6</a></li>
</ul>
</div>
<div class='clear'></div>
<div id='top_separator'></div>
<div id='navigation'>
<div id='tabs'>
</div>
<div class='spacer h5'></div>
<div id='content-wrapper'>
Por debajo de la pagina:
- Código:
<div id='sidebar'>
<div class='widget' id='search'>
<div>
<!-- contenido box 1 -->
<h2> Box de contenido 1</h2>
<div class='widget-content'>
<center><a href="#"><img src="http://www.elegantthemes.com/preview/InterPhase/wp-content/themes/InterPhase/images/125x125.gif"><a href="#"><img src="http://www.elegantthemes.com/preview/InterPhase/wp-content/themes/InterPhase/images/125x125.gif">
<a href="#"><img src="http://www.elegantthemes.com/preview/InterPhase/wp-content/themes/InterPhase/images/125x125.gif"><a href="#"><img src="http://www.elegantthemes.com/preview/InterPhase/wp-content/themes/InterPhase/images/125x125.gif"></center></a>
<!-- Fin contenido box 1 -->
</div></div>
<div class='widget BlogArchive'>
<!-- contenido box 2 -->
<h2>Box de contenido 2</h2>
<div class='widget-content'>
Mas contenido o poner vinculos:
<li><a href="#">-vinculo1<a/></li>
<li><a href="#">-vinculo2<a/></li>
<li><a href="#">-vinculo3<a/></li>
<li><a href="#">-vinculo4<a/></li>
<!-- Fin contenido box 2 -->
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
</div></div>
<span class='widget-item-control'></div>
</div></div></div>
<!-- Limpiar flotacion-->
<div class='clear'></div></div>
<!-- Footer -->
<div id='footer'>
Copyright © 2010
<a href=' http://statings.es.tl/ '>tuweb.es.tl</a> |
| Diseño creado y elaborado por: <a href=' http://estilo-css.es.tl/ '>estilo-css</a>
<div id='layout_edgebottom'></div>
</div>
CSS Code sin stye tags:
- Código:
<---Desing creado por estilo-css--->
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;}
* {
margin: 0;
padding: 0;
}
body {
background: url(http://www.stripemania.com/cache/1-25-45-1-202328-1-000000-DDEE1E-DDEE1E-DDEE1E-DDEE1E-000000-78D316-78D316-78D316-78D316-yes-yes-yes-yes-yes-.png);
font: normal 13px Verdana;
color: #000;
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: 1024px;
}
#layout_container {
background: #FFF;
border: solid #ffd200 0.2em;
margin: 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;
}
/*-- (Cabecera) --*/
#header-wrapper {
background: url(http://wimg.co.uk/pA3.png) no-repeat left top;
background-position: bottom;
width: 1010px;
height: 135px;
}
#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;
}
#layout_edgebottom {
background-position: left bottom;
}
/*-- (Contenedor) --*/
.h5 {
height: 0px;
}
/* Contenido */
#content {
background: #FFFFFF;
width: 665px;
float: left;
margin-top: 5px;
padding: 10px 10px 5px;
}
#content a {
}
#content a:hover {
}
.date-header {
color: #999999;
padding-top: 1px;
font-size: 0.85em;
float:right;
}
.post-footer, p.comment-footer {
padding: 4px 5px 3px;
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: url() 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 {
background: #FFFFFF;
float:right;
border-left: solid #ffd200 0.1em;
width: 300px;
margin: 5px 0 5px;
padding: 0px 0px 10px;
}
#sidebar ul{
margin-left: 0;
}
#sidebar li{
list-style: none;
padding: 4px;
}
#sidebar li:first-child {
border-top: none;
}
#sidebar li a{
text-decoration: none;
}
#sidebar li a:hover{
text-decoration: underline;
}
#sidebar h2 {
background: #FFFFF0 url() no-repeat;
background-position: center;
padding: 6px 10px 5px;
font-weight: bold;
font-size: 1em;
color: #000;
display:block;
text-decoration: underline;
}
#sidebar .widget-content {
background: #FFFFF0 repeat-x left top;
padding: 8px 10px 1px;
font-size: 0.9em;
}
#sidebar .widget {
padding-bottom: 5px;
background: url() no-repeat left bottom;
background-position: center;
margin-bottom:5px;
}
/*-- Footer --*/
#footer {
background: url(http://wimg.co.uk/0W8.png) repeat-x center;
height: 30px;
font-size: 0.85em;
color: #000;
text-align:center;
border-top: solid #ffd200 0.2em;
}
#footer {
color: 000;
}
#footer a {
color: #000FFF;
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;
}
/*-- Menu --*/
.jqueryslidemenu{
font: bold 12px Verdana;
background: #ffd200 url(http://wimg.co.uk/0W8.png);
height: 27px;
width: 1010px;
border-top: solid #ffd200 0.2em;
border-bottom: solid #ffd200 0.2em;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #202328 url(http://wimg.co.uk/0W8.png) ; /*background of tabs (default state)*/
color: black;
padding: 6px 8px;
border-right: 1px solid #C0C0C0;
color: #2d2b2b;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: black;
}
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
color: #383026;
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: #383026;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
