Índice
![[CSS design] Colorus Empty](https://2img.net/i/empty.gif)
Bueno aqui les dejo mi primer post en el foro jejejeje!!
!!Vista previa!!
https://2img.net/r/ihimizer/img172/2495/20646394.png
Texto por encima de la pagina
Texto por debajo de la pagina
CSS code sin style ni tags
En la parte de los links solo cambien el "#" por el link ke sera
diregido y el nombre.
ZALUDOS!!
!!Vista previa!!
https://2img.net/r/ihimizer/img172/2495/20646394.png
Texto por encima de la pagina
- Spoiler:
- Código:
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>
<!-- header -->
<div id="header">
<div id="logo"><a href="Link de tu web">Tu web</a></div>
<div id="menu">
<ul>
<li><a href="/home.htm">Home</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>
<!--end header -->
<!-- main -->
<div id="main">
<div id="content">
<div id="sidebar">
<div id="sidebar_top"></div>
<div id="sidebar_text">
<h2>Menu</h2>
<li><a href="######">Nombre Link</a></li>
<li><a href="######">Nombre Link</a></li>
<li><a href="######">Nombre Link</a></li>
<li><a href="######">Nombre Link</a></li>
<li><a href="######">Nombre Link</a></li>
<li><a href="######">Nombre Link</a></li>
<li><a href="######">Nombre Link</a></li>
<h2>Noticias</h2>
<p><div style="text-align: justify;"><strong>Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto </div></p>
</div>
<div id="sidebar_bottom"></div>
</div>
Texto por debajo de la pagina
- Spoiler:
- Código:
<!-- footer -->
<div id="footer">
<div id="left_footer">© Copyright 2008 <b>Tu Web</b> <strong> Colorus </strong>design </div>
<div id="right_footer">
<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a> Adapted by: <a href="http://www.j-mla.es.tl" title="J-mla">J-mla!</a>
</div>
</div>
<!-- end footer -->
</div>
<!-- end main -->
<style type="text/css">
<!--
table{margin-left:auto;margin-right:auto}
--></style>
CSS code sin style ni tags
- Spoiler:
- 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;}
body { margin:114px 0 0 0; line-height:16px; font-family: Tahoma, Arial; background: url(http://pixelea.com/s/8ed989b912.jpg) no-repeat center top #171c20; color:#bed7e6; font-size:11px;}
a { color:#018BC1;}
a:hover { text-decoration:none;}
#header {}
#logo { padding:30px 0 120px 0;color:#fff; text-align:center;}
#logo a{ color:#fff; text-decoration:none; font-weight:bold; font-size:24px; text-transform:uppercase; }
#menu {color:#fff; text-align:center; margin-bottom:38px;}
#menu ul {text-align:center;list-style:none; padding:0;}
#menu ul li {display:inline}
#menu ul a { font-weight:bold; font-size:14px; text-decoration:none; color:#fff; background-color:#445d6c; padding:0 10px 2px 10px;}
#menu ul a:hover { background-color:#f26513;}
#main {background: url(http://pixelea.com/s/fe28d8574d.jpg) repeat-y top center;}
#content {width:790px; margin:0 auto;}
#text { width:540px;}
#text p { margin:7px 0 7px 0;}
#text li {background:url(http://pixelea.com/s/898c2cd756.jpg) no-repeat 0px 7px;}
#sidebar {float:right; width:227px; background-color:#0b0e10; margin:10px 10px 0 0; }
#sidebar_top { width:227px; height:40px; background:url(http://pixelea.com/s/010d347c56.jpg) no-repeat;}
#sidebar_text { padding: 0 30px;}
#sidebar_text p { margin:5px 0 5px 0;}
#sidebar_bottom { width:227px; height:57px; background:url(http://pixelea.com/s/494d9d65b2.jpg) no-repeat;}
#sidebar h2 { font-size:13px; text-transform:uppercase; color:#fff; margin:20px 0 0 0; padding:0; background:none;}
h1 {margin:30px 0 0 0; padding:5px 0 7px 45px; text-transform:uppercase; font-size:24px; color:#fff; background:url(http://pixelea.com/s/83980a8038.jpg) no-repeat;}
#footer {background:url(http://pixelea.com/s/898c2cd756.jpg) no-repeat top center; height:102px; clear:both; width:780px; margin:0 auto; }
#left_footer { float:left; padding:60px 0 0 30px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right; padding:60px 30px 0 0; color:#fff; font-size:12px; text-align:right;}
#right_footer a { color:#fff;}
#right_footer a:hover { text-decoration:none;}
En la parte de los links solo cambien el "#" por el link ke sera
diregido y el nombre.
ZALUDOS!!
