Впервые использую HTML-блок для пользовательского заголовка, и он выглядит не очень хорошо, помогите, пожалуйста!
Опубликовано: 2023-08-09Привет!
Я работаю над пользовательским заголовком для этого сайта, потому что инструменты темы Astra не так хороши, как хотелось бы. Я все еще учусь программировать для веб-разработки, и этот пользовательский заголовок на HTML на данный момент является моим основным проектом.
Для визуализации заголовка я работал с Visual Studio Code и Google Chrome. Я подумал, что идеальный план — поместить этот HTML-код в «блок HTML» в конструкторе заголовков настройки темы Astra. Я не ожидал, что ширина будет ограничена блоком.
**Мой заголовок только HTML-код:**
https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5
**Мой заголовок на сайте внутри HTML-блока конструктора заголовков:**
https://preview.redd.it/9t43ltau2zgb1.jpg?width=1280&format=pjpg&auto=webp&s=81e6f66097e0a81c0caa4a4ed8019c10b0348c3d
Проведя небольшое исследование, я нашел CSS-код, который «решил» эту проблему, но он не исправил ее вообще. Это приносит мне больше проблем. Я использовал следующий код:
.ast-builder-html-element
ширина: 100vw;
**И теперь заголовок выглядит так:**
https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e
Элементы с правой стороны исчезли, а блок «КОНТАКТЫ» перемещен немного вниз.
РЕДАКТИРОВАТЬ: Я решил проблему «CONTACTO», перемещенную вниз, это было вызвано тегами <br>. Я удалил их с помощью CSS, и проблема решена!
Итак… ПОЧЕМУ?
Я не знаю, возникла ли проблема с моим HTML-кодом или проблема связана с использованием HTML-блока, и мне следует сделать это другим способом. Я совершенно потерян.
Буду ОЧЕНЬ благодарен за любую помощь!!!
**Я делюсь своим HTML-кодом для заголовка:**
<html>
<голова>
<script src="https://kit.fontawesome.com/4d7716fb70.js" crossorigin="anonymous"></script>
<стиль>
.cabecera-navbar-principal
переполнение: скрыто;
цвет фона: #fff;
семейство шрифтов: Montserrat;
.cabecera-navbar-principal а
плыть налево;
размер шрифта: 16 пикселей;
вес шрифта: 600;
цвет: #424242;
выравнивание текста: по центру;
отступ: 15 пикселей 15 пикселей;
текстовое оформление: нет;
.cabecera-выпадающий список
плыть налево;
переполнение: скрыто;
.cabecera-dropdown .cabecera-dropbtn
граница: нет;
контур: нет;
цвет: #424242;
отступ: 14 пикселей 16 пикселей;
цвет фона: наследовать;
шрифт: наследовать;
маржа: 0;
вес шрифта: 600;
.cabecera-navbar-principal a:hover, .cabecera-dropdown:hover .cabecera-dropbtn
цвет: #003398;
.cabecera-dropdown-content
дисплей: нет;
позиция: абсолютная;
цвет фона: #fff;
ширина: 100%;
слева: 0;
border-top: 2 пикселя, сплошной #0080ff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-индекс: 1;
.cabecera-dropdown:hover .cabecera-dropdown-content
дисплей: блок;
.cabecera-столбец
плыть налево;
ширина: 19%;
отступ слева: 10 пикселей;
цвет фона: #fff;
высота: 450 пикселей;
.cabecera-столбец а
плавающий: нет;
цвет: #424242;
текстовое оформление: нет;
дисплей: блок;
выравнивание текста: по левому краю;
.columnas-marcas
плыть налево;
ширина: 100%;
отступ слева: 20 пикселей;
отступ справа: 20 пикселей;
отступ-верх: 20 пикселей;
отступ-дно: 0 пикселей;
цвет фона: #fff;
высота: 450 пикселей;
высота строки: 0,1;
столбцы: 4;
.columnas-marcas а
плавающий: нет;
цвет: #424242;
текстовое оформление: нет;
дисплей: блок;
выравнивание текста: по левому краю;
.cabecera-row:после
содержание: "";
дисплей: стол;
ясно: оба;
.cabecera-categoria-padre
размер шрифта: 1.17em !важно;
шрифт-вес: жирный !важно;
маржа-верх: 0,3em;
нижняя граница: сплошная 1 пиксель #E3E3E3;
</стиль>
<тело>
<div class="cabecera-navbar-principal">
<div class="cabecera-dropdown">
<button class=”cabecera-dropbtn” onclick=”window.location.href='/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">АУДИО</a>
<a href="/categoria-producto/audio/accesorios-audio">АКСЕСОРИИ</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">АУДИОСИСТЕМЫ</a>
</div>
<div class="cabecera-column">
<a class="cabecera-categoria-padre" href="/categoria-producto/electronica">ELECTRONICA</a>
<a href="/categoria-producto/electronica/accesorios-electronica">АКСЕСОРИИ</a>
<a href="/categoria-producto/electronica/consolas">CONSOLAS</a>
<a href="/categoria-producto/electronica/drones">ДРОНЫ</a>
<a href="/categoria-producto/electronica/tablets">ТАБЛЕТЫ</a>
</div>
<div class="cabecera-column">
<a class="cabecera-categoria-padre" href="/categoria-producto/hogar">ХОГАР</a>
<a href="/categoria-producto/hogar/calentadores">КАЛЕНТАДОРЫ</a>
<a href="/categoria-producto/hogar/colchones">КОЛХОНЫ</a>
<a href="/categoria-producto/hogar/planchas-vapor-aspiradoras">PLANCHAS DE VAPOR / ASPIRADORAS</a>
<a href="/categoria-producto/hogar/ventiladores">ВЕНТИЛАДОРЫ</a>
</div>
<div class="cabecera-column">
<a class="cabecera-categoria-padre" href="/categoria-producto/linea-blanca">ЛИНЕА БЛАНКА</a>
<a href="/categoria-producto/linea-blanca/cafeteras">КАФЕ</a>
<a href="/categoria-producto/linea-blanca/congeladores">КОНГЕЛАДОРЕ</a>
<a href="/categoria-producto/linea-blanca/freidoras-hornos">ФРЕЙДОРАС / ГОРНОС</a>
<a href="/categoria-producto/linea-blanca/licuadoras">ЛИКУАДОРАС</a>
<a href="/categoria-producto/linea-blanca/parrillas">ПАРРИЛЬЯ</a>
<a href="/categoria-producto/linea-blanca/procesador-alimentos-ollas">ПРОЦЕСАДОР ПИТАНИЯ / ОЛЛАС</a>
<a href="/categoria-producto/linea-blanca/tostadoras">ТОСТАДОРА</a>
</div>
<div class="cabecera-column">
<a class="cabecera-categoria-padre" href="/categoria-producto/video">ВИДЕО</a>
<a href="/categoria-producto/video/accesorios-video">АКСЕСОРИИ</a>
<a href="/categoria-producto/video/pantallas">ПАНТАЛЛА</a>
<a href="/categoria-producto/video/reproductores-dvd">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">АРОМАТ</a>
<a href="/categoria-producto/marca/atvio">ATVIO</a>
<a href="/categoria-producto/marca/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">ЭЛИТ</a>
<a href="/categoria-producto/marca/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">ГАМИЛЬТОН-БИЧ</a>
<a href="/categoria-producto/marca/hisense">HISENSE</a>
<a href="/categoria-producto/marca/hunterspider">HUNTERSPIDER</a>
<a href="/categoria-producto/marca/innovative-technology">ИННОВАЦИОННЫЕ ТЕХНОЛОГИИ</a>
<a href="/categoria-producto/marca/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">БОЛЬШИНСТВО</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">НИНДЗЯ</a>
<a href="/categoria-producto/marca/nutribullet">NUTRIBULLET</a>
<a href="/categoria-producto/marca/onn">ONN</a>
<a href="/categoria-producto/marca/pelonis">ПЕЛОНИС</a>
<a href="/categoria-producto/marca/powerxl">POWERXL</a>
<a href="/categoria-producto/marca/rca">RCA</a>
<a href="/categoria-producto/marca/ridgeway">РИДЖВЭЙ</a>
<a href="/categoria-producto/marca/rival">RIVAL</a>
<a href="/categoria-producto/marca/samsung">SAMSUNG</a>
<a href="/categoria-producto/marca/shark">АКУЛА</a>
<a href="/categoria-producto/marca/sony">SONY</a>
<a href="/categoria-producto/marca/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">ВЕНТУРЕР</a>
<a href="/categoria-producto/marca/vissani">ВИССАНИ</a>
<a href="/categoria-producto/marca/vivitar">ВИВИТАР</a>
<a href="/categoria-producto/marca/vizio">ВИЗИО</a>
<a href="/categoria-producto/marca/westinghouse">WESTINGHOUSE</a>
</div>
</div>
</div>
</div>
<a href="/ayuda">АЮДА</a>
<a href="/contacto">КОНТАКТЫ</a>
</div>
</тело>
</голова>
</html>
