로그인 입력하는 부분을 줄이고 싶은데요.

로그인 입력하는 부분을 줄이고 싶은데요.

QA

로그인 입력하는 부분을 줄이고 싶은데요.

답변 1

본문

ff4ce6c4be05c1b50985c756317d8074_1421372315_1217.jpg
아이디 입력부분과 비밀번호 부분을 줄이려고 하는데요.

어디서 수정을 해야 할까요?

 

파일을 봐도 모르겠어요. ㅜㅜ

이 질문에 댓글 쓰기 :

답변 1

보통 /skin/outlogin/스킨명/style.css 파일에 있습니다.

스킨이 뭔지 모르겠지만 basic 스킨을 기준으로 하면 해당 css 파일에 #ol_id 이 부분 찾으셔서 width를 조절하시면 됩니다. 



@charset "utf-8";
/* SIR 지운아빠 */

/* 아웃로그인 스킨 */
.ol {position:relative;padding:15px 15px 14px 14px;border-bottom:1px solid #dde4e9}
.ol h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
.ol ul {margin:0;padding:0;list-style:none}

.ol a.btn_admin {display:inline-block;padding:0 10px;height:23px;border:1px solid #e8180c;background:#e8180c;color:#fff;text-decoration:none;line-height:2.15em;vertical-align:middle} /* 관리자 전용 버튼 */
.ol a.btn_admin:focus, .ol a.btn_admin:hover {text-decoration:none}

#ol_before {background-color:#f3f4f3; font-family:굴림;}
#ol_before fieldset {position:relative}


#ol_id {display:block; margin:0 0 3px !important; margin:0 0 3px; padding:0 5px; width:110px; height:20px;border:1px solid #bebebe; background-color::#fff; line-height:1.6em;}
.ol_idlabel {position:absolute; top:6px; left:5px; color:#6b6d70; font-size:11px;}
#ol_pw {display:block; margin:0 0 5px !important; margin:0 0 3px; padding:0 5px; width:110px; height:20px; border:1px solid #bebebe; background:#fff; vertical-align:top; line-height:1.6em}
.ol_pwlabel {position:absolute; top:31px; left:5px; color:#6b6d70; font-size:11px;}

#auto_login {}
#auto_login_label {letter-spacing:-0.1em}
#ol_submit {display:inline-block;width:60px;height:24px;border:0;background:#333;color:#fff;font-size:0.9em;font-weight:bold;vertical-align:top}
#ol_before a {letter-spacing:-0.15em}
#ol_svc {float:left;margin:5px 0 0}
#ol_password_lost {display:inline-block;margin:0 0 0 5px}
#ol_auto {position:relative; float:left; font-size:11px; color:#5f6164; margin:3px 0;}
#ol_auto label {letter-spacing:-0.1em}
#ol_auto input {width:13px;height:13px;vertical-align:bottom}

#ol_after {background-color:#f3f4f3; font-family:굴림;}
#ol_after_hd {margin:0 0 3px}
#ol_after_hd .btn_admin {margin-top:5px;width:158px;text-align:center}
#ol_after_private {font-size:11px;}
#ol_after_private:after {display:block;visibility:hidden;clear:both;content:""}
#ol_after_private li {float:left}
#ol_after_memo {width:50px;margin-right:1px}
#ol_after_pt {width:80px;margin-right:1px}
#ol_after_scrap {width:48px;line-height:2.6em !important}
#ol_after_ft {text-align:justify}
#ol_after_ft a {display:inline-block;width:88px;height:25px;background:#333;color:#fff;text-align:center;line-height:2.2em}
#ol_after_ft a:focus, #ol_after_ft a:hover {text-decoration:none !important}

.ol_top {width:100%; overflow:hidden; font-size:11px; padding-bottom:3px;}
.ol_top .ol_join {float:left;}
.ol_top .ol_join a {color:#5f6164;}
.ol_top .ol_password {float:right;}
.ol_top .ol_password a {color:#5f6164;}

.ol_area {width:100%; overflow:hidden;}
.ol_area .Left {float:left; width:115px;}
.ol_area .Right {float:right;}



#ol_id {display:block; margin:0 0 3px !important; margin:0 0 3px; padding:0 5px; width:110px; height:20px;border:1px solid #bebebe; background-color::#fff; line-height:1.6em;}
.ol_idlabel {position:absolute; top:6px; left:5px; color:#6b6d70; font-size:11px;}
#ol_pw {display:block; margin:0 0 5px !important; margin:0 0 3px; padding:0 5px; width:110px; height:20px;

이부분을 수정하면 높이는 수정이되는데 width:110px 넓이가 줄어 들지 않아서요.

css파일에서

.ol_area .Left {
    float: left;
    width: 110px;
}
여기에 width 90 정도 잡아 주시고


이제 아웃로그인 파일
<input type="text" maxlength="10" class="required" required="" name="mb_id" id="ol_id" style="display: inline-block; width: 110px;">
여기에 110을 대충 85 정도로 하시고

<input type="password" maxlength="10" class="required" required="" id="ol_pw" name="mb_password" style="display: inline-block; width: 110px;">
여기도 마찬가지로 width를 85 정도로 잡으면 옆에 로그인 버튼이 위로 올라갈 듯합니다.

답변 정말 감사합니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 6
© SIRSOFT
현재 페이지 제일 처음으로