Css Tasarım 2

Tasarım Adı:Candy Apple
Önizleme:Candy Apple

CSS Kodu Bölümüne:

Kod:
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;}

/* CSS Document */

body { margin:0; padding:0; font-family:Tahoma; color:#333333; font-size:100%; background:url(http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/bg_body.gif) repeat-x #FFFFFF; }

a { color:#2D2D2D; text-decoration:none; }
a:hover { }
h1 { font-size:16px; }
h2 { font-size:14px; }
hr { color:#000000; height:1px; border:1px solid #D62121; }

#wrapper { width:900px; margin:0 auto; padding:0; }

#header { position:relative; width:100%; height:142px; }
#header .logo { float:left; }
#headinfo { position:absolute; right:0; top:60px;}
#headinfo img { border:none; }
#headinfo strong { display:none; }

.logo { position:absolute; top:5px; left:48px; width:282px; height:83px; font-family:Trebuchet MS; font-size:22px; color:#FFF; background:url(http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/logo.gif); }
.logo h1, .logo h2 { display:none; }

#search { position:absolute; bottom:0; right:0; width:100%; padding:0; margin:0; width:189px; height:30px; background:url(http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/bg_search.gif); text-align:right; }

#left, #right { float:left; width:158px; margin:0; padding:0; background:url(http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/bg_left_bg.gif); color:#FFF; font-size:90%; }
#left a, #right a { color:#ffffff; }
#left div, #right div { padding-top:41px; }
#left .box1 { background:url(http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/bg_left_nav.gif) no-repeat; }
#left .box2 { background:url(http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/bg_left_more.gif) no-repeat; }
#left h2 { display:none; }
#left ul { margin:0; padding:0; }
#left ul li { list-style:none; margin:0; padding:0; }
#left ul li a { display:block; margin:0; width:148px; padding:5px; border-bottom:1px solid #BD1D1D; }
#left ul li a:hover { background:#D10000 url(http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/bg_left_over.gif) repeat-x 0 100%; padding-left:8px; width:145px; font-weight:bold; color:#FFC274; }
#left ul li ul { margin: 0; padding:0; }
#left ul li ul li { list-style:none; margin:0; padding:0; }
#left ul li ul li a { font-size:90%; width:142px; padding:5px 8px; border-bottom:1px solid #9D3F3F; }
#left ul li ul li a:hover { width:142px; padding:5px 8px; background:#BF0000; color:#FFA76D; }

#breadcrumb { float:left; width:522px; padding:8px 25px; background-color:#FFF; border-bottom:1px dotted #333333; }
#breadcrumb a { font-weight:bold; }

#content { float:left; width:532px; padding:25px; font-family:"Trebuchet MS"; }
#content h1 { color:#D10000; font-size:120%; }
#content a { font-weight:bold; color:#666; }
#content a:hover { border-bottom:1px dotted; }
#content .postinfo { display:block; margin:5px 0; padding:6px; color:#FFF; background:#DB7700; border-top:3px solid #A70000; }
#content .postinfo a { color:#FFF; }
#content blockquote { width:80%; margin:0 auto; padding:6px; border-left:8px solid #A70000; }

#right .box1 { background:url(http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/bg_right_affil.gif) no-repeat; padding:41px 5px 5px 5px; }

#footer { width:100%; background:url(http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/footer.gif) repeat-x 50% 0; color:#FFF; font-size:70%; }
#footer p { margin-left:10%; padding:10px; }
#footer a { color:#FFF; }
#footer a:hover { border-bottom:1px dotted #D2D2D2; }

.clear { clear:both; }

form { margin:0; padding:0; }
input { display:inline; padding:2px; margin:0; border:1px inset #DB7700; background-color:#FFFFFF; vertical-align:middle; }
input.searchbar { background:#000; margin-right:35px; border:none; color:#FFF; font-size:80%; width:100px; }
input.submit { width:auto; border:none; margin:0; padding:0; }

.right { float:right; }







Tasarımın Üstüne Bölümüne:
Kod:
<div id="wrapper">
<div id="header">
<div class="logo">
<h1>YourSite</h1>
<h2>Your slogan goes here</h2>
</div>
<div id="headinfo"> <a href="http://www.free-css.com/"><img src="http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/head_home.gif" alt="Return Home" /><strong>Home</strong></a><a href="http://www.free-css.com/"><img src="http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/head_sitemap.gif" alt="Site Map" /><strong>Sitemap</strong></a><a href="http://www.free-css.com/"><img src="http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/head_contact.gif" alt="Contact Us" /><strong>Contact</strong></a> </div>
<div id="search">
<form action="http://www.free-css.com/" name="form">
<input type="text" name="search" value="Search" class="searchbar" />
<input type="image" value="submit" src="http://www.free-css.com/assets/files/free-templates/preview/page2/candy-apple/assets/images/search_button.gif" class="submit" alt="Submit!" />
</form>
</div>
</div>
<div id="left">
<div class="box1">
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Solutions</a></li>
<li><a href="http://www.free-css.com/">Products</a>
<ul>
<li><a href="http://www.free-css.com/">Nested Link</a></li>
<li><a href="http://www.free-css.com/">Nested Link</a></li>
</ul>
</li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Investor</a></li>
<li><a href="http://www.free-css.com/">Press Releases</a></li>
<li><a href="http://www.free-css.com/">Affiliates</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div class="box2">
<h2>Useful Sites</h2>
<ul>
<li><a href="http://www.free-css.com/">Dylan Butler</a></li>
<li><a href="http://www.free-css.com/">Awake At Three</a></li>
<li><a href="http://www.free-css.com/">Pint, Inc.</a></li>
<li><a href="http://www.free-css.com/">Submit Your Site</a></li>
</ul>
</div>
</div>
<div id="breadcrumb"><a href="http://www.free-css.com/">Home</a> &raquo; <a href="http://www.free-css.com/">Somewhere</a></div>
<div id="content">





Tasarımın Altına Bölümüne:
Kod:
</div>
<div id="right">
<div class="box1">
<p>Welcome to your site. This is a sample page of which I have supplied some excerpts from the daily spam I recieve in my inbox.</p>
<hr />
<strong>Members Area</strong>
<input type="text" name="username" value="username" class="center" />
<input type="password" name="password" value="password" class="center" />
<br />
<input type="submit" value="submit" name="submit" class="submit right" />
<br />
<small><a href="http://www.free-css.com/">Forgotten password?</a><br />
<a href="http://www.free-css.com/">Sign up for an account</a></small> </div>
</div>
<br class="clear" />
</div>
<div id="footer">
<p>All content copyright &copy; 2006 <strong>Your Website</strong>, all rights reserved. Layout created at <a href="http://cssweblayouts.com" target="_blank">CSSWebLayouts</a><br />
<a href="http://www.free-css.com/">Legal</a> | <a href="http://www.free-css.com/">Privacy Policy</a> | <a href="http://www.free-css.com/">Contact</a></p>
</div>

Bunun önizlemesi yok mu?

Slm Candy Apple Adlı Css Tasarımının demosu bu adresde

http://www.free-css.com/free-css-templates/page2/candy-apple.php

BU ADRESDE YUKARIDAKİ KODU KOYARSANIZ ÇIKACAK TASARIMIN DEMOSU ÇIKIYOR
HİÇ GÜZEL TASARIM DEĞİLMİŞ DİYECEKSİNİZ

http://www.ozca-destek.tr.gg/