Pierwszy raz używam bloku HTML dla niestandardowego nagłówka i nie wygląda to dobrze, proszę o pomoc!
Opublikowany: 2023-08-09Cześć!
Pracuję z niestandardowym nagłówkiem dla tej witryny, ponieważ narzędzia tematyczne Astry nie są tak dobre, jak bym chciał. Wciąż uczę się kodować dla programistów internetowych, a ten niestandardowy nagłówek w HTML jest jak dotąd moim głównym projektem.
Aby wizualizować nagłówek, pracowałem z Visual Studio Code i Google Chrome. Pomyślałem, że idealnym planem będzie umieszczenie tego kodu HTML w „bloku HTML” w narzędziu Header Builder dostosowywania motywu Astry. Nie spodziewałem się, że szerokość będzie ograniczona przez blok.
**Mój nagłówek to tylko kod HTML:**
https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5
**Mój nagłówek na stronie internetowej wewnątrz bloku HTML kreatora nagłówków:**
https://preview.redd.it/9t43ltau2zgb1.jpg?width=1280&format=pjpg&auto=webp&s=81e6f66097e0a81c0caa4a4ed8019c10b0348c3d
Po przeprowadzeniu poszukiwań znalazłem kod CSS, który „rozwiązał” ten problem, ale w ogóle go nie rozwiązał. Przynosi mi to więcej problemów. Użyłem następnego kodu:
.ast-builder-element-html
szerokość: 100vw;
**A teraz nagłówek wygląda tak:**
https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e
Elementy po prawej stronie zniknęły, a blok „CONTACTO” został przesunięty nieco w dół.
EDYCJA: Rozwiązałem problem „KONTAKT” przeniesiony na dół, był on spowodowany tagami <br>. Użyłem CSS, aby je usunąć, więc problem został rozwiązany!
Więc dlaczego?
Nie wiem, czy występuje problem z moim kodem HTML, czy też jest to problem wynikający z użycia bloku HTML i powinienem to zrobić w inny sposób. Jestem całkowicie zagubiony.
Byłbym BARDZO wdzięczny za jakąkolwiek pomoc!!!
**Udostępniam mój kod HTML nagłówka:**
<html>
<głowa>
<script src=”https://kit.fontawesome.com/4d7716fb70.js” crossorigin=”anonymous”></script>
<styl>
.cabecera-navbar-principal
przepełnienie: ukryte;
kolor tła: #fff;
rodzina czcionek: Montserrat;
.cabecera-navbar-principal a
pływak: w lewo;
rozmiar czcionki: 16 pikseli;
grubość czcionki: 600;
kolor: #424242;
wyrównanie tekstu: do środka;
dopełnienie: 15px 15px;
dekoracja tekstu: brak;
Lista rozwijana .cabecera
pływak: w lewo;
przepełnienie: ukryte;
.cabecera-dropdown .cabecera-dropbtn
granica: brak;
zarys: brak;
kolor: #424242;
dopełnienie: 14px 16px;
kolor tła: dziedzicz;
czcionka: dziedzicz;
margines: 0;
grubość czcionki: 600;
.cabecera-navbar-principal a:hover, .cabecera-dropdown:hover .cabecera-dropbtn
kolor: #003398;
.cabecera-dropdown-content
Nie wyświetla się;
pozycja: absolutna;
kolor tła: #fff;
szerokość: 100%;
po lewej: 0;
obramowanie u góry: 2 piksele ciągłe #0080ff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
indeks Z: 1;
.cabecera-dropdown: najedź kursorem na .cabecera-dropdown-content
Blok wyświetlacza;
kolumna .cabecera
pływak: w lewo;
szerokość: 19%;
dopełnienie po lewej stronie: 10px;
kolor tła: #fff;
wysokość: 450px;
kolumna .cabecera a
pływak: brak;
kolor: #424242;
dekoracja tekstu: brak;
Blok wyświetlacza;
wyrównanie tekstu: do lewej;
.columnas-marcas
pływak: w lewo;
szerokość: 100%;
dopełnienie po lewej stronie: 20px;
dopełnienie po prawej stronie: 20px;
górna część dopełnienia: 20px;
dopełnienie-dół: 0px;
kolor tła: #fff;
wysokość: 450px;
wysokość linii: 0,1;
kolumny: 4;
.columnas-marcas a
pływak: brak;
kolor: #424242;
dekoracja tekstu: brak;
Blok wyświetlacza;
wyrównanie tekstu: do lewej;
.cabecera-row:po
treść: "";
wyświetlacz: stół;
oba czyste;
.cabecera-kategoria-padre
rozmiar czcionki: 1,17 em !ważne;
grubość czcionki: pogrubiona !ważne;
margines górny: 0,3 em;
obramowanie na dole: 1px bryła #E3E3E3;
</styl>
<ciało>
<div class=”cabecera-navbar-principal”>
<div class="cabecera-dropdown">
<button class=”cabecera-dropbtn” onclick=”window.location.href='/productos'”>PRODUKTY <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242; ”></i></przycisk>
<div class=”cabecera-dropdown-content”>
<div class=”cabecera-row”>
<div class=”kolumna-cabecera”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/audio”>AUDIO</a>
<a href=”/categoria-producto/audio/accesorios-audio”>AKCESORIA</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=”kolumna-cabecera”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/electronica”>ELECTRONICA</a>
<a href=”/categoria-producto/electronica/accesorios-electronica”>AKCESORIA</a>
<a href=”/categoria-producto/electronica/consolas”>CONSOLAS</a>
<a href=”/categoria-producto/electronica/drones”>DRONY</a>
<a href=”/categoria-producto/electronica/tablets”>TABLETY</a>
</div>
<div class=”kolumna-cabecera”>
<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”>KOLCHONY</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=”kolumna-cabecera”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/linea-blanca”>LINEA BLANCA</a>
<a href=”/categoria-producto/linea-blanca/cafeteras”>KAFETERY</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=”kolumna-cabecera”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/video”>WIDEO</a>
<a href=”/categoria-producto/video/accesorios-video”>AKCESORIA</a>
<a href=”/categoria-producto/video/pantallas”>PANTALLAS</a>
<a href=”/categoria-producto/video/reproductores-dvd”>REPRODUKTOR 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”>ARKTYCZNY KRÓL</a>
<a href=”/categoria-producto/marca/aroma”>AROMA</a>
<a href=”/categoria-producto/marca/atvio”>ATVIO</a>
<a href=”/categoria-producto/marca/backyard-grill”>GRILL PODWÓDKOWY</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”>INNOWACYJNA TECHNOLOGIA</a>
<a href=”/categoria-producto/marca/instant-vortex”>NATYCHMIASTOWY WIR</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”>WIĘKSZOŚĆ</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”>RYWAL</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”>SZYBKIE GOTOWANIE</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>
</ciało>
</head>
</html>
