مرحباً،https://fspm.discourse.group
كما ترى في الأسفل، تمكنت من إضافتها، ومع ذلك أود:
إضافة رابط لكل شعار
التباعد بينها
الحفاظ على النسبة الأصلية لشعار جوتنجن التي تم تعديلها لبعض الأسباب
لقد كتبت هذا في التذييل:
<div class="custom-footer-image">
<img src="upload://3lfj0glW4Qjc2cMHAC7dBVglghP.png" alt="Footer Image">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
</div>
وهذا في CSS:
.custom-footer-image {
display: flex;
justify-content: center;
img {
max-width: 30%;
}
}
جرب هذا الـ CSS:
.custom-footer-image {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
img {
max-width: 30%;
height: 100%;
}
}
يمكنك إضافة رابط بالقيام بذلك: <a><img ... /></a>
إعجابَين (2)
الحيلة في CSS تعمل، شكرًا لك!
لقد جربت ما يلي في التذييل ولكنه لا يعمل.. (أنا أختبر على الشعار الثالث)
<div>
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
<a href="http://algorithmicbotany.org/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image"></a>
</div>
إعجاب واحد (1)
Lilly
6 يونيو 2023، 3:41م
4
hmmm ربما جرب https:// بدلاً من http://؟ ولكن هذا يبدو وكأنه يجب أن يعمل
إنه صحيح، ولكن قد تحتاج أيضًا إلى ضبط CSS:
.custom-footer-image {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
a {
max-width: 30%;
height: 100%;
}
}
تأكد من استخدام https كما ذكرت ليلي وتغيير الرابطين الأولين:
<div class="custom-footer-image">
<a href="https://" target="_blank">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
</a>
<a href="https://" target="_blank">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
</a>
<a href="https://algorithmicbotany.org/" target="_blank">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
</a>
</div>
إعجاب واحد (1)
لقد أدرجت ما يلي والآن اختفت الشعارات أيضًا:
<div class="custom-footer-image">
<a href="https://www.wur.nl/en.htm" target="_blank">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
</a>
<a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
</a>
<a href="https://algorithmicbotany.org/" target="_blank">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
</a>
</div>
.custom-footer-image {
display: flex;
justify-content: center;
align-content: center;
gap: 1rem;
a {
max-width: 30%;
height: 100%;
}
}
إعجاب واحد (1)
Lilly
6 يونيو 2023، 5:20م
7
لماذا لديك مسافات وشرطات مائلة في نهاية علامات صور HTML الخاصة بك؟
هل تقصد في نهاية كل صف حيث يتم استدعاء الشعارات؟ أنا لا أعرف حقًا - لقد نسخت فقط بعض التعليمات البرمجية من الآخرين
الكود الخاص بك صحيح.
جرب استخدام CSS هذا بدلاً من ذلك:
.custom-footer-image {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
a {
width: max(20vw, 220px);
img {
width: 100%;
}
}
}
إعجاب واحد (1)
Lilly
6 يونيو 2023، 7:05م
10
هذا الكود نجح معي وقد اختبرته للتو.
.custom-footer-image {
display: flex;
justify-content: center;
align-content: center;
gap: 2rem;
img {
max-width: 20%;
height: 100%;
}
}
<div class="custom-footer-image">
<a href="https://www.wur.nl/en.htm" target="_blank">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
</a>
<a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
</a>
<a href="https://algorithmicbotany.org/" target="_blank">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
</a>
</div>
ولكن ستحتاج إلى معرفة جزء تغيير حجم الصورة.
لست متأكدًا مما إذا كان ذلك بسبب استخدامك لسمة مختلفة، ولكن تنسيق CSS للصورة لا يبدو جيدًا بالنسبة لي.
ما أراه
إعجاب واحد (1)
Lilly
6 يونيو 2023، 7:26م
12
بصراحة، لا يبدو الكثير منها جيدًا بالنسبة لي
يجب أن تكون هناك طريقة أفضل للقيام بذلك…
إعجاب واحد (1)
Lilly
6 يونيو 2023، 7:36م
13
فضولي لمعرفة سبب اختيارك لهذا المسار بدلاً من وضع الـ HTML ببساطة في قسم التذييل الخاص بالقالب؟
لقد وضعت هذا في قسم Footer لقالب فارغ وعمل بشكل جيد.
تعديل CSS/HTML التذييل:
<center>
<a href="https://www.wur.nl/en.htm" target="_blank">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" width=300>
</a>
<a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" width=300>
</a>
<a href="https://algorithmicbotany.org/" target="_blank">
<img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" width=300>
</a>
</center>
عذرًا، لكن لا شيء يعمل معي… أعتقد أن حلولك تعمل، لذا أفترض أنني أفعل شيئًا خاطئًا.
لقد حاولت أيضًا تعديل قسم تذييل السمة بناءً على نصيحة @Lilly ولكنه لم ينجح معي أيضًا…
إعجاب واحد (1)
Lilly
7 يونيو 2023، 2:33م
15
هل المنتدى الخاص بك هو الرابط الموجود في ملفك الشخصي؟ أريد إلقاء نظرة.
إعجاب واحد (1)
Lilly
7 يونيو 2023، 3:50م
17
حسنًا، لقد ألقيت نظرة وتمكنت من جعل الروابط تعمل في أدوات المطور. ولكن عندما طبقت الكود، فإنه يغير أبعاد الصورة لسبب ما. ولكن إذا استخدمت الكود الذي أعطيتك إياه في منشوري الأخير ووضعته في كود التذييل الخاص بك، فيجب أن يعمل. أود إزالة كود CSS هذا، بما في ذلك فئة div. بمجرد إزالة عناصر CSS، ما عليك سوى نسخ ولصق الكود الذي أعطيتك إياه في قسم التذييل في قسم تحرير CSS/HTML.
انتقل إلى مكون السمة الخاص بك (أو يفضل إنشاء واحد جديد كما فعلت):
الصق هذا الكود بالضبط في أقسام علامات التبويب CSS والتذييل كما يلي:
علامة تبويب CSS:
.footer_align {
display: flex;
justify-content: center;
}
علامة تبويب التذييل:
كانت هذه هي النتيجة على منتداي. لقد تحققّت بشكل مستقل من أن كل صورة ترتبط بعنوان URL الصحيح أيضًا:
إذا كنت ترغب في تصغيرها، فما عليك سوى تعديل width=“300” لكل صورة إلى شيء أصغر. إذا كنت ترغب في تباعدها، يمكنك استخدام مسافة HTML غير قابلة للكسر بين كود صورة الرابط.
Canapin
7 يونيو 2023، 4:03م
18
Lillian Louis:
`
`
أقترح تجنب علامات HTML المهملة واستبدالها بـ <div> مع خاصية text-align: center;.
إعجاب واحد (1)
Lilly
7 يونيو 2023، 4:31م
19
نعم، كنت أحاول فقط جعله سهلاً قدر الإمكان بدون أي CSS ليعمل على موقعه. أتفق مع ذلك وقمت بتحديث مشاركتي. شكراً لك.
حسناً، لقد حاولت ولكن أعتقد أن هناك مشكلة في التحجيم إلى الحجم المناسب.
