È la prima volta che utilizzo il blocco HTML per un'intestazione personalizzata e non sembra buono, aiuto per favore!
Pubblicato: 2023-08-09CIAO!
Sto lavorando con un'intestazione personalizzata per questo sito perché gli strumenti tematici di Astra non sono buoni come vorrei. Sto ancora imparando a programmare per lo sviluppo web e questa intestazione personalizzata su HTML è finora il mio progetto principale.
Ho lavorato con Visual Studio Code e Google Chrome per visualizzare l'intestazione. Ho pensato che il piano perfetto fosse inserire quel codice HTML in un "blocco HTML" nell'Header Builder della personalizzazione del tema di Astra. Non mi aspettavo che la larghezza sarebbe stata limitata dal blocco.
**La mia intestazione contiene solo il codice HTML:**
https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5
**La mia intestazione sul sito web all'interno di un blocco HTML del generatore di intestazioni:**
https://preview.redd.it/9t43ltau2zgb1.jpg?width=1280&format=pjpg&auto=webp&s=81e6f66097e0a81c0caa4a4ed8019c10b0348c3d
Dopo aver fatto qualche ricerca ho trovato del codice CSS per "risolvere" questo problema, ma non è stato risolto affatto. Mi porta più problemi. Ho usato il codice successivo:
.ast-builder-elemento-html
larghezza: 100 vw;
**E ora l'intestazione appare così:**
https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e
Gli elementi sul lato destro sono scomparsi e il blocco “CONTACTO” è stato spostato leggermente in basso.
EDIT: ho risolto il problema del "CONTACTO" spostato in basso, era causato dai tag <br>. Ho usato CSS per eliminarli, quindi il problema è risolto!
Quindi... PERCHÉ?
Non so se c'è un problema con il mio codice HTML o è un problema che deriva dall'utilizzo di un blocco HTML e dovrei farlo in un altro modo. Sono completamente perso.
Apprezzerei MOLTO qualsiasi aiuto!!!
**Condivido il mio codice HTML per l'intestazione:**
<html>
<testa>
<script src=”https://kit.fontawesome.com/4d7716fb70.js” crossorigin=”anonymous”></script>
<stile>
.cabecera-navbar-principal
overflow: nascosto;
colore di sfondo: #fff;
famiglia di caratteri: Montserrat;
.cabecera-navbar-principal a
galleggiante: sinistra;
dimensione carattere: 16px;
peso carattere: 600;
colore: #424242;
allineamento testo: centro;
imbottitura: 15px 15px;
decorazione del testo: nessuna;
.cabecera-dropdown
galleggiante: sinistra;
overflow: nascosto;
.cabecera-dropdown .cabecera-dropbtn
bordo: nessuno;
contorno: nessuno;
colore: #424242;
imbottitura: 14px 16px;
colore di sfondo: eredita;
carattere: eredita;
margine: 0;
peso carattere: 600;
.cabecera-navbar-principal a:hover, .cabecera-dropdown:hover .cabecera-dropbtn
colore: #003398;
.cabecera-dropdown-content
visualizzazione: nessuno;
posizione: assoluta;
colore di sfondo: #fff;
larghezza: 100%;
a sinistra: 0;
bordo superiore: 2px solido #0080ff;
box-ombra: 0px 8px 16px 0px rgba(0,0,0,0.2);
indice z: 1;
.cabecera-dropdown: passa il mouse su .cabecera-dropdown-content
blocco di visualizzazione;
.cabecera-colonna
galleggiante: sinistra;
larghezza: 19%;
imbottitura a sinistra: 10px;
colore di sfondo: #fff;
altezza: 450px;
.cabecera-colonna a
galleggiante: nessuno;
colore: #424242;
decorazione del testo: nessuna;
blocco di visualizzazione;
allineamento testo: sinistra;
.colonne-marcas
galleggiante: sinistra;
larghezza: 100%;
imbottitura a sinistra: 20px;
imbottitura destra: 20px;
parte superiore imbottita: 20px;
fondo imbottito: 0px;
colore di sfondo: #fff;
altezza: 450px;
altezza della linea: 0,1;
colonne: 4;
.columnas-marcas a
galleggiante: nessuno;
colore: #424242;
decorazione del testo: nessuna;
blocco di visualizzazione;
allineamento testo: sinistra;
.cabecera-fila:dopo
contenuto: "";
visualizzazione: tavolo;
chiaro: entrambi;
.cabecera-categoria-padre
dimensione carattere: 1,17 em !importante;
font-weight: grassetto!importante;
margine superiore: 0,3 em;
bordo inferiore: 1px solido #E3E3E3;
</stile>
<corpo>
<div class="cabecera-navbar-principal">
<div class="cabecera-dropdown">
<button class=”cabecera-dropbtn” onclick=”window.location.href='/productos'”>PRODOTTI <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242; "></i></pulsante>
<div class="cabecera-dropdown-content">
<div class="cabecera-row">
<div class="cabecera-colonna">
<a class=”cabecera-categoria-padre” href=”/categoria-prodotto/audio”>AUDIO</a>
<a href="/categoria-producto/audio/accessori-audio">ACCESSORI</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-audio">SISTEMI AUDIO</a>
</div>
<div class="cabecera-colonna">
<a class=”cabecera-categoria-padre” href=”/categoria-producto/elettronica”>ELETTRONICA</a>
<a href="/categoria-producto/elettronica/accessori-elettronica">ACCESSORI</a>
<a href="/categoria-producto/elettronica/consolas">CONSOLAS</a>
<a href="/categoria-producto/elettronica/drones">DRONI</a>
<a href="/categoria-producto/elettronica/tablets">TABLETS</a>
</div>
<div class="cabecera-colonna">
<a class=”cabecera-categoria-padre” href=”/categoria-prodotto/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-colonna">
<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-colonna">
<a class=”cabecera-categoria-padre” href=”/categoria-prodotto/video”>VIDEO</a>
<a href="/categoria-producto/video/accessori-video">ACCESSORI</a>
<a href="/categoria-producto/video/pantallas">PANTALLAS</a>
<a href="/categoria-producto/video/reproductores-dvd">RIPRODUTTORI 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">GRIGLIA DA CORTILE</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">ELEMENTO</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">TECNOLOGIA INNOVATIVA</a>
<a href="/categoria-producto/marca/instant-vortex">VORTEX ISTANTANEO</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">MAGGIORANZA</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/nuttribullet">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">SQUALO</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">CONTATTO</a>
</div>
</corpo>
</testa>
</html>
