المرة الأولى التي تستخدم فيها كتلة HTML لرأس مخصص ولا تبدو جيدة، الرجاء المساعدة!
نشرت: 2023-08-09أهلاً!
أنا أعمل مع رأس مخصص لهذا الموقع لأن أدوات السمات الخاصة بـ Astra ليست جيدة كما أريد. ما زلت أتعلم البرمجة لتطوير الويب وهذا الرأس المخصص في HTML هو مشروعي الرئيسي حتى الآن.
لقد عملت مع Visual Studio Code وGoogle Chrome لتصور الرأس. اعتقدت أن الخطة المثالية هي إدخال كود HTML هذا في "كتلة HTML" في تخصيص سمة Header Builder of Astra. لم أكن أتوقع أن يكون العرض محدودًا بالكتلة.
**رأسي هو رمز HTML فقط:**
https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5
**رأسي على موقع الويب داخل كتلة HTML لمنشئ الرأس:**
https://preview.redd.it/9t43ltau2zgb1.jpg?width=1280&format=pjpg&auto=webp&s=81e6f66097e0a81c0caa4a4ed8019c10b0348c3d
بعد إجراء بعض الأبحاث وجدت بعض تعليمات برمجية CSS "لحل" هذه المشكلة ولكنها لم تحلها على الإطلاق. يجلب لي المزيد من المشاكل. لقد استخدمت الكود التالي:
.ast-builder-html-element
العرض: 100 فولت واط؛
**والآن يبدو العنوان هكذا:**
https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e
اختفت العناصر الموجودة على الجانب الأيمن وتم نقل كتلة "CONTACTO" قليلاً إلى الأسفل.
تحرير: لقد قمت بحل مشكلة "CONTACTO" التي تم نقلها إلى المشكلة السفلية، وكان سببها علامات <br>. لقد استخدمت CSS لحذفها، لذلك تم حل هذه المشكلة!
اذا لماذا؟
لا أعرف ما إذا كانت هناك مشكلة في كود HTML الخاص بي أم أن هناك مشكلة تتعلق باستخدام كتلة HTML ويجب أن أفعل ذلك بطريقة أخرى. أنا ضائعة تماما.
وسأكون ممتنا كثيرا لأي مساعدة!
**أشارك كود HTML الخاص بي للرأس:**
<أتش تي أم أل>
<الرأس>
<script src=”https://kit.fontawesome.com/4d7716fb70.js” crossorigin=”anonymous”></script>
<نمط>
.cabecera-navbar-principal
إخفاء الفائض؛
لون الخلفية: #fff؛
عائلة الخط: مونتسيرات؛
.cabecera-navbar-principal أ
تعويم: اليسار؛
حجم الخط: 16 بكسل؛
وزن الخط: 600؛
اللون: #424242؛
محاذاة النص: مركز؛
الحشو: 15 بكسل 15 بكسل؛
زخرفة النص: لا شيء؛
.cabecera-المنسدلة
تعويم: اليسار؛
إخفاء الفائض؛
.cabecera-المنسدلة .cabecera-dropbtn
الحدود: لا شيء؛
الخطوط العريضة: لا شيء؛
اللون: #424242؛
الحشو: 14 بكسل 16 بكسل؛
لون الخلفية: وراثة؛
الخط: يرث؛
الهامش: 0;
وزن الخط: 600؛
.cabecera-navbar-principal a:hover، .cabecera-dropdown:hover .cabecera-dropbtn
اللون: #003398؛
.cabecera-المنسدلة-المحتوى
عرض لا شيء؛
الموقف: مطلق؛
لون الخلفية: #fff؛
العرض: 100%؛
اليسار: 0؛
الحد العلوي: 2 بكسل صلب #0080ff؛
صندوق الظل: 0px 8px 16px 0px rgba(0,0,0,0.2);
مؤشر z: 1؛
.cabecera-المنسدلة: تحوم .cabecera-المنسدلة-المحتوى
العرض محجوب؛
.cabecera-العمود
تعويم: اليسار؛
العرض: 19%;
المساحة المتروكة لليسار: 10 بكسل؛
لون الخلفية: #fff؛
الارتفاع: 450 بكسل؛
.cabecera-العمود أ
تعويم: لا شيء؛
اللون: #424242؛
زخرفة النص: لا شيء؛
العرض محجوب؛
محاذاة النص: يسار؛
.columnas-marcas
تعويم: اليسار؛
العرض: 100%؛
المساحة المتروكة لليسار: 20 بكسل؛
الحشو على اليمين: 20 بكسل؛
الحشو العلوي: 20 بكسل؛
الحشو السفلي: 0px؛
لون الخلفية: #fff؛
الارتفاع: 450 بكسل؛
ارتفاع الخط: 0.1؛
الأعمدة: 4؛
.columnas-marcas أ
تعويم: لا شيء؛
اللون: #424242؛
زخرفة النص: لا شيء؛
العرض محجوب؛
محاذاة النص: يسار؛
.cabecera-الصف:بعد
محتوى: ""؛
جدول العرض؛
واضحة على حد سواء؛
.cabecera-فئة-بادر
حجم الخط: 1.17em !مهم;
وزن الخط: غامق ! مهم؛
الهامش العلوي: 0.3em؛
الحد السفلي: 1 بكسل صلب #E3E3E3؛
</نمط>
<الجسم>
<div class=”cabecera-navbar-principal”>
<div class=”cabecera-dropdown”>
<button class=”cabecera-dropbtn” onclick=”window.location.href='/productos'”>المنتجات <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242; "></i></button>
<div class=”cabecera-dropdown-content”>
<div class=”cabecera-row”>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/audio”>الصوت</a>
<a href=”/categoria-producto/audio/accesorios-audio”>الملحقات</a>
<a href=”/categoria-producto/audio/audifonos”>AUDIFONOS</a>
<a href=”/categoria-producto/audio/barras-de-sonido”>BARRAS DE SONIDO</a>
<a href=”/categoria-producto/audio/bocinas”>BOCINAS</a>
<a href=”/categoria-producto/audio/sistemas-de-audio”>أنظمة الصوت</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/electronica”>ELECTRONICA</a>
<a href=”/categoria-producto/electronica/accesorios-electronica”>الملحقات</a>
<a href=”/categoria-producto/electronica/consolas”>CONSOLAS</a>
<a href=”/categoria-producto/electronica/drones”>الطائرات بدون طيار</a>
<a href=”/categoria-producto/electronica/tablets”>الأجهزة اللوحية</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/hogar”>HOGAR</a>
<a href=”/categoria-producto/hogar/calentadores”>CALENTADORES</a>
<a href=”/categoria-producto/hogar/colchones”>الكولشونات</a>
<a href=”/categoria-producto/hogar/planchas-vapor-aspiradoras”>PLANCHAS DE VAPOR / ASPIRADORAS</a>
<a href=”/categoria-producto/hogar/ventiladores”>VENTILADORES</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/linea-blanca”>لينيا بلانكا</a>
<a href=”/categoria-producto/linea-blanca/cafeteras”>المقاهي</a>
<a href=”/categoria-producto/linea-blanca/congeladores”>الكونجيلادوريس</a>
<a href=”/categoria-producto/linea-blanca/freidoras-hornos”>فريدوراس / هورنوس</a>
<a href=”/categoria-producto/linea-blanca/licuadoras”>ليكوادوراس</a>
<a href=”/categoria-producto/linea-blanca/parrillas”>المظلات</a>
<a href=”/categoria-producto/linea-blanca/procesador-alimentos-ollas”>معالج الأغذية / OLLAS</a>
<a href=”/categoria-producto/linea-blanca/tostadoras”>توستادوراس</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/video”>فيديو</a>
<a href=”/categoria-producto/video/accesorios-video”>الملحقات</a>
<a href=”/categoria-producto/video/pantallas”>PANTALLAS</a>
<a href=”/categoria-producto/video/reproductores-dvd”>منتجات DVD</a>
</div>
</div>
</div>
</div>
<div class=”cabecera-dropdown”>
<button class=”cabecera-dropbtn”>ماركاس <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242;”></i></button>
<div class=”cabecera-dropdown-content”>
<div class=”cabecera-row”>
<div class=”columnas-marcas”>
<a href=”/categoria-producto/marca/aiwa”>AIWA</a>
<a href=”/categoria-producto/marca/altec-lansing”>ALTEC LANSING</a>
<a href=”/categoria-producto/marca/alux”>ALUX</a>
<a href=”/categoria-producto/marca/arctic-king”>ملك القطب الشمالي</a>
<a href=”/categoria-producto/marca/aroma”>رائحة</a>
<a href=”/categoria-producto/marca/atvio”>ATVIO</a>
<a href=”/categoria-producto/marca/backyard-grill”>BACKYARD GRILL</a>
<a href=”/categoria-producto/marca/beautyrest”>بيوتي ريست</a>
<a href=”/categoria-producto/marca/black-n-decker”>بلاك اند ديكر</a>
<a href=”/categoria-producto/marca/blackweb”>BLACKWEB</a>
<a href=”/categoria-producto/marca/element”>ELEMENT</a>
<a href=”/categoria-producto/marca/elite”>النخبة</a>
<a href=”/categoria-producto/marca/emeril-lagasse”>إيميريل لاجاسي</a>
<a href=”/categoria-producto/marca/farberware”>FARBERWARE</a>
<a href=”/categoria-producto/marca/ge”>GE</a>
<a href=”/categoria-producto/marca/generico”>GENERICO</a>
<a href=”/categoria-producto/marca/hamilton-beach”>شاطئ هاميلتون</a>
<a href=”/categoria-producto/marca/hisense”>HISENSE</a>
<a href=”/categoria-producto/marca/hunterspider”>HUNTERSPIDER</a>
<a href=”/categoria-producto/marca/innovative-technology”>التكنولوجيا المبتكرة</a>
<a href=”/categoria-producto/marca/instant-vortex”>الدوامة الفورية</a>
<a href=”/categoria-producto/marca/jungletac”>JUNGLETAC</a>
<a href=”/categoria-producto/marca/kvision”>K-VISION</a>
<a href=”/categoria-producto/marca/kempler-n-strauss”>KEMPLER & STRAUSS</a>
<a href=”/categoria-producto/marca/lg”>LG</a>
<a href=”/categoria-producto/marca/majority”>الأغلبية</a>
<a href=”/categoria-producto/marca/maximatic”>MAXIMATIC</a>
<a href=”/categoria-producto/marca/microsoft”>MICROSOFT</a>
<a href=”/categoria-producto/marca/momentum”>MOMENTUM</a>
<a href=”/categoria-producto/marca/ninja”>نينجا</a>
<a href=”/categoria-producto/marca/nutribullet”>NUTRIBULLET</a>
<a href=”/categoria-producto/marca/onn”>ONN</a>
<a href=”/categoria-producto/marca/pelonis”>بيلونيس</a>
<a href=”/categoria-producto/marca/powerxl”>POWERXL</a>
<a href=”/categoria-producto/marca/rca”>RCA</a>
<a href=”/categoria-producto/marca/ridgeway”>RIDGEWAY</a>
<a href=”/categoria-producto/marca/rival”>RIVAL</a>
<a href=”/categoria-producto/marca/samsung”>سامسونج</a>
<a href=”/categoria-producto/marca/shark”>القرش</a>
<a href=”/categoria-producto/marca/sony”>سوني</a>
<a href=”/categoria-producto/marca/speedy-cook”>الطهي السريع</a>
<a href=”/categoria-producto/marca/steelpro”>STEELPRO</a>
<a href=”/categoria-producto/marca/tcl”>TCL</a>
<a href=”/categoria-producto/marca/venturer”>VENTURER</a>
<a href=”/categoria-producto/marca/vissani”>VISSANI</a>
<a href=”/categoria-producto/marca/vivitar”>VIVITAR</a>
<a href=”/categoria-producto/marca/vizio”>VIZIO</a>
<a href=”/categoria-producto/marca/westinghouse”>وستنجهاوس</a>
</div>
</div>
</div>
</div>
<a href=”/ayuda”>أيودا</a>
<a href=”/contacto”>الاتصال</a>
</div>
</الجسم>
</الرأس>
</html>
