bs-siten

Gri istanbul tasarımı

Bu sefer biraz daha net bir tasarım yaptık. Yine bir sponsor ile. Tek başıma da yaparım da zamanım olmuyor doğrusu. Neyse gelelim tasarıma. Kaan arkadaşım ile beraber yaptık bu seferde. O cizdi ben kodladım... İnşallah seversiniz tasarımı. Tarikmentese siteme koyacaktım vaz geçtim size sunuyorum.. Üst tarafta istanbul resimleri cok güzel durdu. iki tane reklam alanı özelliği var. Ana sayfaya da bir blog tarzı öneririm. Cok yakışır. Güle güle kullanın...

Tasarımız üstüne:
<style type="text/css">  </style>

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<body onLoad="MM_preloadImages('https://img.webme.com/pic/e/expertweb/2_02.png','https://img.webme.com/pic/e/expertweb/2_03.png','https://img.webme.com/pic/e/expertweb/2_04.png','https://img.webme.com/pic/e/expertweb/2_05.png','https://img.webme.com/pic/e/expertweb/2_06.png','images/2_07.png')"><table width="898" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="124" valign="top" background="https://img.webme.com/pic/e/expertweb/2_01.png"><table width="880" border="0" align="center" cellspacing="0">
<tr>
<td width="398" height="31"> </td>
<td width="478"> </td>
</tr>
<tr>
<td height="76"> </td>
<td align="left" valign="top"><a href="http://bs-aktif.tr.gg"><img alt="" src="https://img.webme.com/pic/b/bs-aktif/468x60-banner.png" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td><a href="xxxxxxxxxxxxxxx" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','https://img.webme.com/pic/e/expertweb/2_02.png',1)"><img src="https://img.webme.com/pic/e/expertweb/untitled-1_02.png" name="Image1" width="162" height="56" border="0"></a><a href="xxxxxxxxxxxxxx" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','https://img.webme.com/pic/e/expertweb/2_03.png',1)"><img src="https://img.webme.com/pic/e/expertweb/untitled-1_03.png" name="Image2" width="109" height="56" border="0"></a><a href="xxxxxxxxxxxxxxxxx" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','https://img.webme.com/pic/e/expertweb/2_04.png',1)"><img src="https://img.webme.com/pic/e/expertweb/untitled-1_04.png" name="Image3" width="139" height="56" border="0"></a><a href="xxxxxxxxxx" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','https://img.webme.com/pic/e/expertweb/2_05.png',1)"><img src="https://img.webme.com/pic/e/expertweb/untitled-1_05.png" name="Image4" width="183" height="56" border="0"></a><a href="xxxxxxxxxxxxxxx" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','https://img.webme.com/pic/e/expertweb/2_06.png',1)"><img src="https://img.webme.com/pic/e/expertweb/untitled-1_06.png" name="Image5" width="126" height="56" border="0"></a><a href="xxxxxxxxxxxxxxxxx" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','https://img.webme.com/pic/e/expertweb/2_07.png',1)"><img src="https://img.webme.com/pic/e/expertweb/untitled-1_07.png" name="Image6" width="179" height="56" border="0"></a></td>
</tr>
<tr>
<td height="144" valign="top" background="https://img.webme.com/pic/e/expertweb/2_08.png"><table width="870" border="0" align="center" cellspacing="00">
<tr>

<td height="144" valign="top"><div id="content"></div>

Tasarımın altına:
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="120" valign="top" background="https://img.webme.com/pic/b/bs-aktif/alttarafidirr.png"><table width="858" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="475" height="27"> </td>
<td width="383"> </td>
</tr>
<tr>
<td height="66" align="left" valign="top"><a href="http://bs-aktif.tr.gg"><img alt="" src="https://img.webme.com/pic/b/bs-aktif/468x60-banner.png" /></a></td>
<td align="center" valign="middle">LİNK TAKAS</td>
</tr>
</table></td>
</tr>

</table>

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;} table {margin-left: auto;margin-right: auto} /* Theme Name: Blue Nights Theme URI: http://www.themeforest.net Description: A dark and sleek WordPress theme. Version: 1.0 Author: Sevban Öztürk (peex) Author URI: http://themeforest.net/user/peex */ /*-------[ general ]-------------------------------------------*/ body { background:#0E0E0E; margin:20px 0 20px 0; padding:0; font:12px Arial, Tahoma, Sans-Serif; color:#aaa; } ul,ol,p,h1,h2,h3,h4,h5,h6,blockquote,fieldset,form { margin:0; padding:0; } a { text-decoration:none; outline:none; color:#1BA0CD; } a:hover { color:#80C8EE; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .alignleft { float:left; border:1px solid #333; margin:4px 7px 0 0; padding:4px; background:#1a1a1a; } .alignright { float:right; border:1px solid #333; margin:5px 0 0 7px; padding:4px; background:#1a1a1a; } fieldset { border:none; } /*-------[ outer & container ]-------------------------------------------*/ #outer { border:1px solid #1E1E1E; width:802px; margin:0 auto; } /*-------[ navigation ]-------------------------------------------*/ #navigation { height:30px; width:800px; border-bottom:1px solid #000; background:url(images/nav.jpg) repeat-x; } #navigation ul { list-style:none; } #navigation li { float:left; border-right:1px solid #000; } #navigation li a { display:block; color:#ddd; font:11px Arial, Tahoma, Sans-Serif; text-transform:uppercase; padding:8px 0 8px 0; width:100px; text-align:center; } #navigation li a:hover { background:url(images/nav.jpg) 0 -30px repeat-x; color:#fff; } /*-------[ search ]-------------------------------------------*/ #search-form { position:absolute; margin-left:640px; } .search-field { border:solid #000; border-width:0 1px 0 1px; background:url(images/search.jpg) repeat-x; font:12px Arial, Tahoma, Sans-Serif; color:#aaa; padding:7px 3px 8px 3px; width:120px; } .search-submit { border:none; background:none; font:11px Arial, Tahoma, Sans-Serif; color:#aaa; padding:7px 5px 8px 5px; cursor:pointer; margin-left:-3px; } .search-submit:hover { background:url(images/nav.jpg) 0 -30px repeat-x; color:#fff; } /*-------[ header ]-------------------------------------------*/ #header { width:800px; height:150px; background:url(http://i1103.hizliresim.com/2011/3/2/6714.jpg) no-repeat; text-indent:-9999pt; border-bottom:1px solid #000; } /*-------[ main ]-------------------------------------------*/ #main { padding:15px 15px 0 15px; width:770px; border-top:1px solid #333; } /*-------[ breadcrumb ]-------------------------------------------*/ #breadcrumb { list-style:none; height:30px; width:785px; border-top:1px solid #444; background:url(images/breadcrumb.jpg) repeat-x; border-bottom:1px solid #0C0C0C; padding-left:15px; } #breadcrumb li { float:left; padding:7px 15px 8px 0; margin-right:10px; background:url(images/breadcrumb-sep.jpg) right -2px no-repeat; } #breadcrumb li:last-child { background:none; } #breadcrumb li a { display:block; } /*-------[ sidebar ]-------------------------------------------*/ #sidebar { float:left; width:200px; } .sidebox { border:1px solid #0c0c0c; margin-bottom:15px; background:#222; } .sidebox h3 { font:14px Arial, Tahoma, Sans-Serif; color:#ccc; background:url(images/title.jpg) repeat-x; padding:7px 0 7px 5px; border-bottom:1px solid #0c0c0c; } .sidebox ul { list-style:none; margin-bottom:-1px; } .sidebox li { border-bottom:1px solid #0c0c0c; border-top:1px solid #333; } .sidebox li a { display:block; padding:5px; color:#888; } .sidebox li a:hover { background:#282828; color:#1BA0CD; } .sidebox ul ul { /* category children */ border-top:1px solid #0c0c0c; } .sidebox ul ul li a { /* category children */ padding-left:15px; } #tagcloud { border-top:1px solid #333; padding:10px; } #tagcloud a { color:#888; } #tagcloud a:hover { color:#1BA0CD; } /*-------[ calendar widget ]-------------------------------------------*/ #calendar_wrap table { color:#888; width:198px; font-size:10px; border-top:1px solid #333; text-align:center; } /*-------[ recent comments widget ]-------------------------------------------*/ .recentcomments { padding:5px; } .recentcomments:hover { background:#282828; } .recentcomments a, .recentcomments a:hover { display:inline; background:none !important; } /*-------[ text widget ]-------------------------------------------*/ .textwidget { padding:5px; border-top:1px solid #333; font-size:11px; line-height:16px; } /*-------[ content ]-------------------------------------------*/ #content { float:right; width:555px; margin-left:15px; } /*-------[ posts ]-------------------------------------------*/ .post { border:1px solid #0c0c0c; line-height:18px; margin-bottom:15px; background:#222; } .post-title { font:14px Arial, Tahoma, Sans-Serif; color:#ccc; background:url(images/title.jpg) repeat-x; padding:7px 0 7px 10px; border-bottom:1px solid #0c0c0c; } .post-title a { color:#98CEF2; } .post-title a:hover { color:#ddd; } .post-meta { padding:5px 10px 5px 10px; font-size:11px; background:#292929; border-bottom:1px solid #0c0c0c; border-top:1px solid #3a3a3a; } .post-meta span { border-right:1px solid #0c0c0c; border-left:1px solid #3a3a3a; padding-right:8px; padding-left:8px; display:block; float:left; } span.post-date { border-left:none; padding-left:0; } span.post-comment { border-right:none; } span.post-edit { border-right:none; border-left:1px solid #0c0c0c; padding-left:0; } .post-edit a { display:block; border-left:1px solid #3a3a3a; padding-left:10px; } .post-tags { padding:5px 10px 5px 10px; font-size:11px; background:#292929; border-top:1px solid #3a3a3a; } .tags { border-top:1px solid #0c0c0c; } .post-text { padding:10px 10px 0 10px; border-top:1px solid #333; background:#222; } .post-text p { margin-bottom:10px; } .post-text ul { margin:0 0 10px 30px; line-height:18px; } .post-text ol { margin:0 0 10px 30px; line-height:18px; } .post-text blockquote { border-left:5px solid #333; margin:10px 0 10px 0; padding:5px 10px 5px 10px; background:#292929; } .post-text blockquote p { margin:0 !important; } .post-text code { background:#2E2E2E; padding:2px; } .post-text table { width:100%; border-left:1px solid #353535; border-top:1px solid #353535; margin-bottom:10px; } .post-text td, #content th { border-right:1px solid #353535; border-bottom:1px solid #353535; padding:5px; } .post-text th { text-align:left; color:#ccc; font-size:13px; font-weight:normal; background:#292929; } .post-text h1, .post-text h2, .post-text h3, .post-text h4, .post-text h5, .post-text h6 { font-family:Arial, Tahoma, Sans-Serif; font-weight:normal; color:#ccc; border-bottom:1px solid #333; padding-bottom:2px; margin-bottom:10px; } .post-text h1 { font-size:20px; } .post-text h2 { font-size:18px; } .post-text h3 { font-size:16px; } .post-text h4 { font-size:14px; } .post-text h5 { font-size:12px; } .post-text h6 { font-size:11px; } /*-------[ comments ]-------------------------------------------*/ #comments { border:1px solid #0c0c0c; border-top:none; line-height:18px; background:url(images/comment-shade.jpg) repeat-x left top #222; padding:15px 10px 6px 10px; margin-bottom:15px; } #comments h3 { font:14px Arial, Tahoma, Sans-Serif; color:#ccc; border-bottom:1px solid #353535; padding-bottom:2px; margin-bottom:15px; } .commentlist { list-style:none; padding:10px; margin:-10px -10px 0 -10px; } .commentlist li { background:#202020; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #111; border-bottom:1px solid #111; padding:10px 10px 0 10px; margin-bottom:10px; } .commentlist ul { list-style:none; } .commentlist ul li { margin-top:10px; } .comment-author { background:#242424; padding:10px; margin:-10px; color:#ccc; } .says { display:none; } .fn { font-style:normal; font-size:13px; } .avatar { float:right; border:1px solid #333; padding:2px; background:#1a1a1a; } .comment-meta { background:url(images/comment-shade.jpg) repeat-x left bottom #242424; padding:0 10px 12px 10px; margin:0 -10px 10px -10px; font-size:11px; } .commentlist p { margin-bottom:10px; } .reply { margin-bottom:10px; } /*-------[ comment pagination ]-------------------------------------------*/ #comment-pager { margin:-5px 0 15px 0; } #comment-pager:after { content: "."; display: block; height: 0; clear: left; visibility: hidden; } #comment-pager a, #comment-pager span { background:url(images/pagination.jpg) repeat-x #222; margin-right:5px; padding:4px 7px 4px 7px; display:block; float:left; color:#888; border:1px solid #0C0C0C; } #comment-pager a:hover { background:url(images/pagination.jpg) 0 -30px repeat-x #282828; color:#1BA0CD; } #comment-pager span { color:#ddd; } /*-------[ comment form ]-------------------------------------------*/ #respond p label { float:left; display:block; margin:5px 0 0 10px; } #respond p label small { font-size:12px; } #respond p input { float:left; display:block; } #respond p:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #respond input, #respond textarea { color:#999; font:12px Arial, Tahoma, Verdana; border:1px solid #333; background:#1B1B1B; } #respond textarea { width:97.8%; height:150px; padding:5px; margin-top:5px; } #respond input { padding:7px 5px 7px 5px; width:180px; margin-bottom:10px; display:block; } #respond input:focus, #respond textarea:focus { background:#111; } input#submit { font:11px Arial, Tahoma, Verdana; padding:7px 10px 7px 10px; width:auto; text-align:center; text-transform:uppercase; margin:10px 0 0 0; color:#ccc; background:url(images/button.jpg) repeat-x; border:1px solid #0c0c0c; cursor:pointer; float:none !important; } input#submit:hover { background:url(images/button.jpg) 0 -30px repeat-x; color:#fff; border:1px solid #000; } input#submit:focus { outline:none; } input#comment_post_ID, input#comment_parent, input#_wp_unfiltered_html_comment { visibility:hidden; padding:0; margin:0; } /*-------[ previous and next post links ]-------------------------------------------*/ #prev-next { margin-bottom:15px; } .previous-post { float:left; } .next-post { float:right; } /*-------[ contact form ]-------------------------------------------*/ #contactform fieldset { border:none; } #contactform input, #contactform textarea { border:1px solid #0C0C0C; color:#999; font:12px Arial, Tahoma, Verdana; border:1px solid #333; background:#1B1B1B; } #contactform textarea { width:450px; height:150px; padding:5px; } #contactform input { padding:7px 5px 7px 5px; width:180px; margin-bottom:10px; display:block; } #contactform label { margin-bottom:2px; display:block; } #contactform input:focus, #contactform textarea:focus { background:#111; } #contactform .send { font:11px Arial, Tahoma, Verdana; padding:7px 10px 7px 10px; width:auto; text-align:center; text-transform:uppercase; margin-top:10px; color:#ccc; background:url(images/button.jpg) repeat-x; border:1px solid #0c0c0c; cursor:pointer; } #contactform .send:hover { background:url(images/button.jpg) 0 -30px repeat-x; color:#fff; } #contactform .send:focus { outline:none; } /*-------[ pagination ]-------------------------------------------*/ .pagination { margin-bottom:15px; } .pagination:after { content: "."; display: block; height: 0; clear: left; visibility: hidden; } .pagination a, .pagination span { background:url(images/pagination.jpg) repeat-x #222; margin-right:5px; padding:4px 7px 4px 7px; display:block; float:left; color:#888; border:1px solid #0C0C0C; } .pagination a:hover { background:url(images/pagination.jpg) 0 -30px repeat-x #282828; color:#1BA0CD; } span.pagination-current { color:#ddd; } /*-------[ footer ]-------------------------------------------*/ #footer { width:800px; border-top:1px solid #000; background:#202020; } #footer p { padding:15px; border-top:1px solid #303030; }

Gri istanbul tasarımı

Bilgilerin

Ana menu

EXTRA

Dost siteler