Pertama kali menggunakan blok HTML untuk header khusus dan tidak terlihat bagus, mohon bantuannya!
Diterbitkan: 2023-08-09Hai!
Saya sedang mengerjakan tajuk khusus untuk situs ini karena alat tema Astra tidak sebaik yang saya inginkan. Saya masih belajar kode untuk web dev dan header khusus pada HTML ini adalah proyek besar saya sejauh ini.
Saya bekerja dengan Visual Studio Code dan Google Chrome untuk memvisualisasikan header. Saya pikir rencana yang tepat adalah memasukkan kode HTML itu ke dalam "blok HTML" di kustomisasi tema Pembuat Header Astra. Saya tidak menyangka lebarnya akan dibatasi oleh balok.
**Header saya hanya kode HTML:**
https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5
**Header saya di situs web di dalam blok HTML pembuat header:**
https://preview.redd.it/9t43ltau2zgb1.jpg?width=1280&format=pjpg&auto=webp&s=81e6f66097e0a81c0caa4a4ed8019c10b0348c3d
Setelah melakukan beberapa penelitian saya menemukan beberapa kode CSS untuk "menyelesaikan" ini tetapi tidak memperbaikinya sama sekali. Ini memberi saya lebih banyak masalah. Saya menggunakan kode berikutnya:
.ast-builder-html-elemen
lebar: 100vw;
**Dan sekarang headernya terlihat seperti ini:**
https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e
Elemen di sisi kanan hilang dan blok “CONTACTO” dipindahkan sedikit ke bawah.
EDIT: Saya memecahkan masalah "CONTACTO" yang dipindahkan ke bawah, itu disebabkan oleh tag <br>. Saya menggunakan CSS untuk menghapusnya, sehingga masalah terpecahkan!
Jadi kenapa?
Saya tidak tahu apakah ada masalah dengan kode HTML saya atau masalah yang muncul karena penggunaan blok HTML dan saya harus melakukannya dengan cara lain. Saya benar-benar tersesat.
Saya akan sangat menghargai bantuan apa pun!!!
**Saya membagikan kode HTML saya untuk header:**
<html>
<kepala>
<skrip src=”https://kit.fontawesome.com/4d7716fb70.js” crossorigin=”anonymous”></skrip>
<gaya>
.cabecera-navbar-prinsipal
meluap: tersembunyi;
warna latar belakang: #fff;
keluarga font: Montserrat;
.cabecera-navbar-prinsipal a
mengapung: kiri;
ukuran font: 16px;
berat font: 600;
warna: #424242;
perataan teks: tengah;
bantalan: 15px 15px;
dekorasi teks: tidak ada;
.cabecera-tarik-turun
mengapung: kiri;
meluap: tersembunyi;
.cabecera-dropdown .cabecera-dropbtn
perbatasan: tidak ada;
garis besar: tidak ada;
warna: #424242;
bantalan: 14px 16px;
warna latar belakang: mewarisi;
font: mewarisi;
margin: 0;
berat font: 600;
.cabecera-navbar-prinsipal a:hover, .cabecera-dropdown:hover .cabecera-dropbtn
warna: #003398;
.cabecera-dropdown-konten
tampilan: tidak ada;
posisi: mutlak;
warna latar belakang: #fff;
lebar: 100%;
kiri: 0;
perbatasan-atas: 2px solid #0080ff;
bayangan kotak: 0px 8px 16px 0px rgba(0,0,0,0.2);
indeks-z: 1;
.cabecera-dropdown: arahkan kursor ke .cabecera-dropdown-content
tampilan: blok;
.cabecera-kolom
mengapung: kiri;
lebar: 19%;
padding-kiri: 10px;
warna latar belakang: #fff;
tinggi: 450 piksel;
.cabecera-kolom a
mengapung: tidak ada;
warna: #424242;
dekorasi teks: tidak ada;
tampilan: blok;
perataan teks: kiri;
.columnas-marcas
mengapung: kiri;
lebar: 100%;
padding-kiri: 20px;
padding-kanan: 20px;
padding-atas: 20 piksel;
bantalan-bawah: 0px;
warna latar belakang: #fff;
tinggi: 450 piksel;
tinggi garis: 0,1;
kolom: 4;
.columnas-marcas a
mengapung: tidak ada;
warna: #424242;
dekorasi teks: tidak ada;
tampilan: blok;
perataan teks: kiri;
.cabecera-row:setelah
isi: "";
tampilan: meja;
jelas: keduanya;
.cabecera-categoria-padre
ukuran font: 1,17em!penting;
font-weight: tebal !penting;
margin-atas: 0,3em;
batas bawah: 1px solid #E3E3E3;
</gaya>
<tubuh>
<div class=”cabecera-navbar-prinsipal”>
<div class=”cabecera-dropdown”>
<button class=”cabecera-dropbtn” onclick=”window.location.href='/productos'”>PRODUK <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242; ”></i></tombol>
<div class=”cabecera-dropdown-konten”>
<div class=”baris cabecera”>
<div class=”kolom cabecera”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/audio”>AUDIO</a>
<a href=”/categoria-producto/audio/accesorios-audio”>ACCESORIOS</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”>SISTEM AUDIO</a>
</div>
<div class=”kolom cabecera”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/electronica”>ELECTRONICA</a>
<a href=”/categoria-producto/electronica/accesorios-electronica”>ACCESORIOS</a>
<a href=”/categoria-producto/electronica/consolas”>KONSOLAS</a>
<a href=”/categoria-producto/electronica/drones”>DRONE</a>
<a href=”/categoria-producto/electronica/tablets”>TABEL</a>
</div>
<div class=”kolom 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”>COLCHONES</a>
<a href=”/categoria-producto/hogar/planchas-vapor-aspiradoras”>RENCANA DE VAPOR / ASPIRADORAS</a>
<a href=”/categoria-producto/hogar/ventiladores”>VENTILADORES</a>
</div>
<div class=”kolom cabecera”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/linea-blanca”>LINEA BLANCA</a>
<a href=”/categoria-producto/linea-blanca/cafeteras”>KAFETERA</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”>PROSESADOR DE ALIMENTOS / OLLAS</a>
<a href=”/categoria-producto/linea-blanca/tostadoras”>TOSTADORAS</a>
</div>
<div class=”kolom cabecera”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/video”>VIDEO</a>
<a href=”/categoria-producto/video/accesorios-video”>ACCESORIOS</a>
<a href=”/categoria-producto/video/pantallas”>PANTALLAS</a>
<a href=”/categoria-producto/video/reproductores-dvd”>DVD REPRODUKSI</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-konten”>
<div class=”baris cabecera”>
<div class=”kolom-marcas”>
<a href=”/categoria-producto/marca/aiwa”>AIWA</a>
<a href=”/categoria-producto/marca/altec-lansing”>LANSING ALTEC</a>
<a href=”/categoria-producto/marca/alux”>ALUX</a>
<a href=”/categoria-producto/marca/arctic-king”>RAJA ARKTIK</a>
<a href=”/categoria-producto/marca/aroma”>AROMA</a>
<a href=”/categoria-producto/marca/atvio”>ATVIO</a>
<a href=”/categoria-producto/marca/backyard-grill”>PANGGANG HALAMAN BELAKANG</a>
<a href=”/categoria-producto/marca/beautyrest”>BEAUTYREST</a>
<a href=”/categoria-producto/marca/black-n-decker”>HITAM & DECKER</a>
<a href=”/categoria-producto/marca/blackweb”>BLACKWEB</a>
<a href=”/categoria-producto/marca/element”>ELEMEN</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”>PANTAI HAMILTON</a>
<a href=”/categoria-producto/marca/hisense”>HISENSE</a>
<a href=”/categoria-producto/marca/hunterspider”>HUNTERSPIDER</a>
<a href=”/categoria-producto/marca/innovative-technology”>TEKNOLOGI INOVATIF</a>
<a href=”/categoria-producto/marca/instant-vortex”>VORTEX INSTAN</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”>MAJORITAS</a>
<a href=”/categoria-producto/marca/maximatic”>MAXIMATIS</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”>SAINGAN</a>
<a href=”/categoria-producto/marca/samsung”>SAMSUNG</a>
<a href=”/categoria-producto/marca/shark”>HIU</a>
<a href=”/categoria-producto/marca/sony”>SONY</a>
<a href=”/categoria-producto/marca/speedy-cook”>MASAK CEPAT</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”>HUBUNGI</a>
</div>
</tubuh>
</kepala>
</html>
