Özel bir başlık için ilk kez HTML bloğunu kullanıyorum ve iyi görünmüyor, lütfen yardım edin!
Yayınlanan: 2023-08-09MERHABA!
Bu site için özel bir başlık üzerinde çalışıyorum çünkü Astra'nın tema araçları istediğim kadar iyi değil. Hala web geliştirme için kodlamayı öğreniyorum ve HTML'deki bu özel başlık şu ana kadarki en büyük projem.
Başlığı görselleştirmek için Visual Studio Code ve Google Chrome ile çalıştım. Mükemmel planın, bu HTML kodunu Astra'nın tema özelleştirmesindeki Başlık Oluşturucu'daki bir "HTML bloğuna" yerleştirmek olduğunu düşündüm. Genişliğin blokla sınırlı olmasını beklemiyordum.
**Başlığım yalnızca HTML kodu:**
https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5
**Üstbilgi oluşturucunun HTML bloğunun içindeki web sitesindeki başlığım:**
https://preview.redd.it/9t43ltau2zgb1.jpg?width=1280&format=pjpg&auto=webp&s=81e6f66097e0a81c0caa4a4ed8019c10b0348c3d
Biraz araştırma yaptıktan sonra bunu "çözmek" için bazı CSS kodları buldum ama bu sorunu hiç çözmedi. Bu bana daha fazla sorun getiriyor. Bir sonraki kodu kullandım:
.ast-builder-html-elemanı
genişlik: 100vw;
**Ve artık başlık şu şekilde görünüyor:**
https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e
Sağ taraftaki elemanlar gitmiş ve “CONTACTO” bloğu biraz aşağıya taşınmış.
DÜZENLEME: Alttaki soruna taşınan “CONTACTO” sorununu çözdüm, sorun <br> etiketlerinden kaynaklanıyordu. Bunları silmek için CSS kullandım, böylece sorun çözüldü!
Peki neden?
HTML kodumda bir sorun mu var yoksa HTML bloğu kullanmaktan kaynaklanan bir sorun mu bilmiyorum ve bunu başka şekilde yapmalıyım. Tamamen kayboldum.
Herhangi bir yardıma ÇOK minnettar olurum!!!
**Başlık için HTML kodumu paylaşıyorum:**
<html>
<kafa>
<script src=”https://kit.fontawesome.com/4d7716fb70.js” crossorigin=”anonymous”></script>
<stil>
.cabecera-navbar-anasil
taşma: gizli;
arka plan rengi: #fff;
yazı tipi ailesi: Montserrat;
.cabecera-navbar-anasil a
şamandıra: sol;
yazı tipi boyutu: 16 piksel;
yazı tipi ağırlığı: 600;
renk: #424242;
metin hizalama: ortala;
dolgu: 15 piksel 15 piksel;
metin dekorasyonu: yok;
.cabecera-açılır menü
şamandıra: sol;
taşma: gizli;
.cabecera-dropdown .cabecera-dropbtn
sınır: yok;
taslak: yok;
renk: #424242;
dolgu: 14 piksel 16 piksel;
arka plan rengi: miras;
yazı tipi: miras;
kenar boşluğu: 0;
yazı tipi ağırlığı: 600;
.cabecera-navbar-principal a: üzerine gelin, .cabecera-dropdown: üzerine gelin .cabecera-dropbtn
renk: #003398;
.cabecera-açılır-içerik
görüntü yok;
konum: mutlak;
arka plan rengi: #fff;
genişlik: %100;
sol: 0;
kenarlık üstü: 2 piksel düz #0080ff;
kutu gölgesi: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-endeksi: 1;
.cabecera-dropdown: üzerine gelin .cabecera-dropdown-içerik
Ekran bloğu;
.cabecera-sütun
şamandıra: sol;
genişlik: %19;
sol dolgu: 10px;
arka plan rengi: #fff;
yükseklik: 450 piksel;
.cabecera-sütun a
kayan nokta: yok;
renk: #424242;
metin dekorasyonu: yok;
Ekran bloğu;
metin hizalama: sol;
.columnas-marcas
şamandıra: sol;
genişlik: %100;
sol dolgu: 20 piksel;
sağ dolgu: 20 piksel;
üst dolgu: 20 piksel;
dolgu-alt: 0px;
arka plan rengi: #fff;
yükseklik: 450 piksel;
satır yüksekliği: 0,1;
sütunlar: 4;
.columnas-marcas a
kayan nokta: yok;
renk: #424242;
metin dekorasyonu: yok;
Ekran bloğu;
metin hizalama: sol;
.cabecera-satır:sonra
içerik: "";
ekran: tablo;
ikisini de temizle;
.cabecera-categoria-padre
yazı tipi boyutu: 1,17em !önemli;
yazı tipi ağırlığı: kalın !önemli;
üst kenar boşluğu: 0,3em;
kenarlık alt: 1 piksel düz #E3E3E3;
</style>
<gövde>
<div class=”cabecera-navbar-principal”>
<div class=”cabecera-dropdown”>
<button class=”cabecera-dropbtn” onclick=”window.location.href='/productos'”>ÜRÜNLER <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”>SES</a>
<a href=”/categoria-producto/audio/accesorios-audio”>AKSESUARLAR</a>
<a href=”/categoria-producto/audio/audifonos”>SESLENDİRMELER</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=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/electronica”>ELECTRONICA</a>
<a href=”/categoria-producto/electronica/accesorios-electronica”>AKSESUARLAR</a>
<a href=”/categoria-producto/electronica/consolas”>KONSOLALAR</a>
<a href=”/categoria-producto/electronica/drones”>DRONLAR</a>
<a href=”/categoria-producto/electronica/tablets”>TABLETLER</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/hogar”>HOGAR</a>
<a href=”/categoria-producto/hogar/calentadores”>KALENTADOLAR</a>
<a href=”/categoria-producto/hogar/colchones”>KOLKONOLAR</a>
<a href=”/categoria-producto/hogar/planchas-vapor-aspiradoras”>PLANCHAS DE VAPOR / ASPIRADORAS</a>
<a href=”/categoria-producto/hogar/ventiladores”>VENTİLADORLAR</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”>KAFETERALAR</a>
<a href=”/categoria-producto/linea-blanca/congeladores”>KONGELADORES</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”>PARRİLLALAR</a>
<a href=”/categoria-producto/linea-blanca/procesador-alimentos-ollas”>PROCESADOR DE ALIMENTOS / OLLAS</a>
<a href=”/categoria-producto/linea-blanca/tostadoras”>TOSTADORLAR</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/video”>VİDEO</a>
<a href=”/categoria-producto/video/accesorios-video”>AKSESUARLAR</a>
<a href=”/categoria-producto/video/pantallas”>PANTALLALAR</a>
<a href=”/categoria-producto/video/reproductores-dvd”>REPRODÜKSİYON DVD'Sİ</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”>KUTUP KRALI</a>
<a href=”/categoria-producto/marca/aroma”>AROMA</a>
<a href=”/categoria-producto/marca/atvio”>ATVIO</a>
<a href=”/categoria-producto/marca/backyard-grill”>ARKA BAHÇE IZGARA</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”>GENERİCO</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-teknoloji”>YENİLİKÇİ TEKNOLOJİ</a>
<a href=”/categoria-producto/marca/instant-vortex”>ANLIK VORTEKS</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 ve STRAUSS</a>
<a href=”/categoria-producto/marca/lg”>LG</a>
<a href=”/categoria-producto/marca/majority”>BÜYÜKLÜK</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”>KÖPEKBALIĞI</a>
<a href=”/categoria-producto/marca/sony”>SONY</a>
<a href=”/categoria-producto/marca/speedy-cook”>HIZLI PİŞİRME</a>
<a href=”/categoria-producto/marca/steelpro”>STEELPRO</a>
<a href=”/categoria-producto/marca/tcl”>TCL</a>
<a href=”/categoria-producto/marca/venturer”>GİRİŞİMCİ</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”>İLETİŞİM</a>
</div>
</body>
</head>
</html>
