사용자 정의 헤더에 HTML 블록을 처음 사용했는데 보기에 좋지 않습니다. 도와주세요!
게시 됨: 2023-08-09안녕!
Astra의 테마 도구가 원하는 만큼 좋지 않기 때문에 이 사이트의 사용자 정의 헤더로 작업하고 있습니다. 나는 아직도 웹 개발을 위한 코드를 배우고 있으며 HTML의 이 사용자 정의 헤더는 지금까지 나의 주요 프로젝트입니다.
헤더를 시각화하기 위해 Visual Studio Code 및 Google Chrome을 사용했습니다. 나는 Astra 테마 사용자 정의의 헤더 빌더에서 해당 HTML 코드를 "HTML 블록"으로 가져오는 것이 완벽한 계획이라고 생각했습니다. 너비가 블록에 의해 제한될 것이라고는 예상하지 못했습니다.
**내 헤더에는 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-요소
폭: 100vw;
**이제 헤더는 다음과 같습니다.**
https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e
오른쪽의 요소가 사라지고 "CONTACTO" 블록이 아래쪽으로 조금 이동되었습니다.
편집: <br> 태그로 인해 발생한 "CONTACTO" 문제를 맨 아래로 이동하여 해결했습니다. CSS를 사용하여 삭제했으므로 문제가 해결되었습니다!
왜?
내 HTML 코드에 문제가 있는지, 아니면 HTML 블록을 사용할 때 발생하는 문제인지는 잘 모르겠습니다. 다른 방법으로 해결해야 합니다. 나는 완전히 길을 잃었습니다.
많은 도움을 주시면 감사하겠습니다!!!
**헤더에 대한 HTML 코드를 공유합니다:**
<html>
<머리>
<script src=”https://kit.fontawesome.com/4d7716fb70.js” crossorigin=”anonymous”></script>
<스타일>
.cabecera-navbar-principal
오버플로: 숨김;
배경색: #fff;
글꼴 모음: Montserrat;
.cabecera-navbar-principal a
왼쪽으로 뜨다;
글꼴 크기: 16px;
글꼴 두께: 600;
색상: #424242;
텍스트 정렬: 중앙;
패딩: 15px 15px;
텍스트 장식: 없음;
.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:hover .cabecera-dropdown-content
디스플레이: 블록;
.cabecera-열
왼쪽으로 뜨다;
너비: 19%;
왼쪽 패딩: 10px;
배경색: #fff;
높이: 450px;
.cabecera-열 a
플로트: 없음;
색상: #424242;
텍스트 장식: 없음;
디스플레이: 블록;
텍스트 정렬: 왼쪽;
.columnas-marcas
왼쪽으로 뜨다;
너비: 100%;
왼쪽 패딩: 20px;
오른쪽 패딩: 20px;
패딩 상단: 20px;
패딩 하단: 0px;
배경색: #fff;
높이: 450px;
줄 높이: 0.1;
열: 4;
.columnas-marcas a
플로트: 없음;
색상: #424242;
텍스트 장식: 없음;
디스플레이: 블록;
텍스트 정렬: 왼쪽;
.cabecera-row:이후
콘텐츠: "";
디스플레이: 테이블;
명확함: 둘 다;
.cabecera-categoria-padre
글꼴 크기: 1.17em !중요;
글꼴 두께: 굵게!중요;
여백 상단: 0.3em;
테두리 하단: 1px 솔리드 #E3E3E3;
</style>
<본문>
<div 클래스=”cabecera-navbar-principal”>
<div 클래스=”카베세라-드롭다운”>
<button class=”cabecera-dropbtn” onclick=”window.location.href='/productos'”>제품 <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242; ”></i></버튼>
<div 클래스=”카베세라-드롭다운-콘텐츠”>
<div 클래스=”카베세라 행”>
<div 클래스=”카베세라-열”>
<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”>SISTEMAS DE AUDIO</a>
</div>
<div 클래스=”카베세라-열”>
<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 클래스=”카베세라-열”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/hogar”>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 클래스=”카베세라-열”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/linea-blanca”>LINEA BLANCA</a>
<a href=”/categoria-producto/linea-blanca/cafeteras”>카페테라스</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”>리쿠아도라</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 클래스=”카베세라-열”>
<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”>REPRODUCTORES DVD</a>
</div>
</div>
</div>
</div>
<div 클래스=”카베세라-드롭다운”>
<button class=”cabecera-dropbtn”>MARCAS <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242;”></i></button>
<div 클래스=”카베세라-드롭다운-콘텐츠”>
<div 클래스=”카베세라 행”>
<div 클래스=”columnas-marcas”>
<a href=”/categoria-producto/marca/aiwa”>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”>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”>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”>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”>MICROSOFT</a>
<a href=”/categoria-producto/marca/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”>라이벌</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”>STEELPRO</a>
<a href=”/categoria-producto/marca/tcl”>TCL</a>
<a href=”/categoria-producto/marca/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”>웨스팅하우스</a>
</div>
</div>
</div>
</div>
<a href=”/ayuda”>아유다</a>
<a href=”/contacto”>연락처</a>
</div>
</body>
</head>
</html>
