turk-tasarimci ya hoş geldiniz - i-Phone Tasarımı

i Phone Style CSS:

Css Kodları
#content_container { padding-bottom:3em; } /* Design */ body#hpb_cssonly{ background-color: black; background-image: Url(https://img.webme.com/pic/m/mytests/i_content.png); background-repeat: no-repeat; position:absolute; margin-top: 0px; padding-top: 0px; } a{ color: #969696; text-decoration: none; } a:hover{ color: #A2A2A2; text-decoration: none; } /* Header */ div.header{ background-image: url(https://img.webme.com/pic/m/mytests/i_header.png); background-repeat: no-repeat; height: 140px; width: 646px; } div#header_container{ position:absolute; top: 17px !important; height: 104px; margin-bottom: 0px; margin-top: 0px; margin-bottom: 0px; left: 100%; margin-left: 0%; } /* Navigation */ div#nav_container{ display: none; } #navcontainer { float:left; position: absolute; top: 544px; left: 100%; margin-left: 0%; width: 646px; height: 104px; padding: 80px 0px 0px 70px; background-image: url(https://img.webme.com/pic/m/mytests/i_nav.png); background-repeat: no-repeat; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #C0C0C0; width: 78px; height: 18px; border-top: 1px solid #969696; border-left: 1px solid #969696; border-bottom: 1px solid #969696; border-right: none; padding: 0; margin: 0 0 10px 0; color: #000; text-decoration: none; display: block; text-align: center; font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; } #navcontainer ul li a:hover { color: #fff; background: #A2A2A2; } #navcontainer a:active { background: #A2A2A2; color: #fff; } #navcontainer li#active a { background: #969696; border: 1px solid #000; color: #fff; } /* Seitentitel */ h2#title{ font-size: 12px; font-style: none; text-align: left; color: white; background-color: transparent; background-image: URL(URL); height: 20px; padding-top: 5px; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 10px; } /* Seiteninhalt */ div#content{ position: absolute; top: 130px; left: 100%; margin-left: 14%; margin-right: 0px; margin-top: 30px; margin-bottom: 10px; display: block; background: url(ur); width: 540px; height: 380px; text-align: left; padding: 0px 0px 0px 20px; float: left; color: white !important; overflow:auto; z-index: 2; } div#container{ margin-top: 10px; } div#content_container{ margin-top: 50px; } #footer { margin-bottom: 0px; position:absolute; left: 100%; margin-left: 1px; top: 648px; bottom:0px; background-image: url(https://img.webme.com/pic/m/mytests/i_footer.png) ; background-repeat: no-repeat; width: 645px; height: 100px; text-align:left; padding-left: 70px; padding-top:5px; padding-buttom: 5px; margin-top: 0px; z-index: 10; color: white; } /* Counter */ #counter{ position: absolute; top: 70px; left: 700px; vertical-align: bottomline; margin-top: 0px; padding-top: 15px; text-align: center; font-color: #969696 !important; font-size: 8px; width: 135px; height: 60px; border: 1px dotted #969696; background-color: transparent; background-image: url(URL); background-repeat: no-repeat; } /* Style Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 11px; font-family: arial; vertical-align: baseline; } img{ border: 0px; } /* Ausblendungen */ div.header span, div#post_header, div#pre_header, h2#nav_heading, h2#nav_heading span, div#pre_content{ display: none; }

Tasarımın Üstündeki Yazı
<div id="navcontainer"> <ul id="navlist">  <li id="active"><a id="current" href="Home.html">Home</a></li> <li><a href="Products.html">Products</a></li> <li><a href="Services.html">Services</a></li> <li><a href="Support.html">Support</a></li> <li><a href="Order.html">Order</a></li> <li><a href="News.html">News</a></li> </ul> </div> <div id="footer"> <a href="javascript:history.go(-1)">Zurück</a> | <a href="javascript:history.go(1)">Vorwärts</a> | <a href="javascript:history.go(0)">Aktualisieren</a> <br> <br>Copyright © 2008 IHRE COMAPNY <br> Designed by <a href="http://www.mp-templates.de" class="link1">MP-templates</a> </div>