• Page d'accueil
  • Des articles
  • Thème
  • C'est la première fois que j'utilise un bloc HTML pour un en-tête personnalisé et cela n'a pas l'air bien, aidez-moi s'il vous plaît !

C'est la première fois que j'utilise un bloc HTML pour un en-tête personnalisé et cela n'a pas l'air bien, aidez-moi s'il vous plaît !

Publié: 2023-08-09

Salut!

Je travaille avec un en-tête personnalisé pour ce site car les outils de thème d'Astra ne sont pas aussi performants que je le souhaiterais. J'apprends encore à coder pour le développement Web et cet en-tête personnalisé en HTML est mon projet majeur jusqu'à présent.

J'ai travaillé avec Visual Studio Code et Google Chrome pour visualiser l'en-tête. Je pensais que le plan parfait était d'intégrer ce code HTML dans un « bloc HTML » dans la personnalisation du thème du générateur d'en-tête d'Astra. Je ne m'attendais pas à ce que la largeur soit limitée par le bloc.

**Mon en-tête uniquement le code HTML :**

https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5

**Mon en-tête sur le site Web dans un bloc HTML du générateur d'en-tête :**

https://preview.redd.it/9t43ltau2zgb1.jpg?width=1280&format=pjpg&auto=webp&s=81e6f66097e0a81c0caa4a4ed8019c10b0348c3d

Après avoir fait quelques recherches, j'ai trouvé du code CSS pour « résoudre » ce problème, mais cela ne l'a pas du tout résolu. Cela m'apporte plus de problèmes. J'ai utilisé le code suivant :

.ast-builder-élément-html
largeur : 100vw ;

**Et maintenant, l'en-tête ressemble à ceci :**

https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e

Les éléments du côté droit ont disparu et le bloc « CONTACTO » est déplacé un peu vers le bas.

EDIT : J'ai résolu le problème "CONTACTO" déplacé vers le bas, il était causé par les balises <br>. J'ai utilisé CSS pour les supprimer, donc ce problème est résolu !

Alors pourquoi?

Je ne sais pas s'il y a un problème avec mon code HTML ou s'il s'agit d'un problème lié à l'utilisation d'un bloc HTML et je devrais le faire autrement. Je suis complètement perdu.

J'apprécierais BEAUCOUP toute aide !!!

**Je partage mon code HTML pour l'en-tête :**

<html>
<tête>
<script src="https://kit.fontawesome.com/4d7716fb70.js" crossorigin="anonymous"></script>
<style>
.cabecera-navbar-principal
débordement caché;
couleur d'arrière-plan : #fff ;
famille de polices : Montserrat ;

.cabecera-navbar-principal a
flotteur : gauche ;
taille de police : 16 px ;
poids de la police : 600 ;
couleur : #424242 ;
alignement du texte : centre ;
remplissage : 15px 15px ;
décoration de texte : aucune ;

.cabecera-liste déroulante
flotteur : gauche ;
débordement caché;

.cabecera-dropdown .cabecera-dropbtn
bordure : aucune ;
contour : aucun ;
couleur : #424242 ;
remplissage : 14px 16px ;
couleur d'arrière-plan : hériter ;
police : hériter ;
marge : 0 ;
poids de la police : 600 ;

.cabecera-navbar-principal a: survol, .cabecera-dropdown: survol .cabecera-dropbtn
couleur : #003398 ;

.cabecera-dropdown-content
affichage : aucun ;
position : absolue ;
couleur d'arrière-plan : #fff ;
largeur : 100 % ;
gauche : 0 ;
bordure supérieure : 2px solide #0080ff ;
ombre de la boîte : 0px 8px 16px 0px rgba(0,0,0,0.2);
indice z : 1 ;

.cabecera-dropdown : survolez .cabecera-dropdown-content
bloc de visualisation;

.cabecera-colonne
flotteur : gauche ;
largeur : 19 % ;
remplissage à gauche : 10 px ;
couleur d'arrière-plan : #fff ;
hauteur : 450px ;

.cabecera-colonne a
flotteur : aucun ;
couleur : #424242 ;
décoration de texte : aucune ;
bloc de visualisation;
aligner le texte : gauche ;

.columnas-marcas
flotteur : gauche ;
largeur : 100 % ;
remplissage à gauche : 20 px ;
remplissage à droite : 20 px ;
rembourrage supérieur : 20 px ;
remplissage en bas : 0px ;
couleur d'arrière-plan : #fff ;
hauteur : 450px ;
hauteur de ligne : 0,1 ;
colonnes : 4 ;

.columnas-marcas a
flotteur : aucun ;
couleur : #424242 ;
décoration de texte : aucune ;
bloc de visualisation;
aligner le texte : gauche ;

.cabecera-row: après
contenu: "";
affichage : tableau ;
clarifier les deux;

.cabecera-categoria-padre
taille de la police : 1,17em !important ;
poids de la police : gras !important ;
marge supérieure : 0,3em ;
bordure inférieure : 1px solide #E3E3E3 ;

</style>
<corps>
<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></bouton>
<div class="cabecera-dropdown-content">
<div class="cabecera-row">
<div class="cabecera-column">
<a class="cabecera-categoria-padre" href="/categoria-producto/audio">AUDIO</a>
<a href="/categoria-producto/audio/accesorios-audio">ACCESSOIRES</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-column">
<a class="cabecera-categoria-padre" href="/categoria-producto/electronica">ÉLECTRONIQUE</a>
<a href="/categoria-producto/electronica/accesorios-electronica">ACCESSOIRES</a>
<a href="/categoria-producto/electronica/consolas">CONSOLAS</a>
<a href="/categoria-producto/electronica/drones">DRONES</a>
<a href="/categoria-producto/electronica/tablets">TABLETTES</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">COLCHONES</a>
<a href="/categoria-producto/hogar/planchas-vapor-aspiradoras">PLANCHAS DE VAPEUR / ASPIRADORAS</a>
<a href="/categoria-producto/hogar/ventiladores">VENTILATEURS</a>
</div>
<div class="cabecera-column">
<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">PROCESSEUR D'ALIMENTOS / OLLAS</a>
<a href="/categoria-producto/linea-blanca/tostadoras">TOSTADORAS</a>
</div>
<div class="cabecera-column">
<a class="cabecera-categoria-padre" href="/categoria-producto/video">VIDÉO</a>
<a href="/categoria-producto/video/accesorios-video">ACCESSOIRES</a>
<a href="/categoria-producto/video/pantallas">PANTALLAS</a>
<a href="/categoria-producto/video/reproductores-dvd">DVD REPRODUCTEURS</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="colonnes-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">ROI ARCTIQUE</a>
<a href="/categoria-producto/marca/aroma">ARÔME</a>
<a href="/categoria-producto/marca/atvio">ATVIO</a>
<a href="/categoria-producto/marca/backyard-grill">GRILL D'ARRIÈRE-COUR</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">ÉLÉMENT</a>
<a href="/categoria-producto/marca/elite">ÉLITE</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">TECHNOLOGIE INNOVANTE</a>
<a href="/categoria-producto/marca/instant-vortex">VORTEX INSTANTANÉ</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">MAJORITÉ</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">REQUIN</a>
<a href="/categoria-producto/marca/sony">SONY</a>
<a href="/categoria-producto/marca/speedy-cook">CUISSON RAPIDE</a>
<a href="/categoria-producto/marca/steelpro">STEELPRO</a>
<a href="/categoria-producto/marca/tcl">TCL</a>
<a href="/categoria-producto/marca/venturer">AVENTUREUR</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>
</corps>
</tête>
</html>