カスタム ヘッダーに HTML ブロックを初めて使用しましたが、見た目が良くありません。助けてください。
公開: 2023-08-09こんにちは！
Astra のテーマ ツールが期待するほど優れていないため、このサイトではカスタム ヘッダーを使用して作業しています。 私はまだ Web 開発用のコードを学習中で、HTML 上のこのカスタム ヘッダーがこれまでの私の主要プロジェクトです。
Visual Studio Code と Google Chrome を使用してヘッダーを視覚化しました。 私は、その HTML コードを Astra のテーマのカスタマイズのヘッダー ビルダーの「HTML ブロック」に入れるのが完璧な計画だと考えました。 ブロックによって幅が制限されるとは予想していませんでした。
**私のヘッダーは HTML コードのみです:**
https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5
**ヘッダー ビルダーの HTML ブロック内の Web サイト上のヘッダー:**
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」ブロックが少し下に移動します。
編集：一番下に移動した「CONTACTO」の問題を解決しました。これは<br>タグが原因でした。 CSSを使って削除したので問題は解決しました！
なぜ？
HTML コードに問題があるのか、それとも HTML ブロックの使用に起因する問題なのか、別の方法で解決する必要があるのかわかりません。 完全に迷ってしまいました。
ぜひ助けていただければ幸いです。
**ヘッダーの HTML コードを共有します:**
<html>
<頭>
<script src=”https://kit.fontawesome.com/4d7716fb70.js”crossorigin=”anonymous”></script>
<スタイル>
.cabecera-navbar-principal
オーバーフロー: 非表示;
背景色: #fff;
フォントファミリー: モントセラト;
.cabecera-navbar-principal a
フロート: 左;
フォントサイズ: 16px;
フォントの太さ: 600;
色: #424242;
テキスト整列: 中央;
パディング: 15 ピクセル 15 ピクセル;
テキスト装飾: なし。
.cabecera-ドロップダウン
フロート: 左;
オーバーフロー: 非表示;
.cabecera-ドロップダウン .cabecera-dropbtn
境界線: なし。
概要: なし。
色: #424242;
パディング: 14px 16px;
背景色: 継承;
フォント: 継承;
マージン: 0;
フォントの太さ: 600;
.cabecera-navbar-principal a:hover、.cabecera-dropdown:hover .cabecera-dropbtn
色: #003398;
.cabecera-ドロップダウンコンテンツ
表示: なし。
位置: 絶対;
背景色: #fff;
幅: 100%;
左: 0;
ボーダートップ: 2px ソリッド #0080ff;
ボックスシャドウ: 0px 8px 16px 0px rgba(0,0,0,0.2);
z インデックス: 1;
.cabecera-dropdown:ホバー .cabecera-dropdown-content
表示ブロック;
.cabecera-column
フロート: 左;
幅: 19%;
パディング左: 10px;
背景色: #fff;
高さ: 450ピクセル;
.cabecera-列a
フロート: なし。
色: #424242;
テキスト装飾: なし。
表示ブロック;
テキスト整列: 左;
.columnas-marcas
フロート: 左;
幅: 100%;
パディング左: 20px;
パディング右: 20px;
パディングトップ: 20px;
パディングボトム: 0px;
背景色: #fff;
高さ: 450ピクセル;
行の高さ: 0.1;
列: 4;
.columnas-marcas a
フロート: なし。
色: #424242;
テキスト装飾: なし。
表示ブロック;
テキスト整列: 左;
.cabecera-row:後
コンテンツ： "";
表示: テーブル;
クリア：両方。
.cabecera-カテゴリリア-パドレ
フォントサイズ: 1.17em !重要;
フォントの太さ: 太字 !重要;
マージントップ: 0.3em;
ボーダーボトム: 1px ソリッド #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></ボタン>
<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”>バラス デ ソニド</a>
<a href=”/categoria-producto/audio/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”>エレクトロニカ</a>
<a href=”/categoria-producto/electronica/accesorios-electronica”>ACCESORIOS</a>
<a href=”/categoria-producto/electronica/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”>プランチャ ド ベイパー / アスピラドラス</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”>PROCESADOR DE 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”>マーカス <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”>アイワ</a>
<a href=”/categoria-producto/marca/altec-lansing”>アルテック ランシング</a>
<a href=”/categoria-producto/marca/alux”>ALUX</a>
<a href=”/categoria-producto/marca/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”>ビューティーレスト</a>
<a href=”/categoria-producto/marca/black-n-decker”>ブラック アンド デッカー</a>
<a href=”/categoria-producto/marca/blackweb”>ブラックウェブ</a>
<a href=”/categoria-producto/marca/element”>エレメント</a>
<a href=”/categoria-producto/marca/elite”>エリート</a>
<a href=”/categoria-producto/marca/emeril-lagasse”>エメリル・ラガッセ</a>
<a href=”/categoria-producto/marca/farberware”>ファーバーウェア</a>
<a href=”/categoria-producto/marca/ge”>GE</a>
<a href=”/categoria-producto/marca/generico”>ジェネリコ</a>
<a href=”/categoria-producto/marca/hamilton-beach”>ハミルトンビーチ</a>
<a href=”/categoria-producto/marca/hisense”>ハイセンス</a>
<a href=”/categoria-producto/marca/hunterspider”>ハンタースパイダー</a>
<a href=”/categoria-producto/marca/innovative-technology”>革新的なテクノロジー</a>
<a href=”/categoria-producto/marca/instant-vortex”>インスタント ボルテックス</a>
<a href=”/categoria-producto/marca/jungletac”>ジャングルタック</a>
<a href=”/categoria-producto/marca/kvision”>K-VISION</a>
<a href=”/categoria-producto/marca/kempler-n-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”>マイクロソフト</a>
<a href=”/categoria-producto/marca/momentum”>モメンタム</a>
<a href=”/categoria-producto/marca/ninja”>忍者</a>
<a href=”/categoria-producto/marca/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”>ライバル</a>
<a href=”/categoria-producto/marca/samsung”>サムスン</a>
<a href=”/categoria-producto/marca/shark”>シャーク</a>
<a href=”/categoria-producto/marca/sony”>ソニー</a>
<a href=”/categoria-producto/marca/speedy-cook”>スピーディ クック</a>
<a href=”/categoria-producto/marca/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”>VIZIO</a>
<a href=”/categoria-producto/marca/westinghouse”>ウェスティングハウス</a>
</div>
</div>
</div>
</div>
<a href=”/ayuda”>アユダ</a>
<a href=”/contacto”>連絡先</a>
</div>
</body>
</head>
</html>
