css 문제 같은데 도움좀 부탁드립니다
본문
모바일에서 사이트 우측에 아이콘 같은 메뉴가 따라다니게 해놨는데요
아이콘 우측 상단에 숫자를 넣어주려고 합니다.
그런데 css 실력이 부족하여 처리가 안되네요.. 도움좀 부탁드립니다.
이것이 현재 소스이고 저기서 12라는 숫자를 아래 이미지 처럼 아이콘 오른쪽 상단에 겹쳐지게 하고
싶거든요.ㅜㅜ
아래형태로요
아래소스 첨부합니다...
도움좀 부탁드립니다..
<?php if(G5_IS_MOBILE) { // 사이트 좌측 스크롤 ?>
<style>
/* Mobile 카카오톡 상담 버튼 스타일 */
.floBanMob1 {
position: fixed;
bottom: 275px; /* 아래 끝에서부터의 거리 */
right: 20px; /* 오른쪽 끝에서부터의 거리 */
z-index: 99;
}
/* Mobile 전화상담 버튼 스타일 */
.floBanMob2 {
position: fixed;
bottom: 200px; /* 아래 끝에서부터의 거리 */
right: 20px; /* 오른쪽 끝에서부터의 거리 */
z-index: 99;
}
.fa-stack .fa-bars {border-radius:75px;font-size:28px; opacity: 0.7;background-color: #000; color:#fff;}
.fa-stack .fa-search {border-radius:75px;font-size:28px; opacity: 0.7;background-color: #000; color:#fff}
</style>
<div class="floBanMob1 hidden-lg">
<span class=fa-stack>
<a href="javascript:;" onclick="sidebar_open('sidebar-user');">
<i class="fa fa-bars fa-2x fa-border"></i>
12개
</a>
</span>
</div>
<div class="floBanMob2 hidden-lg">
<span class=fa-stack>
<a href="javascript:;" onclick="sidebar_open('sidebar-search');">
<i class="fa fa-search fa-2x fa-border"></i>
</a>
</span>
</div>
<?php } ?>
답변 1
<?php if(G5_IS_MOBILE) { // 사이트 좌측 스크롤 ?>
<style>
/* Mobile 카카오톡 상담 버튼 스타일 */
.floBanMob1 {
position: fixed;
bottom: 275px; /* 아래 끝에서부터의 거리 */
right: 20px; /* 오른쪽 끝에서부터의 거리 */
z-index: 99;
}
.floBanMob1 a {position: relative;}
.floBanMob1 a span {position: absolute; font-size : 10px; background-color: #fff; border : solid 1px #000; padding : 2px 4px; border-radius: 2px; top : -20px; right : -5px; line-height: 8px;}
/* Mobile 전화상담 버튼 스타일 */
.floBanMob2 {
position: fixed;
bottom: 200px; /* 아래 끝에서부터의 거리 */
right: 20px; /* 오른쪽 끝에서부터의 거리 */
z-index: 99;
}
.fa-stack .fa-bars {border-radius:75px;font-size:28px; opacity: 0.7;background-color: #000; color:#fff;}
.fa-stack .fa-search {border-radius:75px;font-size:28px; opacity: 0.7;background-color: #000; color:#fff}
</style>
<div class="floBanMob1 hidden-lg">
<span class=fa-stack>
<a href="javascript:;" onclick="sidebar_open('sidebar-user');">
<i class="fa fa-bars fa-2x fa-border"></i>
<span>12개</span>
</a>
</span>
</div>
<div class="floBanMob2 hidden-lg">
<span class=fa-stack>
<a href="javascript:;" onclick="sidebar_open('sidebar-search');">
<i class="fa fa-search fa-2x fa-border"></i>
</a>
</span>
</div>
<?php } ?>
픽셀같은건 조금씩 조정해주셔야 할것입니다.
너무 감사합니다~~~
엄청해멨는데 ..ㅜㅜ 공부열심히 하겠습니다~