- YENİ CSS TASARIMLAR-SÜPER CSS

YENİ CSS TASARIMLAR-SÜPER CSS

TASARIMIN ÜSTÜNE

<!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' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <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'>   <div id='header-wrapper'> <div class='header section' id='header'><div class='widget Header' id='Header1'> <div id='header-inner'><div class='titlewrapper'>    <h1 class='title'>Mi web 2.0</h1>    </div> <div class='descriptionwrapper'> <p class='description'><span>Templatesfree.es.tl</span></p> </div> </div> </div></div> <div class='clear'></div> </div> <div id='top_separator'></div> <div id='navigation'> <div id='tabs'> <ul> <li class='current_page_item'>    <a href='inicio.htm' _fcksavedurl='inicio.htm'><span>Inicio</span></a></li> <li><a href='#' _fcksavedurl='#'><span>Noticias</span></a></li> <li><a href='#' _fcksavedurl='#'><span>Videos</span></a></li> <li><a href='#' _fcksavedurl='#'><span>Contacto</span></a></li> </ul>    <div class='clear'></div> </div> </div> <div class='spacer h5'></div> <div id='content-wrapper'>

TASARIMIN ALTINA

<div id='sidebar'> <div class='widget' id='search'>  <h2>Buscar</h2> <div class='widget-content'> <form action='buscar.htm' id='searchform' method='get'> <div>  <table class='search'> <tbody><tr> <td><input id='s' name='q' type='text' value=''/></td> <td style='padding-left: 10px;'><input src='http://pixelea.com/s/c1b484ad29.gif' type='image'/></td> </tr> </tbody></table> </div></form> </div></div> <div class='sidebar section' id='sidebar'><div class='widget Feed' id='Feed1'>   <h2>Box de contenido 1</h2> <div class='widget-content'>  Pon aqui el contenido que quieras!    </div></div> <div class='widget BlogArchive'>   <h2>Box de contenido 2</h2> <div class='widget-content'>  Pon aqui el contenido que quieras!    <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> </div></div> <span class='widget-item-control'></div> </div></div></div>  <div class='clear'></div></div>  <div id='footer'> <p class='links'> Copyright © 2009 <a href='http://templatesfree.es.tl' _fcksavedurl='http://templatesfree.es.tl'>Tuweb.es.tl</a> |  - Diseño por: <a href='http://colorvoid-btemplates.blogspot.com/' _fcksavedurl='http://colorvoid-btemplates.blogspot.com/'>colorvoid</a> Adaptada por: <a href='http://templatesfree.es.tl' _fcksavedurl='http://templatesfree.es.tl'>Templatesfree.es.tl</a> </div> </div> <div id='layout_edgebottom'></div> </div>

CSS BÖLÜMÜNE

#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;}  * {    margin: 0;    padding: 0; }  body {    background: #404040 url(http://pixelea.com/s/bcbd190dab.jpg);    font: normal 13px Verdana;    color: #345;    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: 780px; }  #layout_container {    background: #FFF;    padding: 0 5px; }  #layout_edgetop, #layout_edgebottom {    background: url(http://pixelea.com/s/1ddf9d7177.gif) no-repeat left top;    display: block;    height: 10px;    font-size: 0;    line-height: 0; }  #layout_edgebottom {    background-position: left bottom; }  /* Seachform */ table.search {    width: 100%;    border-collapse: collapse; } .search td {    vertical-align: center; } #main-wrapper {    overflow:hidden; } .clear {    clear:both; } #blog-pager-newer-link {    float: left; } #blog-pager-older-link { float: right; } #blog-pager {    text-align: center; }  /*-- (Cabecera) --*/ #header-wrapper {    background: #C5DEF0 url(http://pixelea.com/s/607f4ca364.jpg) repeat-x left top;    padding: 6px 18px; } #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; }  #top_separator {    background: url(http://pixelea.com/s/9a61c0d952.gif) repeat-x left top;    display: block;    font-size: 0;    height: 3px;    line-height: 0; }  /*-- (Menu) --*/ #navigation {    background: #739CBA url(http://pixelea.com/s/2aadacaf3b.jpg) no-repeat left bottom;    padding: 82px 10px 0; } /* Tabs */    #tabs ul {    margin: 0;    padding: 0; } #tabs li {    display:inline;    list-style:none; } #tabs a {    background: url(http://pixelea.com/s/775f50f6c3.gif) no-repeat left top;    float: left;    font: bold 0.9em sans-serif;    margin-right: 3px;    padding-left: 4px;    text-decoration: none; } #tabs a span {    float: left;    display: block;    background: url(http://pixelea.com/s/f7b504b6a1.gif) no-repeat right top;    padding: 5px 10px 5px 6px;    color: #608AAA; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs a span {float: none;} /* End IE5-Mac hack */ #tabs a:hover span {color: #608AAA;} #tabs a:hover {background-position: 0% -42px;} #tabs a:hover span {background-position:100% -42px;} #tabs li.current_page_item a {color: #47A; background-position: 0% -42px;} #tabs li.current_page_item a span {background-position:100% -42px;}  /*-- (Contenedor) --*/ .h5 { height:5px; }  /* Contenido */ #content {    width: 545px;    float:left; } #content a { } #content a:hover { }   .date-header { color: #999999; padding-top: 1px; font-size: 0.85em; float:right; } .post-footer, p.comment-footer { padding: 8px 10px 6px; 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:  none no-repeat left center; padding-left: 18px; float:right; } .post_bottom { background: url(http://pixelea.com/s/1ac49e7a18.gif) 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 {    float:right;    width: 220px; } #sidebar ul{    margin-left: 0;    border-bottom: 1px solid #E2ECF2; } #sidebar li{    list-style: none;    padding: 4px;    border-top: 1px solid #E2ECF2;    border-bottom: 1px solid #D0D8DE; } #sidebar li:first-child {    border-top: none; }  #sidebar li a{    text-decoration: none; }  #sidebar li a:hover{    text-decoration: underline; }  #sidebar h2 {    background: #C6D2DB url(http://pixelea.com/s/f38d67d112.gif) no-repeat left top;    padding: 6px 10px 5px;    font-weight: bold;    font-size: 0.9em;    color: #505E69;    display:block; }  #sidebar .widget-content {    background: #DAE3E9 url(http://pixelea.com/s/c32a58d178.gif) repeat-x left top;    padding: 8px 10px 1px;    font-size: 0.9em; } #sidebar .widget {    padding-bottom: 5px;    background: url(http://pixelea.com/s/1ac49e7a18.gif) no-repeat left bottom;    margin-bottom:5px; }  /*-- Footer --*/  #footer {    background: #A3B5C1 url(http://pixelea.com/s/c8c5fc1e62.gif) no-repeat left top;    padding: 8px 12px 2px;    font-size: 0.85em;    color: #FAFCFF;    text-align:center; }  #footer {    color: #C8DBE8; }  #footer a {    color: #D3E5F1;    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; }

TASARIMIN ÜSTÜNE

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 300px;
left: 15%;
margin-left:-260px;
width: 647px;
}

.menu li
ul, li
{
list-style-type: none;
padding: 10px;
margin: -20px;
}

li a
{
padding-right: 50px;padding-top: 40px;
}

.menu a
{
border: 0px solid #xxxxxx;
background-color: #xxxxxx;
background-image:  none;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: 9px;
height:31px;
color: #05121f;
}

.menu a:hover
{
background-color: #transparent;
background-image:  none;}

#smenu1,
#smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 3px;
display: block;
width: 100px;
float: left 100px;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->  </style>  <script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script> <div class="menu"> <li><a href="Url" _fcksavedurl="Url"><p align="up">LINK</p></a></li> <li><a href="Url" _fcksavedurl="Url"><p align="center">LINK</p></a></li> <li><a href="Url" _fcksavedurl="Url"><p align="center">LINK</p></a></li> <li><a href="Url" _fcksavedurl="Url"><p align="center">LINK</p></a></li> <li><a href="Url" _fcksavedurl="Url"><p align="center">LINK</p></a></li> <li><a href="Url" _fcksavedurl="Url"><p align="center">LINK</p></a></li> <li><a href="Url" _fcksavedurl="Url"><p align="center">LINK</p></a></li>    </div>    <div id="Designmystic">  <div id="text">asdasd<h1></h1> </div>   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>

CSS BÖLÜMÜNE

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;}    #text{ color: ffffff; position: absolute; top: 100px; margin-left:-300px; left: 50%; }    body { background-color:#ffffff;}   *{ padding: 0; margin: 0; }  #Designmystic { margin: 0 auto; width: 800px; height:700px; background-image:url(http://pixelea.com/s/7039965a6e.gif);}  #content { position: absolute; left: 56%; top: 300px; margin-left:-226px; width: 525px; height: 340px; padding:10px; color: #707070; font-size:12px; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;}   #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#cccccc;}     a{ color:#707070; text-decoration: none; font-size:13px;}  a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;}  a:link { color: #000000; font-size: 13px; text-decoration: none;}  a:active { color: #707070; font-size: 13px; text-decoration: none;}  a:visited { color: #cccccc; font-size: 13px; text-decoration: none;}    div.lux { position: absolute; z-index: 3; top: 58px; left: 52%; margin-left: -160px; width: 100px; }  .lux a { border: 0px solid #xxxxxx; background-color: #xxxxxx; background-image:  none; text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; margin: 0px; display: block; height:21px; color: #FFF; font-size: 60px; }