Tr.Gg | Nett-Oguzhann | Sitelerim

css tasarimss

--Css Tasarım Bölümü--

Tasarımın Üstüne <div id="wrapper">  <div id="header"> </style> <div align="center"><img alt="" src="https://img.webme.com/pic/n/nett-oguzhanarsiv/banner145.gif" /></div> </div>   <div id="navigation"> <script type="text/javascript" src="http://h1.ripway.com/kristaldunya/chromees.js"></script> <style> #MainMenu { height:36px; background: #FFFFFF url("http://www.fileden.com/files/2007/6/19/1190933/bmid_113.gif"); margin:0; border:0; } #tab { margin:0; top:0; } #tab ul { margin:0; padding:0; list-style:none; float:left; } #tab li { display:inline; float:left; margin:0; padding:0; } #tab a { background: url("http://www.fileden.com/files/2007/6/19/1190933/bright_113.gif") no-repeat right top; margin:0; padding:0; text-decoration:none; border:0; display:block; float:left; } #tab a span { display:block; background:url("http://www.fileden.com/files/2007/6/19/1190933/bleft_113.gif") no-repeat left top; padding:0 22px 0 22px; font-family:Arial, Helvetica, sans-serif; font-size:11; color:#FFFFFF; font-weight:bold; line-height:36px; } #tab a:hover,#tab li.item_active a { background-position:right bottom; border-color:; } #tab a:hover span,#tab li.item_active a span { background-position:left bottom; color:#FFFFFF; font-weight:bold; font-style:normal; text-decoration:none; } .dropmenudiv { position:absolute; top:0; float:left; display:block; visibility:hidden; border:0 solid ; background: #FFFFFF url("http://www.fileden.com/files/2007/6/19/1190933/bmid_113.gif"); color:#FFFFFF; z-index:100; text-decoration:none; padding:0; } .dropmenudiv ul { margin:0; padding:0; list-style:none; } .dropmenudiv li { display:inline; margin:0; padding:0; } .dropmenudiv a:link, .dropmenudiv a:visited { width:180px; margin:0; padding:0; display:block; border:0 solid ; color:#FFFFFF; background:url("http://www.fileden.com/files/2007/6/19/1190933/bleft_113.gif") no-repeat left top; font-weight:bold; font-style:normal; text-decoration:none; } .dropmenudiv a span { float:left; display:block; line-height:36px; background:url("http://www.fileden.com/files/2007/6/19/1190933/bright_113.gif") no-repeat right top; padding:0 22px 0 22px; font-family:Arial, Helvetica, sans-serif; font-size:11; color:#FFFFFF; } .dropmenudiv a span { float:none; } .dropmenudiv a:hover { border:0 solid ; background-position:left bottom; font-weight:bold; font-style:normal; text-decoration:none; color:#FFFFFF; } .dropmenudiv a:hover span { background-position:right bottom; color:#FFFFFF; font-weight:bold; } </style> <div id="MainMenu"> <div id="tab"> <ul> <li class="item_active"><a href="#"><span>Home</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> </div> </div> </div>   <div id="faux">  <div id="leftcolumn"> </div>   <div id="rightcolumn">
Tasarımın Altına
</p> <div class="clear"></div> </div>  <div class="clear"></div> </div>   <div id="footer"> Sende Css tasarım yapabilirsin </div>  </div> 
Css Kodu
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;} /* Created by Keith Donegan of Code-Sucks.com E-Mail: Keithdonegan( at )gmail.com You can do whatever you want with these layouts, but it would be greatly appreciated if you gave a link back to http://www.code-sucks.com */ * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { margin: 0 auto; width: 922px; } #faux { background: url(faux-3-2-col.gif); margin-bottom: 0px; overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */ width: 100% } #header { color: #333; width: 902px; padding: 10px; height: 100px; margin: 10px 0px 0px 0px; background: #D1DBDB; } #navigation { color: #333; padding: 10px; margin: 0px 0px 0px 0px; background: #ABBEBE; } #leftcolumn { display: inline; color: #333; margin: 10px; padding: 0px; width: 195px; float: left; } #rightcolumn { float: right; color: #333; margin: 10px; padding: 0px; width: 683px; display: inline; position: relative; } #footer { width: 902px; clear: both; color: #333; background: #ABBEBE; margin: 0px 0px 10px 0px; padding: 10px; } .clear { clear: both; background: none; }

Tasarımın adı:MİNİMAL

Tam boy görmek için tıklayın!

Tasarımın üstüne
<div id="container"> <div id="menu"> <span class="logo1">min</span><span class="logo2">imal</span> <ul> <li><a href="#">home</a></li> <li><a href="#">about me</a></li> <li><a href="#">news</a></li> <li><a href="#">downloads</a></li> <li><a href="#">contact me</a></li> </ul> <h3>change colors</h3> <a href="index_red.html"><img src="images/red.gif" width="10" height="10" alt="red" /></a> <a href="index_green.html"><img src="images/green.gif" width="10" height="10" alt="green" /></a> <a href="index.html"><img src="images/blue.gif" width="10" height="10" alt="blue" /></a> </div> <div id="content"> <h1>Minimal Template</h1><hr />
Tasarımın altına
</div> </div> <div id="footer">Design: <a href="http://www.dannisbet.com/">DanNisbet.com</a> | © 2008 YourSite.com</div>
Css kodu
h1#title{display: none;} h2#title span {display: none;} /* Body Elements */ body { background-color:#000; color:#fff; margin-top:50px; margin-bottom:60px; font-size:.75em; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:1.5em; } #container { width:685px; margin:0 auto; } #menu { width:188px; height:332px; padding-top:320px; padding-right:40px; float:left; background-repeat:no-repeat; text-align:right; } #menu ul { list-style-type:none; } #menu li { padding-bottom:10px; } .logo1 { font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:lighter; font-size:3em; } .logo2 { font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:3em; color:#fff; } #content { float:right; padding:15px; width:427px; } #footer { clear:both; background-image:url("http://warrior.kucukresim.com/uploads/footer2095c.jpg"); background-repeat:no-repeat; background-position:325px 0px; width:675px; height:21px; padding:5px 10px 0px 0px; margin:0 auto; color:#404040; font-size:.8em; text-align:right; } /* Text Effects */ a { text-decoration:none; } #footer a { color:#717171; } a:hover { text-decoration:underline; } h1 { color:#fff; font-size:1.5em; } h2 { color:#bbb; font-size:1.25em; } h3 { color:#999; font-size:1.25em; font-weight:normal; margin-bottom:5px; } /* Element Effects */ input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1em; width:350px; color: #fff; background: #222; } input:hover, select:hover, textarea:hover { background: #333; } form { width:350px; margin:0 auto; } blockquote { width:90%; margin:0 auto; margin-bottom:20px; border-color:#999; border-width:1px; border-style:solid; background-color:#333; padding:0px 15px 0px 15px; } hr { width:98%; height:0; border:0; } img{ border:0px; } #menu { background-image:url("http://archer.kucukresim.com/uploads/menu-green65fbb.png"); } .logo1{ color:#25f000; } a{ color:#25f000; } input, select, textarea { border: 1px solid #25f000; } hr { border-top:1px solid #25f000; } div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;}

Tasarım Adı:Manuscript

Tam boy görmek için tıklayın!

Tasarımın Üstüne
<div class="content"> <div id="header"> <div class="title"> <h1>sNEWS 1.5</h1> <h3>USE THIS TEMPLATE FOR FREE!</h3> </div> </div> <div id="main"> <div class="center">
Tasarımın Altına
</div> <div class="leftmenu"> <div class="nav"> <ul> <li><a href="http://www.free-css.com/">Home</a></li> <li><a href="http://www.free-css.com/">Articles</a></li> <li><a href="http://www.free-css.com/">Gallery</a></li> <li><a href="http://www.free-css.com/">Affiliates</a></li> <li><a href="http://www.free-css.com/">Archives</a></li> <li><a href="http://www.free-css.com/">About</a></li> <li><a href="http://www.free-css.com/">Contact</a></li> </ul> </div> </div> </div> <div id="prefooter"> </div> <div id="footer"> <div class="padding"> Copyright © 2006 Your Site Name | Design: <a href="http://www.free-css-templates.com">David Herreman </a> | <a href="http://www.free-css.com/">Contact</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://www.solucija.com">Solucija.com</a> | <a href="http://www.free-css.com/">Login</a> </div> </div> </div>
Css Kodu
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;} /* Manuscript Free Template By Herreman David http://www.free-css-templates.com */ * { padding: 0; margin: 0 } body { margin:5px 0; padding:0; font: 74% Arial, Sans-Serif; color:#000; line-height: 1.4em; background : #575757;} .content { color: #3B2A0A; margin: 0 auto; padding: 0; width: 825px; background: url(http://forump.kucukresim.com/uploads/bg2e5271.jpg) repeat-y center bottom; } #header { background: url(http://warrior.kucukresim.com/uploads/header29c3d.jpg) no-repeat; width: 825px; height: 213px; color: #3B2A0A; } #header h1 { background: inherit; font: bold 3em "Tahoma", Arial; color: #85621E; line-height: 1em;} #header h3 { background: inherit; font: bold 1em "Tahoma", Arial; color: #000; } #header .title { padding: 60px 0 0 60px; } #main { background: url(http://archer.kucukresim.com/uploads/bg51ddb.jpg) no-repeat top; height: 353px; margin: 0; padding: 0 } #main .center { width: 550px; float: right; padding: 0 60px 0 0px; } #main h2 { background-color: inherit; color: #85621E; line-height: 0.2em; } #main h3 { font: 85% Arial, Sans-Serif; margin: 0 0 10px 0; padding: 0; color: #5f5f5f; background: inherit; } .leftmenu { width: 120px; float: left; padding: 0; padding: 0 0 0 40px; } .padding { padding: 15px; } .img { background: #FFF; float: left; padding: 1px; margin: 5px 8px 5px 0; color: #333; border: 1px solid #e0e0e0; } /* PREFOOTER */ #prefooter { background: url(http://forump.kucukresim.com/uploads/prefooterd0ec5.jpg) no-repeat; color: #85621f; height: 190px; text-align: left; clear: both; padding: 0px; margin: 0; } #prefooter .particles { float: right; width: 300px; padding: 20px 30px 0 0; background: transparent } #prefooter .comments { width: 270px; padding: 20px 0px 0 0px; float: right; background: transparent } /* FOOTER */ #footer { background: url(http://archer.kucukresim.com/uploads/footer02962.jpg) no-repeat; color: #8f8f8f; height: 44px; text-align: right; font-size: 90%; clear: both; padding: 0; margin: 0;} #footer .padding { padding: 20px 60px 0 0; } #footer hr { width: 740px; color: #888; border: 1px solid #f0f0f0; margin: 0 25px 0 25px; } #footer a { color: #999; text-decoration:none; } #footer a:hover { text-decoration: underline; color: #FFF;} /* NAVIGATION */ .nav { clear: both; text-align: left; color: #85621E; padding: 20px 0 0 0; } .nav li { font-weight: bold; margin: 0 0 8px 0; padding: 0 0 0 5px; border-bottom: 1px solid #D2B881 } .nav li a { color: #546078; text-decoration: none; } .nav li a:hover { color: #95722E; text-decoration: none; } .boxads { background: #E7EDF0; padding: 5px; border: 1px solid #999; color: #333; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ p { margin: 0 0 5px 0; padding: 0; color: #555; background: inherit; } hr { border: 0; height: 1px; color: #eee; background-color: #eee; } a { color: #0F5B7F; background: inherit; text-decoration:none; } a:hover { background: inherit; text-decoration: underline; } h1 { padding:0; margin:0; color: #0F5B7F; background: inherit;font: bold 1.8em Arial, Sans-Serif; letter-spacing: -1px; } h1 a {color: #0F5BFF; background: inherit;} h2 { background-color: inherit; color:#85621E; font-size:140%; font-weight:bold; margin: 10px 0 10px 0; padding:0; } h2 a { color: #85621E; } h2 a:hover { color: #BD9C5C; text-decoration: none;} ul { margin: 5px 0 20px 15px; padding : 0; list-style : none; } li { list-style-type: none; color: #F29900; margin: 0 0 0px 0; padding: 0 0 0 0px; } li a { color: #546078; } li a:hover { color: #F29900; } /*----------------- for snews --------------------------*/ fieldset { border: 1px solid #eee; } textarea.text { height: 150px; width: 90%; border: 1px solid #ccc; background: #fff; color: #000; } textarea.text:hover { border: 1px solid #eee; background: #FFFFF4; color: #000; } input.field { border: 1px solid #ccc; background-color: #3C3C3C; width: 100px; color: #000; } input.field:hover { border: 1px solid #eee; background: #ccc; color: #000; } input.text { margin: 0; width: 110px; border: 1px solid #546078; background: #FFF; color: #808080; } input.text:hover { border: 1px solid #3a4354; } input.searchbutton { margin: 0; font-size: 100%; font-family: Arial, Sans-serif; border: none; background: #FFFFFF; color: #333; padding: 1px; font-weight: bold; } .date { color: #5f5f5f; background: inherit; text-align: right; margin: 4px 0 5px 0; padding: 0.4em 0 0 0; border-top: 1px solid #85621E; } .date a { color: #546078; } input.button { background: #FFFFF4; color: #808080; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } .comments { padding: 10px 10px 8px 10px; margin: 0 0 7px 0; background: #FFF; color: #333; } .commentsbox { padding: 8px 0 10px 10px; margin: 0 0 10px 0; background: #f4f4f4; color: #000; } .error { color: #990000; background-color: #FFF0F0; padding: 7px; margin-top: 5px; margin-bottom: 10px; border: 1px dashed #990000; } .error h2 { color: #990000; background: inherit; } .success { color: #000000; background: #FAFAFA; padding: 7px; margin-top: 5px; margin-bottom: 5px; border: 1px dashed #546078; } .success h2 { color: #546078; background: inherit; }