KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

메뉴 css질문여...

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
KCP 이벤트!
메뉴 css질문여...

QA

메뉴 css질문여...

본문

상단 메뉴를 다음과 같이 하였습니다.

<div id="gnb" >
    <ul>
    <!--상단 로고를 좌측으로 출력-->
    <div style="float:left; vertical-align:middle">
    <a href="http://rgm01.cafe24.com/shop/">
    <img src="http://rgm01.cafe24.com/data/common/mobile_logo_img" width="100%" alt="RGM - ED generic 메인">
    </a></div>
    <!--상단 로고를 좌측으로 출력 끝-->
        <li class="gnb_1dli" style="z-index:999">
        <a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr10" class="gnb_1da">
  1번메뉴</a>
    </li>

        <li class="gnb_1dli" style="z-index:998">
        <a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr20" class="gnb_1da">
  2번메뉴</a>
    </li>

        <li class="gnb_1dli" style="z-index:997">
        <a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr30" class="gnb_1da">
  3번메뉴</a>
    </li>

        <li class="gnb_1dli" style="z-index:996">
        <a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr40" class="gnb_1da">
  4번메뉴</a>
    </li>

        <li class="gnb_1dli" style="z-index:995">
        <a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr50" class="gnb_1da">
  5번메뉴</a>
    </li>

            <li class="gnb_1dli" style="z-index:994"><a href="/bbs/board.php?bo_table=feedback">
    6번메뉴</a></li>
        </ul>

</div>

 

위와 같이 하였을때 컴퓨터 브라우져로 보면 잘나오는데...

핸드폰으로 볼때 로고 밑으로 1번메뉴~6번메뉴가 나오게 할순없나요??

현재는 핸드폰으로 메뉴옆에 로고가 떠요..ㅜㅜ

css
이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 2

채택됨

하이바네님의 답변

1794652227_1539314199.1603.png

 

왼쪽이 모바일이구 오른쪽이 pc인데 모바일에서는 RGM글자 아래에 메뉴가 뜨게 하고싶다는 말씀이신건가요?

이게 맞는지 모르겠지만;;media query를 활용해서 수정하시면 될 것 같아요. 아래는 예시 입니다.

/*추가*/
.gnb_logo_wrapper{
  float:left;
  vertical-align:middle;
}
/*767픽셀까지는 float none 적용*/
@media (max-width:767px){
  .gnb_logo_wrapper{
    float:none
  }
}
 
<div class='gnb_logo_wrapper'><!--기존 style삭제하고 class로 대체-->
<a href="http://rgm01.cafe24.com/shop/">
<img src="http://rgm01.cafe24.com/data/common/mobile_logo_img" width="100%" alt="RGM - ED generic 메인">
</a></div>
주소복사
채택됨
답변의 댓글

하이바네님의 답변

css 적힌 부분도 같이 올려주실 수 있나요? 지금 상태로 봐서는 "로고 메뉴" 이 순서로 뜨는거 같은데;;

주소복사
답변의 댓글
주니재니님의 댓글
css
/* gnb */
#gnb{border-bottom:1px solid #d8d8d8;border-top:1px solid #eee; background:#f3d857;}
#gnb li{display:inline-block;}
#gnb li a{line-height:60px;font-size:12px;padding:0 ;display:block;font-weight:bold;transition: all 0.2s;letter-spacing:1px;vertical-align:top}
#gnb li a:hover{background:#f3f3f3}
#gnb ul{border:0;vertical-align:top}
#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}

.gnb_1da {font-weight:bold;text-decoration:none; font-family:"나눔고딕"; font-size:16px; color:#214f28;}
.gnb_1dli_on .gnb_1da {background:url('../shop/img/gnb_bg01.gif') #626870 center right no-repeat;color:#fff;text-decoration:none}

제가 css잘몰라 검색어에서 class값만 올렸습니다. ^^;;;
답변을 작성하시기 전에 로그인 해주세요.
전체 92,607 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT