كود css + html تكويد منطقة الدخول لاول مره في الابداع العربي

 من طرف K!M0 في الجمعة يوليو 18, 2014 9:30 am

كود css + html تكويد منطقة الدخول لاول مره في الابداع العربي


السلام عليكم ورحمه الله وبركاته


حبيت اني اضع الكود لكي اساعد الاخوه المكويدين انهم يكودوا منطقة الدخول بكل سهوله بالشكل دا ( يعني اي منطقة دخول عاوز تعملها يبقي لازم تكون بالشكل دا )






الطريقة دي بتعتمد علي اللي بيعرف بس في css شوية يعني مش لازم يكون محترف


تفضلوا كود css

الكود:

#login {
    background-image: url("http://i39.servimg.com/u/f39/17/37/43/87/log10.png");
    background-repeat: no-repeat;
    height: 123px;
    left: 55px;
    position: absolute;
    top: 112px;
    width: 434px;
}

.namelogin {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: #FFFFFF;
    direction: rtl;
    font-family: Droid Arabic Kufi,Tahoma,Geneva,sans-serif;
    height: 26px;
    position: absolute;
    right: 72px;
    top: 23px;
    width: 131px;
}
.passlogin {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: #FFFFFF;
    direction: rtl;
    font-family: Droid Arabic Kufi,Tahoma,Geneva,sans-serif;
    height: 26px;
    position: absolute;
    right: 264px;
    top: 23px;
    width: 131px;
}
.remember {
    bottom: 43px;
    height: 21px;
    position: absolute;
    right: 51px;
    top: 59px;
    width: 19px;
}
.login-button {
    border: medium none;
    cursor: pointer;
    height: 23px;
    left: 268px;
    position: absolute;
    top: 61px;
    width: 85px;
}
#login2 {
    background-image: url("http://i39.servimg.com/u/f39/17/37/43/87/log210.png");
    background-repeat: no-repeat;
    height: 151px;
    left: 55px;
    position: absolute;
    top: 90px;
    width: 427px;
}


ودا كود html

الكود:

<div id="login" ">
 
  <form onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, 0)" method="post" action="login.php?do=login">
  <script src="../Documents/clientscript/vbulletin_md5.js?v=384" type="text/javascript"></script>
  <table border="0" cellspacing="3" cellpadding="0">
  <tbody><tr>
 
  <td style="height: 23px">
  <input type="text" onfocus="if (this.value == 'اسم العضو') this.value = '';" value="اسم العضو" tabindex="101" accesskey="u" size="10" id="navbar_username" name="vb_login_username" class="namelogin"></td>
  <td style="height: 23px">
  <input type="checkbox" accesskey="c" id="cb_cookieuser_navbar" tabindex="103" value="1" name="cookieuser" class="remember"></td>
  </tr>
  <tr>
  <td>
  <input type="password" tabindex="102" size="10" id="navbar_password" name="vb_login_password" class="passlogin"></td>
  <!-- button -->
        <td><input type="image" accesskey="s" title="ادخل اسم العضو وكلمة المرور الخاصة بك في الحقول المجاورة لتسجيل الدخول, أو اضغط على رابط 'التسجيل' لإنشاء حساب خاص بك." value="" tabindex="104" class="login-button" src="http://i39.servimg.com/u/f39/17/37/43/87/but10.png"></td>
 
  </tr>
  </tbody></table>
  <input type="hidden" value="" name="s">
  <input type="hidden" value="guest" name="securitytoken">
  <input type="hidden" value="login" name="do">
  <input type="hidden" name="vb_login_md5password">
  <input type="hidden" name="vb_login_md5password_utf">
  </form>
 
</div>
</div>


الكود html جاهز ولا يحتاج اي تعديل اللي يحتاج تعديل هو كود css في الحجم - العرض والارتفاع 


كمان دا رابط المنطقه https://i.servimg.com/u/f39/17/37/43/87/log10.png


غيره بصورة المنطقة الجديدة بس حاول انك تخليها png 


ودي الصورة https://i.servimg.com/u/f39/17/37/43/87/log210.png


اللي بعد تسجيل الدخول فارغة ( يعني لازم تفرغ المنطقة الجديدة ايضاً )


يعني كل ما عليك انك تشوف الصور وتغيرها بالجديدة وتغير الحجم من حيث width - height - top - left


وشكرا -- يمنع النقل بدون ذكر المصدر منتدي الابداع العربي -- K!M0


لا تنسوني من التقييم تعبت في الكود دا


والسلام عليكم


كان معكم K!M0

التوقيع

لمراسلة الادارة بأمور خاصة لايشاهدها غير الادارة فقط

من هنا لطلب الالتحاق بفريق منتدانا الحبيب

 من طرف 1One-Script في الجمعة يوليو 18, 2014 9:55 pm

شكرا
شرح اكثر من رائع

 من طرف زائر في الجمعة يوليو 18, 2014 10:26 pm

شرح رائع وممتاز وفقك الله يابطل

 من طرف K!M0 في الأحد يوليو 20, 2014 10:08 am

شكرا لمروركم جميعاً منورين الموضوع

التوقيع

لمراسلة الادارة بأمور خاصة لايشاهدها غير الادارة فقط

من هنا لطلب الالتحاق بفريق منتدانا الحبيب

 من طرف زائر في الثلاثاء يوليو 22, 2014 3:41 am

بطل =)

وفقت ♥

 من طرف bigest في الأربعاء يوليو 23, 2014 2:28 am

شكرا علي الشرح الرائع

 من طرف 1BlaCk GlaSs في السبت أغسطس 09, 2014 2:28 pm

شكرا لك

التوقيع

لمراسلة الادارة بأمور خاصة لايشاهدها غير الادارة فقط

من هنا لطلب الالتحاق بفريق منتدانا الحبيب

 من طرف Àťéf Hàmmàď في الثلاثاء ديسمبر 23, 2014 6:28 pm

شكرا لك

التوقيع

لمراسلة الادارة بأمور خاصة لايشاهدها غير الادارة فقط

من هنا لطلب الالتحاق بفريق منتدانا الحبيب

 من طرف RayanAbdullah في الإثنين فبراير 16, 2015 3:00 pm

يعطيكْ العافيه على الطرح المتميز

 من طرف AnTonio في السبت يوليو 04, 2015 8:00 pm

شكرا جزيلا لك على الموضوع المميز 

التوقيع