الويب العربي - كيف ارتب الصور بطريقة CSS في صفحة مدونة wordpress " التفاصيل والصور هنا "

الويب العربي (http://www.arabwebtalk.com/index.php)

- تبادل خبرات البرمجة (http://www.arabwebtalk.com/forumdisplay.php?f=57)

كيف ارتب الصور بطريقة CSS في صفحة مدونة wordpress " التفاصيل والصور هنا "

ولكني اريد وضع هذه الصور داخل صفحة مدونة ووردبريس باستخدام اكواد CSS لتظهر بهذا الشكل :
مثال :

علما اني دخلت على موقع مشهور اسمه
http://ar.html.net
فيه دروس CSS
ولكني لم استطيع الوصول للكود المناسب

هل من مساعدة ؟

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

اولا : موضوع التعامل مع css يجب ان تعلم ياخي انه يشمل الموقع كلة و ليس منطقة محددة دون عن الاخري
ثانيا : مدونة ووردبريس في التمبلت خاصتها css يتفاعل علي اساسة الموقع بالكامل و التعامل معه ياثر علي كل محتويات الموقع

ثالثا : اذا اردة اضافة الصورة في المدونه فيجب عليك الالتزام بمنظومتها اما اذا اردة ان تقوم بعمل ترتيب خاص ليك في صفحة ما فموضوعها علي حد معلومات عن ووردبريس انك هتعمل الاتي بعد

1 - انشاء صفحة html عاديها و تقوم بعمل لهذه الصفحة css خاص بيها
2- تقوم برفع كود الصفحة لمدونت ووردبريس في المكان المراد نشرها فية
3- تقوم برفع css الخاص بهذه الصفحة في مكان ما في المساحة خاصتك
4 - تعديل الاكود في صفحة html لتتوجة الي مكان css الجديد

و الله و لي التوفيق

سلام الله عليكم
اخى الكريم
اولا هناك ما يسمى بالكلاس فى ال css بحيث انك تقدر على اضافة كلاس معين فى كود ال css وتستدعى هذا الكلاس على شى معين فى الكود الخاص بك فى صفحة ال html مما يظهر التأثير بشكل فعلى على هذا
والان نحن نتحدث عن تأثير قريب بعمل جالارى لمجموعة من الصور متوفرة لديك
انظر للكود التالى

كود:

<style type="text/css">

div.img

{

  margin: 2px;

  border: 1px solid #0000ff;

  height: auto;

  width: auto;

  float: left;

  text-align: center;

}        

div.img img

{

  display: inline;

  margin: 3px;

  border: 1px solid #ffffff;

}

div.img a:hover img {border: 1px solid #0000ff;}

div.desc

{

  text-align: center;

  font-weight: normal;

  width: 120px;

  margin: 2px;

}

</style>

هذا الكود تم اضافته فى صفحة الhtml الموجودة فى موقعك وهنا وضعنا كلاس بسيط جدا يؤثر على مجموعة من الصور وعليه يتم وضع الصور وقبلها استدعاء الكلاس ويظهر الصور كما طلبت وايضا تأثير تحريك الماوس على الصور وايضا يمكن اضافة كود او امممممممم تعليق على الصورة
انظر للكود كامل

كود:

<html>

<head>

<style type="text/css">

div.img

{

  margin: 2px;

  border: 1px solid #0000ff;

  height: auto;

  width: auto;

  float: left;

  text-align: center;

}        

div.img img

{

  display: inline;

  margin: 3px;

  border: 1px solid #ffffff;

}

div.img a:hover img {border: 1px solid #0000ff;}

div.desc

{

  text-align: center;

  font-weight: normal;

  width: 120px;

  margin: 2px;

}

</style>

</head>

<body>



<div class="img">

 <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>

 <div class="desc">Add a description of the image here</div>

</div>

<div class="img">

 <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>

 <div class="desc">Add a description of the image here</div>

</div>

<div class="img">

 <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>

 <div class="desc">Add a description of the image here</div>

</div>

<div class="img">

 <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>

 <div class="desc">Add a description of the image here</div>

</div>



</body>

</html>

انسخ الكود السابق فى اى محرر لديك واستبدل الصور اقصد بهذا مسمى الصور بصور اخرى على جهازك وايضا المسميات وستعرف ما اقصد

اسف على الاطالة
مع تحياتى