زر تحميل

Abdo Mohamed YT · 15 أبريل

السلام عليكم

عندي مشكله دلوقتي عايز اخلي الصوره في النص مش نازله تحت كده اعمل اي

دا كود الزر

<div class="acc-tool1">
<div class="acc-item">
<div onclick="window.open('https://youtube.com/@khatar_official');">
<div class="acc-title">
&nbsp;
<i class="fab fa-download" style=" color: white; font-size: 18px; font-weight: 400;"></i>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
اشترك في قناتي علي اليوتيوب
<div class="author-img2 radius100px"><img border="0" data-original-height="1949" data-original-width="3464" height="180" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" width="320" /></div>
 
</div></div></div></div>

ياسر مسكين · 15 أبريل

يمكنك إضافة الأمر "vertical-align: middle;" إلى الصورة لتوسيطها داخل العنصر من خلال إضافة الخاصية مباشرة إلى الصورة في علامة الصورة بهذا الشكل:

<img border="0" data-original-height="1949" data-original-width="3464" height="180" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" width="320" style="vertical-align: middle;" />

قم بتجربته وأخبرني بالنتيجة.

Abdo Mohamed YT · 15 أبريل

بتاريخ 10 دقائق مضت قال ياسر مسكين:
يمكنك إضافة الأمر "vertical-align: middle;" إلى الصورة لتوسيطها داخل العنصر من خلال إضافة الخاصية مباشرة إلى الصورة في علامة الصورة بهذا الشكل:
<img border="0" data-original-height="1949" data-original-width="3464" height="180" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" width="320" style="vertical-align: middle;" />
قم بتجربته وأخبرني بالنتيجة.

للاسف لسه الصوره تحت

بتاريخ 10 دقائق مضت قال ياسر مسكين:
يمكنك إضافة الأمر "vertical-align: middle;" إلى الصورة لتوسيطها داخل العنصر من خلال إضافة الخاصية مباشرة إلى الصورة في علامة الصورة بهذا الشكل:
<img border="0" data-original-height="1949" data-original-width="3464" height="180" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" width="320" style="vertical-align: middle;" />
قم بتجربته وأخبرني بالنتيجة.

دا كود الصوره بس في المظهر

.author-img2{float: left;width:30px;height:30px;overflow:hidden}

تم التعديل في 15 أبريل بواسطة Abdo Mohamed YT

ياسر مسكين · 15 أبريل

بتاريخ 7 دقائق مضت قال Abdo Mohamed YT:

للاسف لسه الصوره تحت

من فضلك قم بإرفاق ملف ال css الذي استخدمته في هذه الشيفرة، لأساعدك بشكل أفضل.

Hikmat Jaafer · 15 أبريل

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

يجب عليك وضع كلاس acc-title كالتالي :

.acc-title {
            display: flex;
            align-items: center;
            justify-content: center;
        }

ليتم وضع جميع العناصر بداخله على سوية واحدة , مثلاً ممكن أن يكون الكود كاملاً كالتالي ( يمكنك إرفاق كامل الكود مع styles الخاصة به للتوضيح أكثر ) :

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
        .acc-tool1 {
            background-color: red;
            text-align: center;
        }

        .acc-title {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .author-img2 {
            margin-right: 10px;
            border-radius: 100px;
        }

        .acc-title i {
            margin-left: 10px;
            padding: 40px
        }
    </style>
</head>

<body>
    <div class="acc-tool1">
        <div class="acc-item">
            <div onclick="window.open('https://youtube.com/@khatar_official');">
                <div class="acc-title">
                    <div class="author-img2 radius100px"><img height="40" width="40"
                            src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" />
                    </div>
                    اشترك في قناتي علي اليوتيوب
                    <i class="fab fa-download" style="color: white; font-size: 18px; font-weight: 400;"></i>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Abdo Mohamed YT · 15 أبريل

بتاريخ 1 دقيقة مضت قال ياسر مسكين:

من فضلك قم بإرفاق ملف ال css الذي استخدمته في هذه الشيفرة، لأساعدك بشكل أفضل.

خلاص شكرا يا بشمهندس ياسر تم حل المشكله اشكرك جدا علي مساعدت حضرتك بس هو ممكن ابعتلك الكود وانت تختصره لان الكود كبير جدا علي المطلوب

ياسر مسكين · 15 أبريل

بتاريخ الآن قال Abdo Mohamed YT:

خلاص شكرا يا بشمهندس ياسر تم حل المشكله اشكرك جدا علي مساعدت حضرتك بس هو ممكن ابعتلك الكود وانت تختصره لان الكود كبير جدا علي المطلوب

جيد جدا، أتمنى إرفاق الملف وسأرى ما يمكن فعله، يمكنك إرفاق مشروعك المصدري أيضا إن أردت.

Abdo Mohamed YT · 15 أبريل

بتاريخ 1 دقيقة مضت قال ياسر مسكين:

جيد جدا، أتمنى إرفاق الملف وسأرى ما يمكن فعله، يمكنك إرفاق مشروعك المصدري أيضا إن أردت.

اريد عمل مثل هذا الموقع https://linktr.ee/khatar.official ولكن خاص بي

وهذه الموقع هو تصميمي https://khatar-4.blogspot.com/2024/04/blog-post_15.html?khatar1

دا كود الازرار

<div style="text-align: center;" >
  
  
  
  
  
  <div class="do1"></div>

<div style="text-align: center;">
<div class="topic-author">
  <div class="social-buttons">
<div class="author-img radius100px"><img border="0" data-original-height="1949" data-original-width="3464" height="180" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" width="320" /></div></div></div></div>
  
 <div class="do2"></div>
  
<div style="text-align: center;"><span style="font-size: x-large;"><b>خطر - khatar</b></span></div>

 <div class="do3"></div>


  
  

<div class="acc-tool1">
<div class="acc-item">
<div onclick="window.open('https://youtube.com/@khatar_official');">
<div class="acc-title">
&nbsp;
<i class="fab fa-download" style=" color: white; font-size: 18px; font-weight: 400;"></i>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
اشترك في قناتي علي اليوتيوب
</div></div></div></div>
  
<div class="acc-tool1">
<div class="acc-item">
<div onclick="window.open('https://youtube.com/@khatar_official');">
<div class="acc-title">
&nbsp;
<i class="fab fa-download" style=" color: white; font-size: 18px; font-weight: 400;"></i>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
اشترك في قناتي علي اليوتيوب
</div></div></div></div>
  
 <div class="acc-tool1">
<div class="acc-item">
<div onclick="window.open('https://youtube.com/@khatar_official');">
<div class="acc-title">
&nbsp;
<i class="fab fa-download" style=" color: white; font-size: 18px; font-weight: 400;"></i>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
اشترك في قناتي علي اليوتيوب
</div></div></div></div>

<div class="acc-tool1">
<div class="acc-item">
<div onclick="window.open('https://youtube.com/@khatar_official');">
<div class="acc-title">
&nbsp;
<i class="fab fa-download" style=" color: white; font-size: 18px; font-weight: 400;"></i>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
اشترك في قناتي علي اليوتيوب
</div></div></div></div>

<div class="acc-tool1">
<div class="acc-item">
<div onclick="window.open('https://youtube.com/@khatar_official');">
<div class="acc-title">
&nbsp;
<i class="fab fa-download" style=" color: white; font-size: 18px; font-weight: 400;"></i>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
اشترك في قناتي علي اليوتيوب
<div class="author-img2 radius100px"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" /></div>
 
</div></div></div></div>



  
  


</div>

ودا كود css

.acc-tool1{display: flex;flex-direction: column;width: 100%;text-align: right;direction: rtl; margin-top:5px; margin-bottom:10px;border-radius: 20px;overflow: hidden;box-shadow: 0 1px 5px #000000;border: solid 2px #000000;background-color: #ff0000;}
.acc-item{display: flex;flex-direction: column;width: 100%;border-bottom: solid 1px #000000;}



.acc-tool2{display: flex;flex-direction: column;width: 100%;text-align: right;direction: rtl; margin-bottom:10px;border-radius: 20px;overflow: hidden;box-shadow: 0 1px 5px #000000;border: solid 2px #000000;background-color: #800180;}
.acc-item{display: flex;flex-direction: column;width: 100%;border-bottom: solid 1px #000000;}



.acc-tool3{display: flex;flex-direction: column;width: 100%;text-align: right;direction: rtl; margin-bottom:10px;border-radius: 20px;overflow: hidden;box-shadow: 0 1px 5px #000000;border: solid 2px #000000;background-color: #2E7D32;}
.acc-item{display: flex;flex-direction: column;width: 100%;border-bottom: solid 1px #000000;}



.acc-item:last-child{border: 0;}
.acc-item .acc-title{display: block;justify-content: space-between;align-items: center;padding: 10px;font-weight: bolder;cursor: pointer;color: #fff;line-height: 30px;}



.author-img2{float: left;width:30px;height:30px;overflow:hidden}

بتاريخ 11 دقائق مضت قال Hikmat Jaafer:

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

يجب عليك وضع كلاس acc-title كالتالي :

.acc-title {
            display: flex;
            align-items: center;
            justify-content: center;
        }

ليتم وضع جميع العناصر بداخله على سوية واحدة , مثلاً ممكن أن يكون الكود كاملاً كالتالي ( يمكنك إرفاق كامل الكود مع styles الخاصة به للتوضيح أكثر ) :

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
        .acc-tool1 {
            background-color: red;
            text-align: center;
        }

        .acc-title {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .author-img2 {
            margin-right: 10px;
            border-radius: 100px;
        }

        .acc-title i {
            margin-left: 10px;
            padding: 40px
        }
    </style>
</head>

<body>
    <div class="acc-tool1">
        <div class="acc-item">
            <div onclick="window.open('https://youtube.com/@khatar_official');">
                <div class="acc-title">
                    <div class="author-img2 radius100px"><img height="40" width="40"
                            src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" />
                    </div>
                    اشترك في قناتي علي اليوتيوب
                    <i class="fab fa-download" style="color: white; font-size: 18px; font-weight: 400;"></i>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

شكرا ليك يا بشمهندس ❤️❤️

زر تحميل

السؤال

Abdo Mohamed YT

رابط هذا التعليق

شارك على الشبكات الإجتماعية

7 أجوبة على هذا السؤال

Recommended Posts

ياسر مسكين

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Abdo Mohamed YT

رابط هذا التعليق

شارك على الشبكات الإجتماعية

ياسر مسكين

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Hikmat Jaafer

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Abdo Mohamed YT

رابط هذا التعليق

شارك على الشبكات الإجتماعية

ياسر مسكين

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Abdo Mohamed YT

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية