هيدر CSS احترافي

الخميس مارس 16, 2017 5:33 pm1

بسم الله الرحمن الرحيم
و الصلاه و السلام على سيد المرسلين
و السلام عليكم و رحمه الله و بركاته
------------
هيدر CSS احترافي

كود
الكود:

<style type="text/css">

.top {
background-image:url('http://im17.gulfup.com/SLs61.png');
background-repeat:repeat-x;
height:64px;
}

.fty {
background-image:url('http://im26.gulfup.com/WtH11.png');
float:left;
width:215px;
height:64px;
}

.h1 {
background-image: url('http://im26.gulfup.com/42D66.png');
background-repeat:repeat-x;
height:249px;

}

.h2 {
background-image: url('http://im26.gulfup.com/QGfz7.png');
float:right;
height:249px;
width:375px;

}

.h3 {
background-image:url('http://im26.gulfup.com/DkTc2.png');
float:left;
height:249px;
width:396px;
}

.menu-texe {
height: 57px;
margin-right:;
margin-top: 0;
}
.menu-texe li {
cursor: pointer;
float: right;
overflow: hidden;
padding: 0;
padding-top:11px;
}

.long {
float: right;

}
.menu-texe li a {
background-image:url('http://im26.gulfup.com/tkcH3.png');
color: #ffffff;
display: inline-block;
font-family: Tahoma,Geneva,sans-serif;
font-size: 8pt;
font-weight: bold;
height: 40px;
line-height: 32px;
margin-right: 3px;
overflow: hidden;
padding-top: 8px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #737373;
width:101px;

}
.menu-texe li a:hover {
background-image: url('http://im17.gulfup.com/Y5E91.png');
color: #FFFFFF;
display: inline-block;
font-family: Tahoma,Geneva,sans-serif;
font-size: 8pt;
font-weight: bold;
height: 40px;
line-height: 32px;
margin-right: 3px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #333333;
width: 100px;
}
body{
padding:0;
margin:0;
background-position:center;
}
a{
text-decoration:none;
}

.style1 {
text-align: center;
}

</style>
</head>

<body style="background-image: url('http://im26.gulfup.com/c4Ce8.png')">

<div class="top">

<a class="fty"></a>

<ul class="menu-texe">
<li><a href="#">الرئيسية</a></li>
<li><a href="#">المنتديات</a></li>
<li><a href="#">القوانين</a></li>
<li><a href="#">فقد كلمة السر</a></li>
<li><a href="#">تسجيل</a></li>
<li><a href="#">دخول</a></li>

</ul>

</div>

<div class="h1">
<div class="h2"></div>
<div class="h3"></div>
</div>

<p class="style1"><map id="FPMap0" name="FPMap0">
<area coords="209, 10, 302, 45" href="هنا%20رابط%20ما%20الجديد" shape="rect" />
<area coords="90, 9, 204, 53" href="هنا%20رابط%20مساهماتي" shape="rect" />
<area coords="28, 9, 90, 51" href="هنا%20رابط%20الخروج" shape="rect" />
<area coords="645, 9, 729, 41" href="هنا%20رابط%20التسجيل" shape="rect" />
</map>
<img alt="" height="112" src="http://im26.gulfup.com/WpWi5.png" usemap="#FPMap0" width="1000" /></p>

</body>

</html>

كود يضع في قالب الهيدر بعد كلمه
الكود:

<head>
يمنع نزع الحقوق