목록으로

최상단 띠 배너 겹쳐서 안보이는 현상 도와주세요 ㅠㅠ 채택완료

티에스

프로필 보기 이 회원 글보기 이 회원의 댓글보기

8년 전 조회 6,535

답변 8

안녕하세요 아래 그림처럼 상단 띠 배너를 사용하고 싶은데 상단 메뉴가 고정형이라서 그런지 위에 그럼처럼 뒤에 겹쳐서 안보입니다...

아래 그림은 상단 띠배너가 메뉴에 겹쳐있는 모습이구요..

이건 css에서 고정되어 있는 position:fixed; 수정하니까 아래 그림처럼 나오긴 하는데...

쇼핑몰 하단으로 내릴때 아래 그림처럼 상단에 고정되있는 카테고리가 아이에 사라져서 어떻게 해야될지 모르겠네요... 고수님들 제발 도와주세요 ㅠㅠ (**이 그림은 원래 스크롤바를 내리면 고정되어있는 카테고리 입니다.)

css

.UIF_TopBanner { position:relative; overflow:hidden; text-align:center; background:pink; }

.UIF_TopBanner .bannerLink { display:block; }

.UIF_TopBanner .btnClose { position:absolute; top:5px; left:50%; margin-left:590px; margin-bottom:100px; }

#UIF_HeaderWrap_Root {

position:fixed;

width:100%;

top:0;

z-index:180;

background:rgba(255,255,255,0.95);

}

#UIF_HeaderWrap_A, #UIF_HeaderWrap_B, #UIF_HeaderWrap_C {

-webkit-transition: all 0.4s;

-moz-transition: all 0.4s;

transition: all 0.4s;

}

#UIF_HeaderWrap_A { width:100%; border-top:3px solid #909090; border-bottom:1px solid #EAEAEA; background:#F6F6F6 }

#UIF_HeaderWrap_B { width:100%; height:118px; opacity:1; -webkit-transition: height 0.4s opacity 0.4s; -moz-transition: height 0.4s opacity 0.4s; transition: height 0.4s opacity 0.4s; }

#UIF_HeaderWrap_C { width:100%; height:57px; border-top:1px solid #909090; border-bottom:1px solid #909090; }

#UIF_HeaderWrap_A > .HeaderWrap_Inner { position:relative; width:1100px; height:34px; margin:0 auto; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }

#UIF_HeaderWrap_B > .HeaderWrap_Inner { position:relative; width:1100px; margin:0 auto; }

#UIF_HeaderWrap_C > .HeaderWrap_Inner { position:relative; width:1100px; margin:0 auto; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }

#UIF_HeaderWrap_Root.ScrollC_ON #UIF_HeaderWrap_B {

height:0;

opacity:0;

overflow:hidden;

-webkit-transition: all 0.4s;

-moz-transition: all 0.4s;

transition: all 0.4s;

-webkit-transition-delay: 0.2s;

-moz-transition-delay: 0.2s;

transition-delay: 0.2s;

}

#UIF_HeaderWrap_Root.ScrollC_ON #UIF_HeaderWrap_C { box-shadow:0 2px 2px rgba(0,0,0,0.2); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }

#UIF_HeaderWrap_Root.ScrollC_ON #UIF_HeaderWrap_C .downLogo { opacity:1; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }

#UIF_HeaderWrap_Root.ScrollC_ON #UIF_HeaderWrap_C .MenuAll { left:50px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }

#UIF_LayoutWrap { margin:0 auto; width:1100px; margin-top:231px;}

#UIF_ContentsWrap { position:relative; }

#UIF_ContentsWrap #UIF_Contents { position:relative; }

#banner { position:absolute; top:0; left:-95px; width:90px; display:none; }

#quick,

#quick_fixed { position:absolute; top:20px; left:25px; width:70px; }

#UIF_CommWrap { background:#f3f3f3; margin-top:50px; }

#UIF_BannerWrap { background:#f3f3f3; }

#UIF_FooterWrap { position:relative; background:#909090; }

.UIF_InnerWrap { position:relative; margin:0 auto; padding:50px 0; width:1100px; text-align:center; }

.UIF_LayoutUpWrap { margin:0 -20px; } /* width 1140으로 확장 */

.overflowhidden { overflow:hidden !important; }

html

</div>

</a>

</div>

<div>

<ul>

<li><a module="Layout_bookmark" href="/link/bookmark.html" target="_blank" onclick="winPop(this.href); return false;"><span>BOOKMARK</span></a></li>

<li><a module="Layout_shortcut" href="/link/shortcut.html" target="_blank" onclick="winPop(this.href); return false;">QUICK LINK</a></li>

</ul>

</div>

<li><a>MULTI SHOP</a></li>

</ul>

<li>

<span>{$locale_language}</span>

<span>{$currency_code}</span>

</a>

</li>

<li>

<span>{$locale_language}</span>

<span>{$currency_code}</span>

</a>

</li>

</ul>

</div>

</nav>

<ul>

<li><a href="/member/login.html" class="fa-sign-in"><span class="txt">LOGIN</span></a></li>

</ul>

</div>

<ul>

<li><a href="{$action_logout}"><span class="fa-sign-out"/><span class="txt">LOGOUT</span></a></li>

</ul>

</div>

</nav>

</div>

</div>

</div>

<h2>전체상품카테고리</h2>

<!--

$product_page=/product/detail.html

$category_page=/product/list.html

-->

{$form.keyword}

</div>

new UISearch( document.getElementById( 'UIF_SearchBar' ) );

</script>

</ul>

</div>

#상단 #상단배너 #띠배너

답변 8개

정렬:

채택된 답변

+20 포인트

뚜찌빠찌

프로필 보기 이 회원 글보기 이 회원의 댓글보기

8년 전

Copy

위 상단 띠배너 자체를

UIF_HeaderWrap_Root 내부에 넣어 주심면 될것 같은데요 ?

<div class="UIF_TopBanner">.....</div> --- 여기서 아래로 이동

<div id="UIF_HeaderWrap_Root" class="">

<div class="UIF_TopBanner">.....</div> --- 여기로

<div id="UIF_HeaderWrap_A">......</div>

<div id="UIF_HeaderWrap_B">......</div>

<div id="UIF_HeaderWrap_C">......</div>

</div>

이런식으로요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�

티에스

프로필 보기 이 회원 글보기 이 회원의 댓글보기

8년 전

정말 감사합니다. 상단 띠배너는 적용이 되는데 이걸 적용하니까 아래 그림 처럼 메뉴카테고리와 상단 메인배너 이미지가 늘어난만큼 겹쳐지는데 혹시 이건 어떻게 하는건지 알수있을까요?? ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

delaluna

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전

안녕하세요 홈페이지 오른쪽 스크롤배너 소스좀 부탁드려도될까요?

열고 닫는 배너를 저희 홈페이지에도 적용해보려고하는데 소스찾기가 힘드네요ㅠㅠ

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�

뚜찌빠찌

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전

https://www.w3schools.com/howto/howto_js_sidenav.asp

댓글을 작성하려면 로그인이 필요합니다.

티에스

프로필 보기 이 회원 글보기 이 회원의 댓글보기

8년 전

와 정말정말정말 감사합니다 ㅠㅠ 덕분에 해결했습니다!!!ㅠㅠ 감사합니다!!!! 좋은하루되세요ㅠㅠ!!

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

티에스

프로필 보기 이 회원 글보기 이 회원의 댓글보기

8년 전

해봤는데 별다른 반응은 없네요 ㅠㅠ 혼자서 정말 막막했는데 그래도 정말 친절하게 답변해주셔서 감사합니다!!!ㅠㅠ

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

�

뚜찌빠찌

프로필 보기 이 회원 글보기 이 회원의 댓글보기

8년 전

#UIF_LayoutWrap {
margin: 0 auto;
width: 1100px;
margin-top: 280px;
}
이렇게 한 상태에서

<a href="#none" class="btnClose" onClick="document.getElementById('UIF_LayoutWrap').style.marginTop = '230px';" >

이렇게 한번 해보시겠어요?

�

뚜찌빠찌

프로필 보기 이 회원 글보기 이 회원의 댓글보기

8년 전

js 파일에 아래와같은 코드가 있을겁니다.....( 어디서 어떻게 찾는지는 저도 잘 몰라서 )

찾으시면

/* 상단 배너 js */
var bannerFunc = function(){
$('.UIF_TopBanner .btnClose').bind("click", function(){
$('.UIF_TopBanner').animate({height: 0}, 500);
$('#UIF_LayoutWrap').animate({marginTop: 230}, 500); // 이부분 추가해 보세요.
});
};

제발 되었으면 좋겠네요 . ㅎㅎㅎㅎㅎㅎㅎ

댓글을 작성하려면 로그인이 필요합니다.

티에스

프로필 보기 이 회원 글보기 이 회원의 댓글보기

8년 전

혹시 맨 아래라는게 적용 위치가 어디 아래를 말씀하시는건가요?;;

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�

뚜찌빠찌

프로필 보기 이 회원 글보기 이 회원의 댓글보기

8년 전

<div id="UIF_CommWrap" class="clearboth"> --- 여기 안쪽이면 되지않을까 싶습니다.

<script>
$( ".btnClose" ).on( "click", function() {
$( "#UIF_LayoutWrap" ).css("margin-top","230px");
});
</script>