aktif-dost
Moderatör
Konum: İstanbul/Türkiye
06.04.2020, 11:50 (UTC) Mesaj konusu: Red Class Design
Herkese merhaba.
Sizinle 2011 yılında yaptığım ufak mini bir tasarımı paylaşmak istiyorum.
Tasarımın üstü
Kod: <div id="div1">
<div id="div4"></div>
<div id="div5"><img src="http://img.webme.com/pic/g/grafiker-uzmani/761-96_reklam.png" width="761" height="96" longdesc="#"></div>
</div>
<div id="div2">
<table width="1005" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="236" align="left" valign="top" scope="row"><div class="red-class-t-m" id="red-class-t-m">
<ul>
<h3>Menü Başlığı</h3>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
</ul>
<br>
<ul>
<h3>Menü Başlığı</h3>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
</ul>
</div>
</td>
<td width="18"> </td>
<td width="740" align="left" valign="top">
Tasarımın altı :
Kod: </td>
<td width="11"> </td>
</tr>
</table>
</div>
<div id="div3"></div>
</td>
<td width="11"> </td>
</tr>
</table>
</div>
</td>
<td width="11"> </td>
</tr>
</table>
</div>
Css kodu:
Kod: table {margin-left: auto;margin-right: auto}
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;}
#div1 {
background-image: url(http://img.webme.com/pic/g/grafiker-uzmani/red-class_01.png);
height: 119px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#div2 {
background-image: url(http://img.webme.com/pic/g/grafiker-uzmani/red-class_02.png);
height: auto;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#div3 {
background-image: url(http://img.webme.com/pic/g/grafiker-uzmani/red-class_03.png);
height: 66px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#div4 {
background-image: url(http://img.webme.com/pic/g/grafiker-uzmani/241-96_logo.png);
height: 96px;
width: 241px;
float: left;
margin-top: 8px;
margin-left: 8px;
}
#div5 {
background-image: url(http://img.webme.com/pic/g/grafiker-uzmani/761-96_reklam.png);
float: right;
height: 96px;
width: 761px;
margin-top: 8px;
margin-right: 8px;
}
body {
background-image: url();
background-color: #b82828;
}
.red-class-t-m {
}
#red-class-t-m ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#red-class-t-m li {
width: 238px;
height: 20px;
border-bottom-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
#red-class-t-m h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 238px;
background-color: #FFFFFF;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
text-align: center;
font-size: 16px;
padding: 0px;
height: 20px;
}
#red-class-t-m a:hover {
color: #FFFFFF;
}
#red-class-t-m a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
text-decoration: none;
}
#webme_footer_textlink_dont_hide {
color: #000000;
position: absolute;
left: 350px;
in: 0px;
padding: 9px 27px 8px 120px;
background: url(http://img.webme.com/pic/g/grafiker-uzmani/reklam_textlink.png);
}
Blog kodu:
Kod: <style type="text/css">
<!--
.style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.style4 {font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
-->
</style>
<table width="520" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="33" background="https://img.webme.com/pic/g/grafiker-uzmani/red-class-blog1.png" scope="row">
<table width="508" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" valign="top" scope="row"><span class="style4">Konu başlığı </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="105" background="https://img.webme.com/pic/g/grafiker-uzmani/red-class-blog2.png" scope="row"><a href="#"><img src="https://img.webme.com/pic/g/grafiker-uzmani/red-class-blog2.png" width="520" height="105" border="0" alt="" /></a></td>
</tr>
<tr>
<td height="11" background="https://img.webme.com/pic/g/grafiker-uzmani/red-class-blog-i_01.png" scope="row"> </td>
</tr>
<tr>
<td height="33" background="https://img.webme.com/pic/g/grafiker-uzmani/red-class-blog-ic_02.png" scope="row">
<table width="508" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td scope="row"><span class="style2">Blog içeriği hakkında kısa bir bilgi vermek istiyorum.. Konu başlığı kısımına konu ile alakalı olan başlığı yazın.. Hemen alt kısımında 540 x 105 boyutlarında olucak blog için bir konu hakkında bir resim koymanız gerekmektedir.. Bu konuda önemli bir not düşmeliyim.. Boyut 520 x 105 boyutlarını kesinlikle geçmemelidir.. Son olarak bu alana konu hakkında açıklama gelmelidir.. <br />
</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="13" background="https://img.webme.com/pic/g/grafiker-uzmani/red-class-blog-i_03.png" scope="row"> </td>
</tr>
</tbody>
</table>
<br />
<br />
<table width="292" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="292" scope="row"><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> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sayfalandirma1','','https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-1-.png',1)"><img src="https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-1.png" name="sayfalandirma1" width="32" height="33" border="0" alt="" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sayfalandirma2','','https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-2-.png',1)"><img src="https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-2.png" name="sayfalandirma2" width="32" height="33" border="0" alt="" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sayfalandirma3','','https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-3-.png',1)"><img src="https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-3.png" name="sayfalandirma3" width="32" height="33" border="0" alt="" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sayfalandirma4','','https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-4-.png',1)"><img src="https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-4.png" name="sayfalandirma4" width="32" height="33" border="0" alt="" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sayfalandirma5','','https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-5-.png',1)"> <img src="https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-5.png" name="sayfalandirma5" width="32" height="33" border="0" alt="" /> </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sayfalandirma6','','https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-6-.png',1)"><img src="https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-6.png" name="sayfalandirma6" width="32" height="33" border="0" alt="" /> </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sayfalandirma7','','https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-7-.png',1)"><img src="https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-7.png" name="sayfalandirma7" width="32" height="33" border="0" alt="" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sayfalandima8','','https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-8-.png',1)"><img src="https://img.webme.com/pic/g/grafiker-uzmani/red-clas-sayfalandirma-8.png" name="sayfalandima8" width="32" height="33" border="0" alt="" /></a></td>
</tr>
</tbody>
</table>
______________
- Teknik Destek Personeli