Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje26-02-2010, 16:07 (UTC)    
Título del mensaje: [Diseño para Css-Design] Rs19
Responder citando
Hola!
Les traigo este desing, lo adapte hoy.



Texto por encima de la página:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home | RS19</title>
</head>

<body>
<div id="wrap">
<div id="topbar">


</div>
<div id="ribbon">

<h1 id="sitename">RamblingSoul</h1>
</div>
<div id="header">
<div id="topnav">
<ul>
<li class="current"><a href="index.html" title="Home Page">Home</a></li>

<li><a href="blog.html" title="blog example">Blog Page</a></li>
<li><a href="single.html" title="Single Page Example">Single Article</a></li>
<li><a href="about.html" title="about page">About</a></li>
<li><a href="contact.html" title="contact page">Contact</a></li>

</ul>
</div>
<div id="introtext">

<h2>Hello,</h2>
<p><span>
Fusce vulputate dapibus purus euismod hendrerit. Donec et sapien sed quam tristique aliquet. Etiam nec quam nulla. Donec sit amet dui sed lectus semper tincidunt eget et massa. Integer et orci massa.</span></p>

</div>


</div>
<div id="content">
<div id="left">
<div class="container">
<div class="post">
<div class="postheader">
<div class="date shadow">
<span class="day">28</span>
<span class="month">September</span>

</div>
<p class="postinfo">
 <span>By <a href="#">admin</a></span>
 <span><a href="#">15 Comments</a></span>

 <span><a href="#">Web Design</a></span>
 <span><strong>Tags</strong></span>
 <span><a href="#">Lorem</a>, <a href="#">Ipsum</a>, <a href="#">Sapien</a>, <a href="#">Eros</a></span>
 </p>

</div>
<div class="postcontent"><h2><a href="#">Lorem Ipsum Dolar Sit Amet</a></h2>


Texto por debajo de la página:
Código:
</div>
</div>
<div class="pagination">

<span class="leftalign"><a href="#">Previous</a></span>
<span class="rightalign"><a href="#">Next</a></span>
<div class="clear"></div>
</div>

</div>
</div>
<div id="sidebar">
<div class="container">

<h2>Categories</h2>
<div class="categories">
<ul class="shadow">
<li><a href="#">Web Design</a></li>
<li><a href="#">CSS &amp; XHTML</a></li>
<li><a href="#">Computer Science</a></li>

<li><a href="#">General</a></li>
<li><a href="#">Tutorials</a></li>


</ul>
</div>

<h2>Latest Posts</h2>
<div class="latestposts">
<ul class="shadow">
<li><a href="#">Vestibulum feugiat ante non nunc pellentesque hendrerit</a></li>
<li><a href="#">Ut faucibus quam nec metus </a></li>

<li><a href="#">consequat tincidunt felis ipsum ac nibh</a></li>
<li><a href="#"> Proin tincidunt turpis id nisl mattis</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>


</ul>
</div>


<h2>Blogroll</h2>
<div class="categories">
<ul class="shadow">

<li><a href="#">Web Design</a></li>
<li><a href="#">CSS &amp; XHTML</a></li>
<li><a href="#">Computer Science</a></li>
<li><a href="#">General</a></li>
<li><a href="#">Tutorials</a></li>


</ul>
</div>


</div>
</div>

<div class="clear"></div>

</div>

<div id="footer">
2009 - 2010 &copy; All Rights Reserved
<p>
<a href="#">Put</a> | <a href="#">Some</a> | <a href="#">Links</a> | <a href="#">Here</a></p>

<p id="credits">A <a href="http://www.ramblingsoul.com">CSS Template</a> by RamblingSoul | Adaptado por <a href="http://kilometro6.es.tl">Kilometro6</a> </p>
</div></div>
</body>
</html>


CSS-Code sin Style Tags:
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;}
* {padding:0; margin:0;}
html { display:block; height:100%; width:100%; background:url(http://img.webme.com/pic/k/kilometro6-pruebas/htmlbg.jpg) repeat;
}
body { background:url(http://img.webme.com/pic/k/kilometro6-pruebas/bodybg.jpg) repeat-x; font-family:Verdana, Geneva, sans-serif; font-size:0.88em;}
#wrap {background:url(http://img.webme.com/pic/k/kilometro6-pruebas/wrapbg.jpg) no-repeat; width:960px; margin:auto; min-height:900px; margin-bottom:100px;}
#topbar {height:18px;}
#ribbon {height:102px;}
#header {height:200px; background:#222326;}
#topnav {background:#111; height:50px; background:url(http://img.webme.com/pic/k/kilometro6-pruebas/menubar.jpg) repeat-x; font-family:Tahoma, Geneva, sans-serif; font-weight:bold;}
.clear {clear:both;}
#content {background:#efefef;}
#left {width:650px; float:left; background:#fff;}
#sidebar {width:300px; float:right; background:#efefef;}
#left .container, #sidebar .container {padding:10px;}
h1#sitename {font: bold 2.00em 'American Typewriter', Georgia, sans-serif; color:#fff; text-shadow:#000 1px 1px 1px; display:block; padding:30px 0 0 0;}
#header ul, #sidebar ul {list-style:none; display:block;}
#topnav li { display:inline; text-shadow:#000 1px 1px 1px;}
#topnav li a {display:block; color:#ccc; text-decoration:none; height:35px; float:left; padding:15px 15px 0 15px;}
#topnav li a:visited, #topnav li a:active {color:#ccc; text-decoration:none;}
#topnav li a:hover {color:#fff; background:#000;}
#topnav li.current a {color:#fff; background:#000;}
#introtext p {font:italic 1.3em Georgia, "Times New Roman", Times, serif; color:#ccc; display:block; padding:10px 15px 0 15px; width:60%; float:left; line-height:1.4em;}
#introtext h2 {display:block; padding:10px 15px 0 15px; width:60%; float:left; font:bold italic 1.8em 'American Typewriter', Georgia, sans-serif; color:#fff; text-shadow:#000 1px 1px 1px;}
#introtext p span {background:#000;}
#content p {line-height:1.5em; margin-bottom:1.5em;}
.post {padding-bottom:15px; margin-bottom:15px; border-bottom:solid 3px #ccc;}
.post h2 {display:block; font: bold 1.8em 'American Typewriter', Georgia, sans-serif; color:#306; margin-bottom:15px;}
.postcontent {margin-left:110px;}
.postheader {width:100px; float:left;}
.postheader .postinfo {font-size:0.80em!important; width:90px; padding:5px; display:block;}
.postheader .postinfo span {display:block;}
a {color:#306; text-decoration:none;}
a:visited, a:active {color:#306; text-decoration:none;}
.post a:hover {color:#000; background:#ffc;}
.postheader .date { width:80px; float:left; background:#ffffcc; padding:3px; margin-bottom:18px;}
.postheader .date .year {display:block; background:#306; padding:3px; font-size:0.8em; font-weight:bold; color:#fff; text-align:center;}
.postheader .date .day {display:block; text-align:center; padding:3px; font: bold 3.00em 'American Typewriter', Georgia, sans-serif;}
.postheader .date .month {display:block; font-size:0.75em; background:#000; color:#fff; text-align:center; padding:3px;}

.shadow {
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0,.3);
box-shadow: 1px 1px 5px rgba(0,0,0,.3);
}
.readmore a {display:inline-block; background:#936; color:#fff; font:bold 0.8em "Trebuchet MS", Arial, Helvetica, sans-serif; padding:2px; border:none;}
.readmore a:visited, .readmore a:active {display:inline-block; background:#936; color:#fff; font:bold 0.8em "Trebuchet MS", Arial, Helvetica, sans-serif; padding:2px; border:none;}
#sidebar h2 {display:block; font: bold 1.8em 'American Typewriter', Georgia, sans-serif; color:#306; margin-bottom:15px;}
#sidebar .categories li {display:block; height:29px; border-bottom:solid 1px #ddd;}
#sidebar .categories li a {display:block; height:22px; padding:6px 10px 0 10px; color:#333;}
#sidebar .categories li a:visited, #sidebar .categories li a:active {display:block; height:22px; padding:6px 10px 0 10px; color:#333;}
#sidebar li a:hover {background:#fff; color:#000;}
#sidebar ul { margin:5px 10px 20px 0; background:#f4f4f4; }
#sidebar .latestposts li {display:block;border-bottom:solid 1px #ddd;}
#sidebar .latestposts li a {display:block; padding:6px 10px 6px 10px; color:#333;}
#sidebar .latestposts li a:visited, #sidebar .categories li a:active {display:block; height:22px; padding:6px 10px 0 10px; color:#333;}
.pagination {background:#f4f4f4; margin:10px;}
.pagination span a {display:block; font:bold 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; padding:5px;}
.leftalign {float:left;}
.rightalign {float:right;}
#footer {background:#222; padding:15px; text-align:center; color:#ccc;}
#footer a {color:#fff; text-decoration:none;}
#footer a:visited, #footer a:active {color:#fff;}
#footer a:hover {color:#fff; text-decoration:underline;}
#credits {font-size:0.82em;}
#footer p {margin-bottom:10px;}
.alignleft {float:left;}
.alignright {float:right;}





.formcontainer {padding:20px 20px 10px 0;}
.formcontainer form {padding:0 15px 0 35px;}
.formcontainer .field {padding:5px;}
.formcontainer label {display:block;}
.formcontainer input {display:block;}
.formcontainer textarea {display:block;}
input.txt {border: solid 1px #ccc; width:230px; padding:2px;}
textarea.txt {border: solid 1px #ccc; width:230px; padding:2px;}
#pagebottom {font:11px "Trebuchet MS", Arial, Helvetica, sans-serif;}
.alignleft {float:left;}
.alignright {float:right;}
img.alignleft {margin-right:10px;}
img.alignright {margin-left:10px;}
.post ul {list-style:none; margin-bottom:18px;}
.post ul li { display:block; padding:3px 10px 3px 20px; border-bottom:dashed 1px #cacaca;}
.post ol {
   padding-left:30px;
   
}
.post ol li { padding:3px 10px 3px 0; }
blockquote {display:block; width:230px; float:right; font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; margin-left:15px; border-bottom: solid 1px #ccc; border-top: solid 1px #ccc; padding:10px;}
blockquote p {margin-bottom:10px!important; color:#000!important;}


Saludos!
______________


Ultima edición por kilometro6 el Vie Sep 03, 2010 11:55 am; editado 4 veces
↑
Mensaje26-02-2010, 16:09 (UTC)    
Título del mensaje:
Responder citando
Y la vista previa?.. o tal vez mi navegador no la ve
______________
Depuis 2008.
↑
Mensaje26-02-2010, 16:14 (UTC)    
Título del mensaje:
Responder citando
Uy, se me paso la vista previa. Ya la puse.
______________
↑
Mensaje26-02-2010, 16:18 (UTC)    
Título del mensaje:
Responder citando
kilometro6 escribió:
Uy, se me paso la vista previa. Ya la puse.


Ya xd.. Esta muy bonito el design y te quedo bien la adaptación... 10/10 (:

Salu2
______________
Depuis 2008.


Ultima edición por team-drakox el Vie Feb 26, 2010 12:19 pm; editado 1 vez
↑
Mensaje26-02-2010, 16:26 (UTC)    
Título del mensaje:
Responder citando
Gracias, esta un poco dificíl adaptarlo dio buena lucha xD. Gracias por el comentario.

Saludos!
______________
↑
Mensaje26-02-2010, 17:01 (UTC)    
Título del mensaje:
Responder citando
omg :D ta muy bonito 10/10 porfin doy esta puntuacion xD te lo mereces

lo puedo poner en mi diseño css design??
______________
Te gusta PwG-DesiGnS Vota por nosotros
en el torneo de pwg.

↑
Mensaje26-02-2010, 17:04 (UTC)    
Título del mensaje:
Responder citando
CCuantos Rs ahi O.O miles

Buen aporte xD
______________
@JuanjoApps
JuanjoApps
↑
Mensaje26-02-2010, 17:16 (UTC)    
Título del mensaje:
Responder citando
Gracias por la puntuacion, no hay problema en que lo pongas en tu web. Y sobre cuantos Rs hay sólo son 19, este es el último.
Gracias por los comentarios.

Saludos!
______________
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.