생초짜질문ㅠㅠ 그누 아웃로그인 css좀 봐주세요ㅜㅜ
본문
비밀번호창을 아이디창이랑 같은크기로 만들고
코드입력 글자를 맨 밑칸 안에다 넣고싶은데 아무리 건드려봐도 안움직이네요ㅠㅠ
PHP 이고
CSS입니다
무슨기능을 하는지 함께 설명도 좀 부탁드립니다ㅠㅠ 이런건 처음해봐서..ㅠㅠ
답변 3
그누5 기본 outlogin 스킨의 비밀번호 가로폭 104px은 css에서 주어지는것이 아니라
스크립트에서 부여합니다.
로그인스킨 파일을 여시고 하단에 보시면 <script>가 있을겁니다.
$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;
}
위 소스에서
$omp.css('display','inline-block').css('width',104);
// 위부분을
$omp.css('display','inline-block');
//이렇게 바꿔주세요
그럼 현재 설정해둔 200px이 먹히실겁니다.
그리고 코드입력 label 은
css 값을 주셔야합니다.
좀 번거로운 방법이지만, 아래소스를 css 파일에 넣으세요
#ol_colabel{
- position: absolute;
- top: 72px;
- left: 5px;
}
그렇게하시면 원하시는 값이 나올겁니다.
코드를 보여주실때 이미지로 올리지 마시고
감싸서 올려보세요.
소스코드제가 한번 봐드릴께요
http://longcares.cafe24.com/ 입니다 감사합니다ㅜ
감사합니다ㅜㅜ
<!-- 로그인 전 아웃로그인 시작 { -->
<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
/* 아웃로그인 스킨 */
.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
제가 올려서 해보니 input 이 정상적으로 보이네요.
개발중인 url 주소 좀 부탁드려요.
답변을 작성하시기 전에 로그인 해주세요.