[شرح] وضع اطار حول نك العضو ...

[AL_MoHaNDS]

السلام عليكم ,,

حبيت أشرح لكم طريقة وضع اطار حول نك نيم العضو
مثال :
http://www.hymanuae.com/hyman/uae/m1.gif

الطريقة بالتفصيل الممل:
1- ادخل على التحكم بالاستايلات

http://www.hymanuae.com/hyman/uae/m2.gif

2- ادخل على الاستايل اللي تبغي تعدل عليه

http://www.hymanuae.com/hyman/uae/m3.gif

3- انزل في الأسفل عند تعاريف الـ css

http://www.hymanuae.com/hyman/uae/m4.gif

وحط في اعلاه الكود التالي :

.gulfsonaa
{
padding: 1px;
BORDER-TOP: 1px ridge #10508D;
BORDER-LEFT: 1px ridge #10508D;
BORDER-RIGHT: 1px ridge #10508D;
BORDER-BOTTOM: 1px ridge #10508D;
background-color:#ffffff;
background-image: url("images/body.gif");
****-align: center;
color:#10508D;
font: 10px MS Sans Serif,tahoma;
cursor: hand;
width: 80px;
height: 20px
}
.gulfsonab
{
padding: 1px;
BORDER-TOP: 1px ridge #10508D;
BORDER-LEFT: 1px ridge #10508D;
BORDER-RIGHT: 1px ridge #10508D;
BORDER-BOTTOM: 1px ridge #10508D;
background-color:#fffffF;
background-image: url("images/body.gif");
****-align: center;
color:#10508D;
font: 10px MS Sans Serif,tahoma;
cursor: hand;
width: 80px;
height: 20px
}
.gulfsonad
{
padding: 1px;
BORDER-TOP: 1px ridge #10508D;
BORDER-LEFT: 1px ridge #10508D;
BORDER-RIGHT: 1px ridge #10508D;
BORDER-BOTTOM: 1px ridge #10508D;
background-color:#ffffff;
background-image: url("images/body.gif");
****-align: center;
color:#10508D;
font: 10px MS Sans Serif,tahoma;
cursor: hand;
width: 80px;
height: 20px
}
.gulfsonac
{
padding: 1px;
BORDER-TOP: 1px ridge #10508D;
BORDER-LEFT: 1px ridge #10508D;
BORDER-RIGHT: 1px ridge #10508D;
BORDER-BOTTOM: 1px ridge #10508D;
background-color:#ffffff;
background-image: url("images/body.gif");
****-align: center;
color:#10508D;
font: 10px MS Sans Serif,tahoma;
cursor: hand;
width: 80px;
height: 20px
}
.gulfsonn
{
background: #ffffff url("images/body.gif");
color: #10508D;
font-size: 8pt;
border: 1px solid #10508D;
****-align: center;
cursor: hand;
width: 54px;
height: 20px
}
.gulfsonm
{
background: #ffffff url("images/body.gif");
color: #10508D;
font-size: 8pt;
border: 1px solid #10508D;
****-align: center;
cursor: hand;
width: 197px;
height: 20px
}

.red
{
margin: 0px 0px 0px 0px;
width:48;
border: 1px solid #FF1515;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#FF1515;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#ffffff;
background-image: url('altaer/color_bg.gif');
****-align:center;
}

.green
{
margin: 0px 0px 0px 0px;
width:48;
border: 1px solid #006600;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#006600;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#ffffff;
background-image: url('altaer/color_bg.gif');
****-align:center;
}

.blue
{
margin: 0px 0px 0px 0px;
width:48;
border: 1px solid #0000FF;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#0000FF;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#ffffff;
background-image: url('altaer/color_bg.gif');
****-align:center;
}

.gray
{
margin: 0px 0px 0px 0px;
width:48;
border: 1px solid #CCCCCC;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#CCCCCC;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#ffffff;
background-image: url('altaer/color_bg.gif');
****-align:center;
}

.fushia
{
margin: 0px 0px 0px 0px;
width:48;
border: 1px solid #FF66CC;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#FF66CC;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#ffffff;
background-image: url('altaer/color_bg.gif');
****-align:center;
}

.orang
{
margin: 0px 0px 0px 0px;
width: 48;
border: 1px solid #FF9900;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#FF9900;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#ffffff;
background-image: url('altaer/color_bg.gif');
****-align:center
}

.teal
{
margin: 0px 0px 0px 0px;
width: 48;
border: 1px solid #008080;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#008080;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#ffffff;
background-image: url('altaer/color_bg.gif');
****-align:center;
}

.brown
{
margin: 0px 0px 0px 0px;
width: 48;
border: 1px solid #BF0000;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#BF0000;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#ffffff;
background-image: url('altaer/color_bg.gif');
****-align:center;
}

.pink
{
margin: 0px 0px 0px 0px;
width: 48;
border: 1px solid #CC33FF;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#CC33FF;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#ffffff;
background-image: url('altaer/color_bg.gif');
****-align:center;
}

.black
{
margin: 0px 0px 0px 0px;
width: 48;
border: 1px solid #000000;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#000000;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#ffffff;
background-image: url('altaer/color_bg.gif');
****-align:center;
}

.white
{
margin: 0px 0px 0px 0px;
width: 48;
border: 1px solid #ffffff;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#ffffff;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#ffffff;
background-image: url('altaer/color_bg.gif');
****-align:center;
}

4- احفظ العمل ، وادخل على التحكم بالمجموعات

http://www.hymanuae.com/hyman/uae/m5.gif

5- اختر المجموعه اللي تبغي اطبق عليها

http://www.hymanuae.com/hyman/uae/m6.gif

6- وحط الكود فالمربعين الظاهرين لك فالصورة (( اسم العضو بصيغة الhtml ))

http://www.hymanuae.com/hyman/uae/m7.gif

المربع اللي على اليمين حط هذا

<input type="****" name="T1" size="17" class="red" value="

واللي على اليسار حط هذا

" readonly style="width: 90">

واحفظ العمل وروح شوف النك بيكون تغير

طريقة تغيير الألوان من مجموعه لأخرى
غير كلمه red فالكود اللي وضعته ع اليمين للكلمات التالية :

gulfsonaa
gulfsonab
gulfsonad
gulfsonac
gulfsonn
gulfsonm
red
green
blue
gray
fushia
orang
teal
brown
pink
black
white

وان شاء الله انه يكون واضح الشرح

أخوكم
المـُـهندس ,,

[بن وايل]

يعطيك الف عافيه اخوي المهندس على هالمعلومه

وربي يبارك فيك

[AL_MoHaNDS]

كل الشكر لك حبيبي بن وايل على المرور ,,

[وردة حب]

مراحب


يعطيك العافيه ع هالخطوات


تقبل مروري


!! وردة حب !!

[AL_MoHaNDS]

مشكورين على المرور اخواني