회원이미지 위치 설정

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
회원이미지 위치 설정

QA

회원이미지 위치 설정

본문

사진과같이 두줄로 하면 이미지가 정상적으로 나오나

한줄로 적으면 위치가이상하게나옵니다.

회원이미지 위치가 고정된거같은데 어떻게 수정해야 할까요... 조언좀주세요

테스트용계정:test1/test

3531187084_1517404238.9348.png

이 질문에 댓글 쓰기 :

답변 4

<span class="sound_only">작성일</span><i class="fa fa-clock-o" aria-hidden="true"></i> 18-01-31 18:29</strong>

 

이 줄 다음에 

 <section id="bo_v_info_img" ~</section>  입력하시고 

 

http://jicinside.com/theme/community2/skin/board/mov/style.css?ver=171222 

mov 스킨 파일 css 에서 


#bo_v_info {padding: 10px 0 15px;margin:0 0 20px;border-bottom:1px solid #ddd;color:#666; position:relative => 이부분 추가   }

/* 본문 회원이미지 추가하기 추가 */

#bo_v_info_img {position:absolute;top:70px;right:20px}=>

 

#bo_v_info_img {position:absolute;top:-25px;right:0px} 으로 수정해보세요

 

이렇게 해도 제목이 두줄이 되면 가려질 것같긴하네요 

#bo_v_title{ width:80%  정도로 가로사이즈 지정해주세요 

<section id="bo_v_info_img"                 
<?php
                    $mb_dir = substr($view[mb_id],0,2);
                    $icon_file = G5_DATA_PATH.'/member_image/'.$mb_dir.'/'.$view[mb_id].'.gif';
                    if (file_exists($icon_file)) {
                    $icon_url = G5_DATA_URL.'/member_image/'.$mb_dir.'/'.$view['mb_id'] .'.gif';
                    echo '<img src="'.$icon_url.'" alt="">';   
                    } else {
                    $icon_url = G5_URL.'/img/no_profile.gif';
                    echo '<img src="'.$icon_url.'" alt="">';
                    }
                ?> </section>
이렇게추가하면되나요?

--
추가하고나니 이것도 제목을가리네요 ㅠ

<article id="bo_v" style="width:<?php echo $width-10; ?>%">
    <header>
        <h2 id="bo_v_title">
            <?php if ($category_name) { ?>
            <span class="bo_v_cate"><?php echo $view['ca_name']; // 분류 출력 끝 ?></span>
            <?php } ?>
            <span class="bo_v_tit">
            <?php
            echo cut_str(get_text($view['wr_subject']), 70); // 글제목 출력
            ?></span>
        </h2>
    </header>
위소스코드에서
$width-10 -> $width 로 바꾸니 제목은 가리지않는데 이렇게 수정해도 별문제없나요?
또는 $width-11~ 까지하니 밑에줄 포함에서 줄어들어 적용되는거 같은데

#bo_v_info_img

top:70px => top:30px 정도로 수정

 

관련 파일

http://jicinside.com/theme/community2/skin/board/mov/style.css?ver=171222

임시 적인 해결책으로 아래와 같이 가능합니다


#bo_v_info_img {
    position: initial;
    top: 0;
    right: 0;
    margin: -81px -31px 0 0;
    float: right;
}

 

그리고 전체적 요소의 위치를 효율적으로 배치하고

구조적인 CSS 를 구성해

추후 유지보수가 쉽도록 만드는 것이 좋습니다.

일단 <section id="bo_v_info"> 안으로 해당 이미지를 옮기세요.

그리고 section 태그는 구조적으로 나누는 용도로 쓰이기때문에 bo_v_info_img에 section을 이용하시는 것보다 의미적으로도 bo_v_info 안에 (글쓴이 정보 나열되는 곳에 프로필사진도 나열되야겠죠.) <div>이나 <span> 이용해서 작성하시고요.

 

#bo_v_info 에 position: relative 주셔서 기준점으로 잡으시고요.

bo_v_info_img 를 그 안에서 움직이시면 되겠습니다. 

답변을 작성하시기 전에 로그인 해주세요.
전체 19
QA 내용 검색

회원로그인

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