채택완료

생초짜질문ㅠㅠ 그누 아웃로그인 css좀 봐주세요ㅜㅜ

2014-09-05 (금) 01:53:57 9,852

a38dc1b1bddcb3d47c06e1f2daca157d_1409849379_9949.JPG

비밀번호창을 아이디창이랑 같은크기로 만들고

코드입력 글자를 맨 밑칸 안에다 넣고싶은데 아무리 건드려봐도 안움직이네요ㅠㅠ

a38dc1b1bddcb3d47c06e1f2daca157d_1409849597_4985.JPG

PHP 이고


a38dc1b1bddcb3d47c06e1f2daca157d_1409849597_8297.JPG
 

CSS입니다

무슨기능을 하는지 함께 설명도 좀 부탁드립니다ㅠㅠ 이런건 처음해봐서..ㅠㅠ

|

답변 3개 / 댓글 2개

채택된 답변
+20 포인트
2014-09-09 (화) 12:01:48

그누5 기본 outlogin 스킨의 비밀번호 가로폭 104px은 css에서 주어지는것이 아니라

스크립트에서 부여합니다.

로그인스킨 파일을 여시고 하단에 보시면 <script>가 있을겁니다.

Copy
$omi = $('#ol_id');$omp = $('#ol_pw');$omp.css('display','inline-block').css('width',104);$omi_label = $('#ol_idlabel');$omi_label.addClass('ol_idlabel');$omp_label = $('#ol_pwlabel');$omp_label.addClass('ol_pwlabel'); $(function() {    $omi.focus(function() {        $omi_label.css('visibility','hidden');    });    $omp.focus(function() {        $omp_label.css('visibility','hidden');    });    $omi.blur(function() {        $this = $(this);        if($this.attr('id') == "ol_id" && $this.attr('value') == "") $omi_label.css('visibility','visible');    });    $omp.blur(function() {        $this = $(this);        if($this.attr('id') == "ol_pw" && $this.attr('value') == "") $omp_label.css('visibility','visible');    });     $("#auto_login").click(function(){        if ($(this).is(":checked")) {            if(!confirm("자동로그인을 사용하시면 다음부터 회원아이디와 비밀번호를 입력하실 필요가 없습니다.\n\n공공장소에서는 개인정보가 유출될 수 있으니 사용을 자제하여 주십시오.\n\n자동로그인을 사용하시겠습니까?"))                return false;        }    });}); function fhead_submit(f){    return true;}

위 소스에서 

Copy
$omp.css('display','inline-block').css('width',104); // 위부분을$omp.css('display','inline-block');//이렇게 바꿔주세요​​

그럼 현재 설정해둔 200px이 먹히실겁니다.

그리고 코드입력 label 은 

css 값을 주셔야합니다.

좀 번거로운 방법이지만, 아래소스를 css 파일에 넣으세요

#ol_colabel{

  1. positionabsolute;
  2. top72px;
  3. left5px;

}

그렇게하시면 원하시는 값이 나올겁니다.

감사합니다ㅜㅜ

Copy
<!-- 로그인 전 아웃로그인 시작 { --><section id="ol_before" class="ol">    <h2>회원로그인</h2>    <form name="foutlogin" action="<?php echo $outlogin_action_url ?>" onsubmit="return fhead_submit(this);    " method="post" autocomplete="off">    <fieldset>        <input type="hidden" name="url" value="<?php echo $outlogin_url ?>">        <label for="ol_id" id="ol_idlabel">아이디<strong class="sound_only">필수</strong></label>        <input type="text" id="ol_id" name="mb_id" required class="required" maxlength="20">        <label for="ol_pw" id="ol_pwlabel">비밀번호<strong class="sound_only">필수</strong></label>        <input type="password" name="mb_password" id="ol_pw" required class="required" maxlength="20">                <label for="ol_code" id="ol_colabel">코드입력<strong class="sound_only">필수</strong></label>        <input type="password" name="mb_code" id="ol_code" required class="required" maxlength="4">                <input type="submit" id="ol_submit" value="로그인">            </fieldset>    </form></section>

PHP

Copy
/* 아웃로그인 스킨 */.ol {position:relative;padding:15px 15px 14px 14px}.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 {float:right;margin:150px 150px 0 150px;}#ol_before fieldset {position:relative}#ol_id {display:block;margin:0 0 5px !important;margin:0 0 3px;padding:0 5px;width:200px;height:25px;border:1px solid #e4eaec;background:#f7f7f7;line-height:1.6em}.ol_idlabel {position:absolute;top:6px;left:5px;color:#333;font-size:0.95em}#ol_pw {display:block;margin:0 0 5px !important;margin:0 0 3px;padding:0 5px;width:200px;height:25px;border:1px solid #e4eaec;background:#f7f7f7;line-height:1.6em}.ol_pwlabel {position:absolute;top:35px;left:5px;color:#333;font-size:0.95em} #ol_code {margin:0 0 5px !important;margin:0 0 3px;padding:0 5px;width:120px;height:25px;border:1px solid #e4eaec;background:#f7f7f7;vertical-align:top;line-height:1.6em}.ol_colabel {position:absolute;top:55px;left:5px;color:#333;font-size:0.95em}  #ol_submit {margin-left:15px;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}

CSS

답변에 대한 댓글 1개

제가 올려서 해보니 input 이 정상적으로 보이네요.
개발중인 url 주소 좀 부탁드려요.

코드를 보여주실때 이미지로 올리지 마시고 

Copy
소스코드
​ 감싸서 올려보세요.

제가 한번 봐드릴께요

답변에 대한 댓글 1개

2014-09-05 (금) 13:19:27
http://longcares.cafe24.com/ 입니다 감사합니다ㅜ

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