الرئيسية      عني      أعمالي      السيرة      صوري      اتصل بي

مقتطفة تصميم ويب: الصور بجانب النصوص

عندما تريد إضافة صورة بجانب نص نحتاج إلى معالجتها من ناحية HTML و CSS على حسب احتياجك

هناك طريقة معروفة ودائماً تستخدم وهي صورة في منتصف الصفحة ومن ثم بعدها فقرة نصية كالتالي:

هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال.

وهذه الطريقة تتم بكتابة كود HTML التالي:
<p><img src="uploads/2013/10/float-image.png" alt="صورة توضيحية" class="aligncenter" /></p>
<p>هنا نص مثال هنا نص مثال هنا نص مثال.</p>

وكود CSS كالتالي:
.aligncenter {
border: 1px solid #e1e1e1;
padding: 6px;
display:block;
margin:0 auto;
}

 هناك طرق أخرى جميلة فمثلاً لو احتجنا صورة تطفو على يمين النص كالتالي:

صورة توضيحيةهنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال.

يكون الكود النصي في HTML كالتالي:
<p>
<img src="uploads/2013/10/float-image.png" class="alginright" alt="صورة توضيحية" />
هنا نص مثال هنا نص مثال هنا نص مثال.
</p>

والكود النصي في CSS كالتالي:
.alignright {
float: right;
margin: 10px 0px 10px 23px;
border: 1px solid #e1e1e1;
padding: 6px;
}

 لو احتجنا ان تكون الصورة تطفو على يسار النص كالتالي:

صورة توضيحيةهنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال هنا نص مثال.

فيكون الكود النصي في HTML نفس السابق بالضبط إلا اننا نغير من alignright إلى alignleft:
<p>
<img src="uploads/2013/10/float-image.png" class="alginleft" alt="صورة توضيحية" />
هنا نص مثال هنا نص مثال هنا نص مثال.
</p>

وننشأ alignleft شبيه ب alignright بتعديل بسيط من ناحية المسافة الخارجية اليمنى وإضافة float اي الطفو left أي إلى اليسار كالتالي:
.alignleft {
float: left;
margin: 10px 23px 10px 0px;
border: 1px solid #e1e1e1;
padding: 6px;
}

 وهناك أمر آخر وهو ما يخص الأيقونة الصغيرة والنص المجانب للأيقونة ومثاله كالتالي:

  تاريخ النشر 27 أكتوبر, 2013      مرات المشاهدة 4

لعمل ايقونة بجانب النص بطريقة سليمة تكون بداية بكتابة الكود HTML النصي التالي:
<p>
<img src="http://althari.net/personal/wp-content/uploads/2013/10/date.png" alt="" class="iconalign"> تاريخ النشر 27 أكتوبر, 2013 <img src="http://althari.net/personal/wp-content/uploads/2013/10/view.png" alt=""  class="iconalign"> مرات المشاهدة 4
</p>

ثم بكتابة كود CSS النصي التالي:
.iconalign {
vertical-align: middle;
}

فقط لا غير طبعاً لو كتبنا اكواد HTML بدون CSS مناسب كما سبق وبينا فلن تظهر الصور بطريقة تناسب احتياجك.

ويمكن الاستفادة من تعلم أساسيات HTML و CSS من كتابي المنشور آنفا.

هذا وصلى الله وسلم على نبينا محمد.

  تاريخ النشر   27/10/2013    
  مرات المشاهدة   2٬577

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *