Prima dată când folosesc blocul HTML pentru un antet personalizat și nu arată bine, vă rugăm să vă ajutați!
Publicat: 2023-08-09Bună!
Lucrez cu un antet personalizat pentru acest site, deoarece instrumentele tematice ale Astra nu sunt atât de bune pe cât mi-aș dori. Încă învăț să codific pentru web dev și acest antet personalizat pe HTML este proiectul meu major de până acum.
Am lucrat cu Visual Studio Code și Google Chrome pentru a vizualiza antetul. M-am gândit că planul perfect era să introducem acel cod HTML într-un „bloc HTML” în Header Builder al personalizării temei Astra. Nu mă așteptam ca lățimea să fie limitată de bloc.
**Antetul meu doar codul HTML:**
https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5
**Antetul meu de pe site, în interiorul unui bloc HTML al generatorului de antet:**
https://preview.redd.it/9t43ltau2zgb1.jpg?width=1280&format=pjpg&auto=webp&s=81e6f66097e0a81c0caa4a4ed8019c10b0348c3d
După ce am făcut câteva cercetări, am găsit un cod CSS pentru a „rezolva” acest lucru, dar nu l-a rezolvat deloc. Îmi aduce mai multe probleme. Am folosit următorul cod:
.ast-builder-html-element
latime: 100vw;
** Și acum antetul arată astfel:**
https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e
Elementele din partea dreaptă au dispărut și blocul „CONTACTO” este mutat puțin în jos.
EDITARE: Am rezolvat problema „CONTACTO” mutată în partea de jos, a fost cauzată de etichetele <br>. Am folosit CSS pentru a le șterge, astfel încât problema a fost rezolvată!
Deci de ce?
Nu știu dacă există o problemă cu codul meu HTML sau este o problemă care vine pentru utilizarea unui bloc HTML și ar trebui să fac asta în alt mod. Sunt complet pierdut.
Aș aprecia MULT orice ajutor!!!
**Partajez codul meu HTML pentru antet:**
<html>
<cap>
<script src="https://kit.fontawesome.com/4d7716fb70.js” crossorigin="anonymous”></script>
<stil>
.cabecera-navbar-principal
preaplin: ascuns;
culoare de fundal: #fff;
familie de fonturi: Montserrat;
.cabecera-navbar-principal a
plutește la stânga;
dimensiunea fontului: 16px;
greutate font: 600;
culoare: #424242;
text-align: centru;
umplutură: 15px 15px;
text-decor: niciuna;
.cabecera-dropdown
plutește la stânga;
preaplin: ascuns;
.cabecera-dropdown .cabecera-dropbtn
chenar: niciunul;
contur: niciunul;
culoare: #424242;
umplutură: 14px 16px;
culoare de fundal: moștenire;
font: mostenire;
marja: 0;
greutate font: 600;
.cabecera-navbar-principal a:hover, .cabecera-dropdown:hover .cabecera-dropbtn
culoare: #003398;
.cabecera-dropdown-conținut
afișaj: niciunul;
poziție: absolută;
culoare de fundal: #fff;
latime: 100%;
stânga: 0;
chenar-sus: 2px solid #0080ff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
indicele z: 1;
.cabecera-dropdown:hover .cabecera-dropdown-content
afisare: bloc;
.cabecera-coloană
plutește la stânga;
latime: 19%;
padding-stânga: 10px;
culoare de fundal: #fff;
inaltime: 450px;
.cabecera-coloana a
plutire: nici unul;
culoare: #424242;
text-decor: niciuna;
afisare: bloc;
text-align: stânga;
.columnas-marcas
plutește la stânga;
latime: 100%;
padding-stânga: 20px;
umplutură-dreapta: 20px;
padding-top: 20px;
padding-bottom: 0px;
culoare de fundal: #fff;
inaltime: 450px;
înălțimea liniei: 0,1;
coloane: 4;
.columnas-marcas a
plutire: nici unul;
culoare: #424242;
text-decor: niciuna;
afisare: bloc;
text-align: stânga;
.cabecera-rând:după
conținut: „”;
afisare: tabel;
clar: ambele;
.cabecera-categoria-padre
dimensiunea fontului: 1.17em !important;
font-weight: bold !important;
margine-top: 0.3em;
chenar-jos: 1px solid #E3E3E3;
</stil>
<corp>
<div class="cabecera-navbar-principal”>
<div class="cabecera-dropdown”>
<button class="cabecera-dropbtn” onclick="window.location.href='/productos'”>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-coloană”>
<a class="cabecera-categoria-padre” href="/categoria-producto/audio”>AUDIO</a>
<a href="/categoria-producto/audio/accesorios-audio”>ACCESORII</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”>SISTEMAS DE AUDIO</a>
</div>
<div class="cabecera-coloană”>
<a class="cabecera-categoria-padre” href="/categoria-producto/electronica”>ELECTRONICA</a>
<a href="/categoria-producto/electronica/accesorios-electronica”>ACCESORII</a>
<a href="/categoria-producto/electronica/consolas”>CONSOLAS</a>
<a href="/categoria-producto/electronica/drones”>DRONES</a>
<a href="/categoria-producto/electronica/tablets”>TABLETE</a>
</div>
<div class="cabecera-coloană”>
<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”>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-coloană”>
<a class="cabecera-categoria-padre” href="/categoria-producto/linea-blanca”>LINEA BLANCA</a>
<a href="/categoria-producto/linea-blanca/cafeteras”>CAFETERAS</a>
<a href="/categoria-producto/linea-blanca/congeladores”>CONGELADORES</a>
<a href="/categoria-producto/linea-blanca/freidoras-hornos”>FREIDORAS / HORNOS</a>
<a href="/categoria-producto/linea-blanca/licuadoras”>LICUADORAS</a>
<a href="/categoria-producto/linea-blanca/parrillas”>PARRILLAS</a>
<a href="/categoria-producto/linea-blanca/procesador-alimentos-ollas”>PROCESADOR DE ALIMENTOS / OLLAS</a>
<a href="/categoria-producto/linea-blanca/tostadoras”>TOSTADORAS</a>
</div>
<div class="cabecera-coloană”>
<a class="cabecera-categoria-padre” href="/categoria-producto/video”>VIDEO</a>
<a href="/categoria-producto/video/accesorios-video”>ACCESORII</a>
<a href="/categoria-producto/video/pantallas”>PANTALLAS</a>
<a href="/categoria-producto/video/reproductores-dvd”>REPRODUCTORES DVD</a>
</div>
</div>
</div>
</div>
<div class="cabecera-dropdown”>
<button class="cabecera-dropbtn”>MARCAS <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”>ARCTIC KING</a>
<a href="/categoria-producto/marca/aroma”>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”>BEAUTYREST</a>
<a href="/categoria-producto/marca/black-n-decker”>BLACK & DECKER</a>
<a href="/categoria-producto/marca/blackweb”>BLACKWEB</a>
<a href="/categoria-producto/marca/element”>ELEMENT</a>
<a href="/categoria-producto/marca/elite”>ELITE</a>
<a href="/categoria-producto/marca/emeril-lagasse”>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”>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”>TEHNOLOGIE INOVATIVA</a>
<a href="/categoria-producto/marca/instant-vortex”>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”>MAJORITATE</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”>NINJA</a>
<a href="/categoria-producto/marca/nutribullet”>NUTRIBULLET</a>
<a href="/categoria-producto/marca/onn”>ONN</a>
<a href="/categoria-producto/marca/pelonis”>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”>SAMSUNG</a>
<a href="/categoria-producto/marca/shark”>SARK</a>
<a href="/categoria-producto/marca/sony”>SONY</a>
<a href="/categoria-producto/marca/speedy-cook”>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”>WESTINGHOUSE</a>
</div>
</div>
</div>
</div>
<a href="/ayuda”>AYUDA</a>
<a href="/contacto”>CONTACTO</a>
</div>
</corp>
</cap>
</html>
