• Startseite
  • Artikel
  • Thema
  • Ich verwende zum ersten Mal einen HTML-Block für einen benutzerdefinierten Header und er sieht nicht gut aus. Bitte helfen Sie!

Ich verwende zum ersten Mal einen HTML-Block für einen benutzerdefinierten Header und er sieht nicht gut aus. Bitte helfen Sie!

Veröffentlicht: 2023-08-09

Hallo!

Ich arbeite mit einem benutzerdefinierten Header für diese Site, da die Theme-Tools von Astra nicht so gut sind, wie ich es gerne hätte. Ich lerne immer noch, für die Webentwicklung zu programmieren, und dieser benutzerdefinierte Header in HTML ist bisher mein größtes Projekt.

Ich habe mit Visual Studio Code und Google Chrome gearbeitet, um den Header zu visualisieren. Ich dachte, dass der perfekte Plan darin bestand, diesen HTML-Code in einen „HTML-Block“ im Header Builder der Theme-Anpassung von Astra zu integrieren. Ich hätte nicht erwartet, dass die Breite durch den Block begrenzt wird.

**Mein Header nur der HTML-Code:**

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

**Mein Header auf der Website innerhalb eines HTML-Blocks des Header-Builders:**

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

Nach einigen Recherchen habe ich einen CSS-Code gefunden, der das Problem „löst“, aber er hat das Problem überhaupt nicht behoben. Es bringt mir mehr Probleme. Ich habe den nächsten Code verwendet:

.ast-builder-html-element
Breite: 100vw;

**Und jetzt sieht der Header so aus:**

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

Die Elemente auf der rechten Seite sind verschwunden und der „CONTACTO“-Block ist etwas nach unten verschoben.

EDIT: Ich habe das nach unten verschobene Problem „CONTACTO“ gelöst, es wurde durch die <br>-Tags verursacht. Ich habe CSS verwendet, um sie zu löschen, damit ist das Problem gelöst!

Warum also?

Ich weiß nicht, ob es ein Problem mit meinem HTML-Code gibt oder ob es ein Problem ist, das durch die Verwendung eines HTML-Blocks entsteht, und ich sollte das auf andere Weise tun. Ich bin völlig verloren.

Ich würde mich über jede Hilfe SEHR freuen!!!

**Ich teile meinen HTML-Code für den Header:**

<html>
<Kopf>
<script src=“https://kit.fontawesome.com/4d7716fb70.js“ crossorigin=“anonymous“></script>
<Stil>
.cabecera-navbar-principal
Überlauf versteckt;
Hintergrundfarbe: #fff;
Schriftfamilie: Montserrat;

.cabecera-navbar-principal a
schweben: links;
Schriftgröße: 16px;
Schriftstärke: 600;
Farbe: #424242;
Textausrichtung: Mitte;
Polsterung: 15px 15px;
Textdekoration: keine;

.cabecera-dropdown
schweben: links;
Überlauf versteckt;

.cabecera-dropdown .cabecera-dropbtn
Grenze: keine;
Gliederung: keine;
Farbe: #424242;
Polsterung: 14px 16px;
Hintergrundfarbe: erben;
Schriftart: erben;
Rand: 0;
Schriftstärke: 600;

.cabecera-navbar-principal a:hover, .cabecera-dropdown:hover .cabecera-dropbtn
Farbe: #003398;

.cabecera-dropdown-content
Anzeige: keine;
Position: absolut;
Hintergrundfarbe: #fff;
Breite: 100 %;
links: 0;
border-top: 2px solide #0080ff;
Kastenschatten: 0px 8px 16px 0px rgba(0,0,0,0.2);
Z-Index: 1;

.cabecera-dropdown:hover .cabecera-dropdown-content
Bildschirmsperre;

.cabecera-column
schweben: links;
Breite: 19 %;
padding-left: 10px;
Hintergrundfarbe: #fff;
Höhe: 450px;

.cabecera-Spalte a
float: keine;
Farbe: #424242;
Textdekoration: keine;
Bildschirmsperre;
Textausrichtung: links;

.columnas-marcas
schweben: links;
Breite: 100 %;
padding-left: 20px;
padding-right: 20px;
Polsterung oben: 20px;
Polsterung unten: 0px;
Hintergrundfarbe: #fff;
Höhe: 450px;
Zeilenhöhe: 0,1;
Spalten: 4;

.columnas-marcas a
float: keine;
Farbe: #424242;
Textdekoration: keine;
Bildschirmsperre;
Textausrichtung: links;

.cabecera-row:after
Inhalt: "";
Anzeige: Tisch;
Lösche beide;

.cabecera-categoria-padre
Schriftgröße: 1,17em !important;
Schriftstärke: fett !important;
Rand oben: 0,3em;
border-bottom: 1px solide #E3E3E3;

</style>
<Körper>
<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-column“>
<a class=“cabecera-categoria-padre“ href=“/categoria-producto/audio“>AUDIO</a>
<a href=“/categoria-producto/audio/accesorios-audio“>ZUBEHÖR</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“>AUDIOSYSTEME</a>
</div>
<div class=“cabecera-column“>
<a class=“cabecera-categoria-padre“ href=“/categoria-producto/electronica“>ELECTRONICA</a>
<a href=“/categoria-producto/electronica/accesorios-electronica“>ZUBEHÖR</a>
<a href=“/categoria-producto/electronica/consolas“>CONSOLAS</a>
<a href=“/categoria-producto/electronica/drones“>DROHNEN</a>
<a href=“/categoria-producto/electronica/tablets“>TABLETTEN</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 VAPOR / ASPIRADORAS</a>
<a href=“/categoria-producto/hogar/ventiladores“>LÜFTER</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“>PROCESADOR DE 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“>VIDEO</a>
<a href=“/categoria-producto/video/accesorios-video“>ZUBEHÖR</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“>ARKTISCHER KÖNIG</a>
<a href=“/categoria-producto/marca/aroma“>AROMA</a>
<a href=“/categoria-producto/marca/atvio“>ATVIO</a>
<a href=“/categoria-producto/marca/backyard-grill“>HINTERHOFGRILL</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“>INNOVATIVE TECHNOLOGIE</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“>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“>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“>SHARK</a>
<a href=“/categoria-producto/marca/sony“>SONY</a>
<a href=“/categoria-producto/marca/speedy-cook“>SCHNELLES KOCHEN</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“>KONTAKT</a>
</div>
</body>
</head>
</html>