테스트 사이트 - 개발 중인 베타 버전입니다

회원이미지 위치 설정 채택완료

최지석 7년 전 조회 2,475

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

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

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

테스트용계정:test1/test

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

답변 4개

채택된 답변
+20 포인트
j
7년 전

작성일 18-01-31 18:29

 

이 줄 다음에 

 

  입력하시고 

 

http://jicinside.com/theme/community2/skin/board/mov/style.css?ver=171222" target="_blank">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%  정도로 가로사이즈 지정해주세요 

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

답변에 대한 댓글 9개

최지석
7년 전
<section id="bo_v_info_img" ~</section>
위소스에서 ~ 이건뭔가요?
j
janedoe
7년 전
회원 이미지 출력 코드요
그부분을 붙여 넣으시면 됩니다 아 .. 옮겨놓는 다는 표현이 맞겠네요
최지석
7년 전
<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>
이렇게추가하면되나요?

--
추가하고나니 이것도 제목을가리네요 ㅠ
j
janedoe
7년 전
네 그부분을 작성일 나오는 부분 다음 줄로 옮기세요
최지석
7년 전
<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~ 까지하니 밑에줄 포함에서 줄어들어 적용되는거 같은데
j
janedoe
7년 전
네 그런데 그냥 width : 대강의 길이 px 이런 식으로 쓰셔도 됩니다 <?php echo ... ?> 이부분 지우시고요
최지석
7년 전
http://jicinside.com/bbs/board.php?bo_table=free&wr_id=1
위게시판도 똑같이수정하면되겠죠? 좋은 답변감사합니다
j
janedoe
7년 전
네 같은 방법으로 하시면 될 것같아요
안되시면 다시 질문 올려주세요
최지석
7년 전
수정이안됩니다 ㅠㅠ 재질문드려요...

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

일단

안으로 해당 이미지를 옮기세요.

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

이나 이용해서 작성하시고요.

 

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

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

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

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

7년 전

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

</p>

<p>#bo_v_info_img {

    position: initial;

    top: 0;

    right: 0;

    margin: -81px -31px 0 0;

    float: right;

}</p>

<p>

 

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

구조적인 CSS 를 구성해

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

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

답변에 대한 댓글 1개

최지석
7년 전
임시방편감사합니다. 허나 이렇게 진행해도 제목을가리네요 ㅠㅠ

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

베원
7년 전
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

최지석
7년 전
제목을가리네요 ㅠㅠ 동적으로 할당은않될까요?

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

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

로그인