Ne Varsa Chitterla-Chitter.Tr.Gg

Tasarimblock3d

BLOCK 3D CSS TASARIM

T.üstüne Yazılacak Kod

<div id="templatemo_header_wrapper">  <div id="templatemo_header"> <div id="site_title"> <a href="#" _fcksavedurl="#">Block 3D</a> <span>Your tagline goes here</span> </div> <div class="cleaner"></div> </div>  </div>  <div id="templatemo_menu_wrapper"> <div id="templatemo_menu"> <ul> <li><a href="#" _fcksavedurl="#" class="current">Home</a></li> <li><a href="#" _fcksavedurl="#">About 3D</a></li> <li><a href="#" _fcksavedurl="#">Archives</a></li> <li><a href="#" _fcksavedurl="#">Gallery</a></li> <li><a href="#" _fcksavedurl="#" class="last">Contact Us</a></li> </ul> </div>  </div> <div id="templatemo_content_outer_wrapper"> <div id="templatemo_content_inner_wrapper"> <div id="tempatemo_content"> <div class="side_column_w200 margin_right_20"> <div class="section_w170_p15"> <div class="header_02">Search</div> <form method="get" action="#"> <input type="text" onblur_fckprotectedatt="%20onblur%3D%22clearText(this)%22" onfocus_fckprotectedatt="%20onfocus%3D%22clearText(this)%22" title="searchfield" class="inputfield" size="10" name="q" value="Enter keyword here..." /> <input type="submit" title="Search" class="submitbutton" alt="Search" value="Search" name="Search" /> </form> <div class="cleaner"> </div> </div> <div class="section_w170_p15"> <div class="header_02">Side Menu</div> <ul class="side_menu"> <li><a href="#" _fcksavedurl="#">Lorem ipsum dolor</a></li> <li><a href="#" _fcksavedurl="#">Cum sociis</a></li> <li><a href="#" _fcksavedurl="#">Donec quam</a></li> <li><a href="#" _fcksavedurl="#">Nulla consequat</a></li> <li><a href="#" _fcksavedurl="#">In enim justo</a></li> <li><a href="#" _fcksavedurl="#">Aenean vulputate</a></li> </ul> </div> <div class="cleaner"> </div> </div>  <div class="content_column margin_right_20"> <div class="post_section"> <div class="header_01">Aliquam lorem ante dapibus</div> <div class="post_info">June 24th, 2024 in <a target="_parent" href="http://www.templatemo.com" _fcksavedurl="http://www.templatemo.com">Web Design</a> by <a target="_parent" href="http://www.templatemo.com" _fcksavedurl="http://www.templatemo.com">TemplateMo.com</a></div> <div class="post_content"><img alt="image" src="https://img.webme.com/pic/c/chitter2/templatemo_image_01.jpg" _fcksavedurl="https://img.webme.com/pic/c/chitter2/templatemo_image_01.jpg" /> <p align="justify"><a target="_parent" href="http://www.templatemo.com" _fcksavedurl="http://www.templatemo.com">TemplateMo.com</a> provides a lot of high quality free website templates for your personal or commercial websites. All web templates are absolutely free to download, modify and </p> <div class="link_button"><a href="#" _fcksavedurl="#">Continue reading...</a> | <a href="#" _fcksavedurl="#">Comments (126)</a></div> </div> </div> </div>  <div class="side_column_w200"> <div class="section_w170_p15"> <div class="section_rss_twitter twitter"><a href="#" _fcksavedurl="#">FOLLOW ME <span>on Twitter</span></a></div> <div class="margin_bottom_20"> </div> <div class="section_rss_twitter rss"><a href="#" _fcksavedurl="#">SUBSCRIBE <span>rss feeds</span></a></div> </div> <div class="section_w170_p15"><a href="#" _fcksavedurl="#"> <img alt="image" src="https://img.webme.com/pic/c/chitter2/ads.jpg" _fcksavedurl="https://img.webme.com/pic/c/chitter2/ads.jpg" /></a></div> <div class="section_w170_p15"> </div> </div>  <div class="cleaner"> </div> </div> </div> </div>

Tasarım Altına Yazılacak Kod

<div id="templatemo_footer_wrapper"> <div id="templatemo_footer"> <div class="section_w180px"> <div class="header_04">Popular Posts</div> <ul class="footer_menu_list"> <li><a href="#" _fcksavedurl="#">Lorem ipsum dolor</a></li> <li><a href="#" _fcksavedurl="#">Cum sociis</a></li> <li><a href="#" _fcksavedurl="#">Donec quam</a></li> <li><a href="#" _fcksavedurl="#">Nulla consequat</a></li> <li><a href="#" _fcksavedurl="#">In enim justo</a></li> </ul> </div> <div class="section_w180px"> <div class="header_04">About</div> <ul class="footer_menu_list"> <li><a href="#" _fcksavedurl="#">Nullam quis</a></li> <li><a href="#" _fcksavedurl="#">Sed consequat</a></li> <li><a href="#" _fcksavedurl="#">Cras dapibus</a></li> <li><a href="#" _fcksavedurl="#">Lorem ipsum dolor</a></li> <li><a href="#" _fcksavedurl="#">Cum sociis</a></li> </ul> </div> <div class="section_w180px"> <div class="header_04">Friends</div> <ul class="footer_menu_list"> <li><a href="#" _fcksavedurl="#">Aenean vulputate</a></li> <li><a href="#" _fcksavedurl="#">Etiam ultricies</a></li> <li><a href="#" _fcksavedurl="#">Nullam quis</a></li> <li><a href="#" _fcksavedurl="#">Sed consequat</a></li> <li><a href="#" _fcksavedurl="#">Cras dapibus</a></li> </ul> </div> <div class="section_w180px"> <div class="header_04">Useful Links</div> <ul class="footer_menu_list"> <li><a href="#" _fcksavedurl="#">Donec quam</a></li> <li><a href="#" _fcksavedurl="#">Nulla consequat</a></li> <li><a href="#" _fcksavedurl="#">In enim justo</a></li> <li><a href="#" _fcksavedurl="#">Aenean vulputate</a></li> <li><a href="#" _fcksavedurl="#">Etiam ultricies</a></li> </ul> </div> <div class="section_w180px"> <div class="header_04">XHTML/CSS Validators</div> <a href="http://validator.w3.org/check?uri=referer" _fcksavedurl="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" _fcksavedurl="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a> <div class="margin_bottom_10"></div> <a href="http://jigsaw.w3.org/css-validator/check/referer" _fcksavedurl="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" _fcksavedurl="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a> </div> <div class="margin_bottom_20"></div> Copyright © 2024 <a href="#" _fcksavedurl="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com" _fcksavedurl="http://www.templatemo.com" target="_parent">Free CSS Templates</a> </div>  </div>

Css-bölümüne Yazılacak kod.

/* CSS Credit: http://www.templatemo.com/ */ body { margin: 0; padding: 0; line-height: 1.5em; font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; color: #000000; background: #ffffff; } a:link, a:visited { color: #004358; text-decoration: none; font-weight: normal;} a:active, a:hover { color: #004358; text-decoration: underline;} p { margin: 0px; padding: 0px; } img { margin: 0px; padding: 0px; border: none; } .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } .margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; } .margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; } .margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; } .margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; } .margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; } .margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; } .margin_right_20 { margin-right: 20px; } .margin_right_40 { margin-right: 40px; } .fl { float: left; } .fr { float: right; } .divider { background: url(https://img.webme.com/pic/c/chitter2/templatemo_divider.jpg) bottom repeat-x; } #templatemo_container { width: 990px; margin: 0 auto; } #templatemo_header_wrapper { width: 1200px; margin: 0 auto; background: url(https://img.webme.com/pic/c/chitter2/templatemo_header_bg.jpg) center top no-repeat; } #templatemo_header { clear: both; width: 990px; height: 320px; margin: 0 auto; background: url(https://img.webme.com/pic/c/chitter2/templatemo_header_bg.jpg) center top no-repeat; } #templatemo_header #site_title { float: left; width: 180px; height: 50px; margin: 205px 0 0 75px; padding: 25px 20px 0 20px; font-size: 40px; color: #000000; } #templatemo_header #site_title a{ color: #000000; text-decoration: none; } #templatemo_header #site_title span { display: block; margin-top: 10px; margin-left: 5px; font-size: 12px; } /* menu */ #templatemo_menu_wrapper { clear: both; width: 1200px; height: 50px; margin: 0 auto; background: url(https://img.webme.com/pic/c/chitter2/templatemo_menu_bg.jpg) top center no-repeat; } #templatemo_menu { width: 957px; height: 50px; padding: 0 0 0 33px; margin: 0 auto; } #templatemo_menu ul { margin: 0px; padding: 0px; list-style: none; } #templatemo_menu ul li{ padding: 0px; margin: 0px; display: inline; } #templatemo_menu ul li a{ float: left; display: block; height: 35px; width: 156px; margin-right: 3px; padding-top: 15px; text-align: center; font-size: 14px; text-decoration: none; color: #000000; font-weight: bold; outline: none; } #templatemo_menu li a:hover, #templatemo_menu li .current{ color: #ffffff; } /* end of menu*/ /* content */ #templatemo_content_outer_wrapper { clear: both; width: 1200px; margin: 0 auto; background: url(https://img.webme.com/pic/c/chitter2/templatemo_content_bg_repeat.jpg) repeat-y; } #templatemo_content_inner_wrapper { width: 1200px; margin: 0 auto; background: url(https://img.webme.com/pic/c/chitter2/templatemo_content_bg.jpg) top center no-repeat; } #tempatemo_content { width: 900px; padding: 0 45px; margin: 0 auto; background: url(https://img.webme.com/pic/c/chitter2/templatemo_content_bg.jpg) top center no-repeat; } .side_column_w200 { float: left; width: 200px; padding-top: 80px; } .content_column { position: relative; float: left; width: 400px; padding: 0 30px; padding-top: 80px; background:url(https://img.webme.com/pic/c/chitter2/templatemo_middle_col_bg.png) repeat-y; } .header_01 { font-size: 20px; color: #004358; font-weight: bold; margin-bottom: 10px; } .header_02 { font-size: 16px; color: #004358; font-weight: bold; padding-bottom: 10px; margin-bottom: 10px; background: url(https://img.webme.com/pic/c/chitter2/templatemo_divider.jpg) bottom repeat-x; } .header_03 { font-size: 12px; color: #32697a; font-weight: bold; margin-bottom: 5px; } .header_04 { font-size: 12px; color: #000000; font-weight: bold; margin-bottom: 10px; } .header_03 a{ color: #32697a; font-weight: bold; } .section_w170_p15 { width: 170px; padding: 0 15px; margin-bottom: 30px; } .side_column_w200 form { margin: 0px; padding: 0px; } .inputfield { height: 16px; width: 160px; padding: 2px 5px; margin: 0 0 10px 0; font-size: 12px; font-variant: normal; line-height: normal; } .submitbutton{ float: right; margin: 0px; padding: 0 6px 3px 6px; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; } #message_input { background:#FFFFFF none repeat fixed 0 0; border:1px solid #BBBBBB; display:block; height: 80px; margin-top:5px; padding:5px; width: 160px; margin-bottom: 5px; } .side_menu { list-style: none; padding: 0px; margin: 0 0 0 0; } .side_menu li { padding: 0; margin: 5px 0; } .side_menu li a { display: block; color: #ffffff; padding: 2px 10px; background: #999; } .side_menu li a:hover { text-decoration: none; background: #666; } .section_rss_twitter a{ display: block; width: 170px; padding: 20px 0 0 0; font-size: 16px; font-weight: bold; color: #004358; } .section_rss_twitter a:hover { text-decoration: none; } .section_rss_twitter a span { font-size: 12px; margin-top: 5px; display: block; letter-spacing: 5px; } .rss a{ background: url(https://img.webme.com/pic/c/chitter2/rss_icon.png) right bottom no-repeat; } .twitter a{ background: url(https://img.webme.com/pic/c/chitter2/twitter_icon.png) right bottom no-repeat; } .news_section { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #999; } .post_section { clear: both; padding-bottom: 20px; background: url(https://img.webme.com/pic/c/chitter2/templatemo_divider.jpg) bottom repeat-x; margin-bottom: 20px; } .post_section p { margin-bottom: 20px; } .post_info { font-size: 14px; margin-bottom: 20px; } .post_info a { color: #000000; text-decoration: underline; } .post_content img { margin-bottom: 10px; } .post_content .link_button a{ margin-top: 10px; color: #004358; text-decoration: none; } /* end of content */ /* footer */ #templatemo_footer_wrapper { clear: both; width: 100%; margin: 0 auto; } #templatemo_footer { clear: both; width: 900px; margin: 0 auto; padding: 30px 45px; margin-top: 30px; background: url(https://img.webme.com/pic/c/chitter2/templatemo_divider.jpg) top repeat-x; } .footer_menu_list { margin: 0px; padding: 0px; list-style: none; } .footer_menu_list li { margin: 0px; padding: 0px; } .footer_menu_list li a { color: #333; } .section_w180px { float: left; width: 140px; padding-right: 40px; } /* end of footer */