BFBCorporation - diseño002

diseño002

Diseño Black Free Style [002-CSS]

Texto por ensima de la pagina

<div id="wrap"> <div id="header"> <h1 id="logo">Black<span class="gray">FreeStyle</span></h1> <h2 id="slogan">i-Zomma & Preparando Webs</h2>  <div id="menu"> <ul> <li id="current"><a href="Inicio.htm" _fcksavedurl="Inicio.htm">Home</a></li> <li><a href="#" _fcksavedurl="#">News</a></li> <li><a href="#" _fcksavedurl="#">Downloads</a></li> <li><a href="#" _fcksavedurl="#">Support</a></li> <li><a href="#" _fcksavedurl="#">About</a></li> </ul> </div> </div>  <div id="content-wrap"> <div id="sidebar"> <h1 class="clear">Sidebar Menu</h1> <ul class="sidemenu"> <li><a href="" _fcksavedurl="">Home</a></li> <li><a href="" _fcksavedurl="">Template Info</a></li> <li><a href="" _fcksavedurl="">Sample Tags</a></li> <li><a href="" _fcksavedurl="">More Free Templates</a></li> <li><a href="" _fcksavedurl="">Premium Templates</a></li> </ul> <h1>Generos</h1> <ul class="sidemenu"> <li><a href="http://izomma.es.tl" _fcksavedurl="http://izomma.es.tl">iZomma</a></li> <li><a href="http://izomma.es.tl" _fcksavedurl="http://izomma.es.tl">iZomma</a></li> <li><a href="http://izomma.es.tl" _fcksavedurl="http://izomma.es.tl">iZomma</a></li> <li><a href="http://izomma.es.tl" _fcksavedurl="http://izomma.es.tl">iZomma</a></li> <li><a href="http://izomma.es.tl" _fcksavedurl="http://izomma.es.tl">iZomma</a></li> </ul> <h1>Search</h1> <div class="searchform"> <form action="#"> <p> <input name="search_query" class="textbox" type="text"> <input name="search" class="button" value="Search" type="submit"> </p> </form> </div> <h1>Wise Words</h1> <p>"The happiest people are those who invested their time in others. The unhappiest people are those who wonder how the world is going to make them happy"</p> <p class="align-right">- John Maxwell</p> <h1>Support Styleshout</h1> <p>If you are interested in supporting my work and would like to contribute, you are welcome to make a small donation through the <a href="" _fcksavedurl="">donate link</a> on my website - it will be a great help and will surely be appreciated.</p> </div> <br>  </div>  </div> <div id="footer-wrap"> <div class="footer-left"> <p class="align-left"> © 2006 <b>Company Name</b> | Design by <a href="" _fcksavedurl="">styleshout</a> | Valid <a href="" _fcksavedurl="">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" _fcksavedurl="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </p> </div> <div class="footer-right"> <p class=""> <a href="" _fcksavedurl="">Home</a> | <a href="" _fcksavedurl="">SiteMap</a> | <a href="" _fcksavedurl="">RSS Feed</a> </p> </div> </div>

CSS DESIGN
Style Sin tags

/ HTML ELEMENTS / /* top elements / { padding: 0; margin: 0; } body { margin: 0; padding: 0; font: normal .70em/1.6em Verdana, Tahoma, sans-serif; color: #BDBDBD; background: #000; text-align: center; } /* links / a { color: #FFF; background-color: inherit; text-decoration: none; } a:hover { color: #FFF; background-color: inherit; text-decoration: underline; } / headers / h1, h2, h3 { font: normal 1.3em 'Trebuchet MS', Arial, Sans-serif; color: #FFF; } h1 { font-size: 1.6em; } h2 { font-size: 1.4em; text-transform:uppercase; font-weight: bold;} h3 { font-size: 1.3em; font-weight: bold; } p, h1, h2, h3 { margin: 0; padding: 10px 15px; } ul, ol { margin: 10px 30px; padding: 0 15px; color: #FFF; } / images / img { border: 3px solid #555; } img.no-border { border: none; } img.float-right { margin: 5px 0px 5px 15px; } img.float-left { margin: 5px 15px 5px 0px; } a img { border: 0px solid #555; } a:hover img { border: 0px solid #535353 !important; / IE fix/ border: 3px solid #555; } code { margin: 5px 0; padding: 10px; text-align: left; display: block; overflow: auto; font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace; / white-space: pre; / background: #535353; } acronym { cursor: help; border-bottom: 1px solid #777; } blockquote { margin: 15px; padding: 0 0 0 20px; background: #535353; font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif; } / form elements / form { margin: 10px 15px; padding: 0; background: #535353; } label { display:block; font-weight:bold; margin:5px 0; } input { padding: 2px; border:1px solid #eee; font: normal 1em Verdana, sans-serif; color:#777; } textarea { width: 250px; padding:2px; font: normal 1em Verdana, sans-serif; border:1px solid #eee; height:100px; display:block; color:#777; } input.button { margin: 0; font: bold 1em Arial, Sans-serif; border: 1px solid #535353; background: #FFF; padding: 2px 3px; color: #333; } / search form / .searchform form{ background-color: transparent; border: none; margin: 0; padding: 0; } .searchform input.textbox { margin: 0; width: 145px; border: 1px solid #777; background: #FFF; color: #333; height: 14px; vertical-align: top; } .searchform input.button { margin: 0; padding: 2px 3px; font: bold 12px Arial, Sans-serif; background: #FFF; border: 1px solid #f2f2f2; color: #333; width: 65px; vertical-align: top; } / LAYOUT **/ #wrap { background: #212B5C url(http://img136.imageshack.us/img136/4769/32928367qh4.gif) repeat-x 0 0; margin: 20px auto 0 auto; text-align: left; border-color: #5F5F5F; border-style: solid; border-width: 1px 1px 5px 1px; width:900px; height: 1500px; } #wrap, #footer-wrap { width: 84%; } /* header / #header { position: relative; height: 110px; background: #7F8082 url(http://www.styleshout.com/templates/preview/Azulmedia2-1/images/header-bg.jpg) repeat-x 0% 100%; border-bottom: 5px solid #5F5F5F; } #header h1#logo { position: absolute; top: 5px; left: 20px; margin: 0; padding: 0; font: bolder 50px 'Trebuchet MS', Arial, Sans-serif; letter-spacing: -2px; } #header h2#slogan { position: absolute; top: 50px; left: 65px; color: #FFF; text-indent: 0px; font: bold 12px Tahoma, 'Trebuchet MS', Sans-serif; text-transform: none; } / content-wrap / #content-wrap { clear: both; margin: 0; padding: 0; } / box / .box { margin: 10px 15px; border: 1px solid #0A1646; background-color: #1B2455; } / main / #main { width: 155px; height: 40px } #main .box { margin-left: 0; } / sidebar / #sidebar { float: left; width: 250px; margin: 0; padding-top: 20px; } #sidebar ul.sidemenu { margin: 0 0 0 15px; padding: 0; background: #242424; border-top: 5px solid #5F5F5F; } #sidebar ul.sidemenu li { display: inline; list-style: none; } #sidebar ul.sidemenu li a { display: block; padding: 5px 10px 5px 15px; text-decoration: none; color: #CCC; font-weight: bold; } #sidebar ul.sidemenu li a:hover { color: #333; background: #A0A0A0; } / Footer / #footer-wrap { clear: both; color: #FFF; background: #000; margin: 0 auto; padding: 0; font-size: 88%; } #footer-wrap a { text-decoration: none; font-weight: bold; color: #FFF; } #footer-wrap .footer-left{ float: left; width: 65%; padding-bottom: 20px; } #footer-wrap .footer-right{ float: right; width: 30%; padding-bottom: 20px; } / menu tabs / #header ul { position: absolute; top: 20px; right: 20px; margin:0; padding: 0; list-style:none; font: bold 1.3em 'Trebuchet MS', Tahoma, verdana, sans-serif; height: 2.3em; } #header li { display:inline; margin:0; padding:0; } #header a { float: left; margin:0; padding:3px 10px 2px 10px; text-decoration:none; color: #CCC; } #header a:hover { border-top: 5px solid #CCC; } #header #current a { color: #FFF; border-top: 5px solid #FFF; } / end menu tabs / / alignment classes / .float-left { float: left; } .float-right { float: right; } .align-left { text-align: left; } .align-right { text-align: right; } / additional classes / .clear { clear: both; } .gray { color: #A0A0A0; } .comments { text-align: right; padding: 7px 15px; margin: 20px 15px 15px 15px; background: #0A1646; } div.header, #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6, #pre_header, #post_header, #header_container, #pre_content, #nav_heading{ display: none;} div#nav_container{display: none;} div#sidebar_container{display: none;} div.header{display: none;} div#counter{display: none;} h1#title{display: none;} h2#title span {display: none;} li.nav_element{display: none;} li.nav_element a{display: none;} #content { border: 1px solid #777; background-color: #3A3A3A; width: 585px; position: absolute; top: 190px; left:335px; };} .noticia{background-image:url(http://pixelea.com/s/ee4c03742f.png);} .noticiax{background-image:url(http://pixelea.com/s/b471ec98fb.png);} / 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(http://www.styleshout.com/templates/preview/Stylevantage1-0/images/headerbg-green.gif); background-repeat: no-repeat; z-index: 8; } #title {position: absolute; top: 25px; left: 420px; }