Basicos
Diseños Basicos
Por Arriba De La Pagina :
<div id="header">
<h2>Nombre de tu web</h2>
</div>
<div id="page">
Por Abajo Debajo De La Pagina :
<div id="sidebar">
<!--- contenido box --->
<center>Contenido que quieras!!</center><br>
</div> </div>
<div id="footer">
<!--- contenido pie de la pagina --->
<p>©2009 Todos los derechos reservados
<a href="URL DE TU WEB" _fcksavedurl="URL DE TU WEB">NOMBRE DE TU WEB</a></p>
</div>
Sin Style Tag :
#pre_header {display: none;} #post_header {display: none;} #header_container {display: none;} lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} body { margin: 0 auto; background-color:#ffffff; color: #000000; font-size: 12px; font-family: verdana; } /* Cabezal */ #header { width: 800px; background-color:#999999; height: 110px; margin: 0 auto; } #page { width: 800px; margin: 0 auto; } /* Contentenido */ #content { float: left; width: 590px; margin: 0 auto; background: #ffffff; color: #333333; border: 1px solid #666666; } /* Box de Contenido */ #sidebar { float: right; width: 200px; background-color: #cccccc; margin: 0 auto; color: #000000; } /* Pie de la pagina */ #footer { clear: both; width: 800px; height: 50px; margin: 0px auto; background-color: #B8E33C; text-align: center; font-size: smaller; font-family: Arial; color: #904E00; }
Arrriba De La Pagina :
<div style="width:900px; position: relative; margin-left: auto; margin-right: auto;"> <div id="header2"><h1></h1></div> <div id="navcontainer"> <ul id="navlist"> <!-- CSS Tabs --> <li id="active"><a id="current" href="#" _fcksavedurl="#">Link's</a></li> <li><a href="#" _fcksavedurl="#">Link's</a></li> <li><a href="#" _fcksavedurl="#">Link's</a></li> <li><a href="#" _fcksavedurl="#">Link's</a></li> <li><a href="#" _fcksavedurl="#">Link's</a></li> <li><a href="#" _fcksavedurl="#">Link's</a></li> <li><a href="#" _fcksavedurl="#">Link's</a></li> <li><a href="#" _fcksavedurl="#">Link's</a></li> <li><a href="#" _fcksavedurl="#">Link's</a></li> <li><a href="#" _fcksavedurl="#">Link's</a></li> </ul> </div> <div id="content1"> </div> <div id="shouty">Contenido Box</div> <div id="Ancient"> <ul id="ipah1"><center>Contenido pie de la pagina.</center> </div> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>
Sin Style Tag:
lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} #text{ color: ; front: normal 12px "arial"; top: 100px; margin-left:-300px; left: 50%; } body { background-image:url(http://pixelea.com/s/b5b3d82391.jpg); background-color: black;} *{ padding: 0; margin: 0; } #Ancient { margin: 0 auto; left: 50%; width: 1050px; background-color:;} #content { position: absolute; left: 150px; top: 200px; margin-left:-171px; width: 700px; height: 868px; padding:10px; color: #transparent; font-size:13px; background-color: white; background-image: none; border: 0px solid green; overflow:auto;} #shouty { position: absolute; left: 845px; top: 200px; margin-left:-145px; width: 170px; height: 868px; padding:10px; color: black; font-size:12px; background-color:white; background-image:url(http://pixelea.com/s/7cdc52f60d.jpg); border: 0px solid black; overflow:auto;} #ipah1 { position:absolute; left: 150px; top: 1090px; margin-left:-171px; padding:5px; width: 897px; border: 2px solid black; background-color:white; font-size:13px; } #header { display:none;} #header2 { position: absolute; left: 150px; top: 30px; margin-left:-171px; width: 897px; height: 120px; padding:10px; color: white; font-size:13px; background-color: black; background-image:url(http://pixelea.com/s/f7f9a7e214.jpg); border: 1px solid white; overflow:none;} #navcontainer { float:left; position: absolute; top: 173px; /* ubicacion del contenido (arriba o abajo) */ left: -19px; /* ubicacion del contenido (derecha o izquierda) */ margin-left: 0px; width: 897px; height: 25px;padding: 5px 0px 0px 0px; background: black; 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: green; width: 78px; height: 18px; border-top: 1px solid black; border-left: 0px solid #ff0000; border-bottom: 0px solid #ff0000; border-right: none; padding: 0; margin: 0 0 10px 0; color: #000; text-decoration: none; display: block; text-align: center; font: normal 11px/18px "arial";} #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;}
