슬라이딩 로그인 질문 입니다... > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

슬라이딩 로그인 질문 입니다... 정보

슬라이딩 로그인 질문 입니다...

본문

안녕하세요...

슬라이딩 메뉴를 이용하고 만들고있는데...

좀 더 수정하고자 하는데...초보다보니 생각데로 안되어

질답 게시판에 올려 봅니다..ㅋ

위 이미지를 보시면 로그인 창 가운데에 공백이있는데...

공백없이 이어지게 붙이고싶습니다...

아시는분의 답변 부탁 드리겠습니다...

감사합니다..^^


-------------------------- .css 소스 ---------------------------


/*
Name: Nice Login and Signup Panel using Mootools 1.2
Tutorial URI: http://web-kreation.com/demos/login_form_mootools_1.2/
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Date: August 2008

The CSS, XHTML and design is released under Creative Common License 2.5:
http://creativecommons.org/licenses/by-sa/2.5/

*/

/* Login Panel */
#top {
  background: url(../img/login_top.jpg) repeat-x 0 0;
height: 38px;
position: relative;
}

#top ul.login {
display: block;
position: relative;
  float: right;
  clear: right;
  height: 38px;
width: auto;
  font-weight: bold;
line-height: 38px;
margin: 0;
right: 150px;
  color: white;
  font-size: 80%;
text-align: center;
  background: url(../img/login_r.jpg) no-repeat right 0;
padding-right: 45px;
}

#top ul.login li.left {
  background: url(../img/login_l.jpg) no-repeat left 0;
  height: 38px;
width: 45px;
padding: 0;
margin: 0;
  display: block;
float: left;
}

#top ul.login li {
  text-align: left;
  padding: 0 6px;
display: block;
float: left;
height: 38px;
  background: url(../img/login_m.jpg) repeat-x 0 0;
}

#top ul.login li a {
color: #33CCCC;
}

#top ul.login li a:hover {
color: white;
}

/*Login*/
/* toggle effect - show/hide login*/
#login {
width: 100%;
color: white;
background: #000000;
overflow: hidden;
position: relative;
z-index: 3;
height: 0;
}

#login a {
text-decoration: none;
color: #33CCCC;
}

#login a:hover {
color: white;
}

#login .loginContent {
width: 850px;
height: 40px;
margin: 0 auto;
padding-top: 25px;
text-align: left;
font-size: 0.85em;
}

#login .loginContent .left {
width: 120px;
float: left;
padding-left: 65px;
font-size: 0.95em;
}

#login .loginContent .right {
width: 290px;
float: right;
text-align: right;
padding-right: 65px;
font-size: 0.95em;
}

#login .loginContent form {
margin: 0 0 10px 0;
height: 26px;
}

#login .loginContent input.field {
border: 1px #1A1A1A solid;
background: #464646;
margin-right: 5px;
margin-top: 4px;
color: white;
height: 16px;
}

#login .loginContent input:focus.field {
background: #545454;
}

#login .loginContent input.rememberme {
border: none;
background: transparent;
margin: 0;
padding: 0;
}

#login .loginContent input.button_login {
width: 47px;
height: 20px;
cursor: pointer;
border: none;
background: transparent url(../img/button_login.jpg) no-repeat 0 0;
}

#login .loginClose {
display: block;
position: absolute;
right: 15px;
top: 10px;
width: 50px;
font-size: 0.8em;
text-align: left;
}

#login .loginClose a {
display: block;
width: 100%;
height: 20px;
background: url(../img/button_close.jpg) no-repeat right 0;
padding-right: 10px;
border: none;
font-size: 0.9em;
color: white;
}

#login .loginClose a:hover {
background: url(../img/button_close.jpg) no-repeat right -20px;
}
  • 복사

댓글 전체

css 문제가 아니라 jquery 문제 입니다
하단에 보시면
 <script language="javascript">
$(function(){
  $("#toggleLogin").toggle(function(){
        $("#login").parent("div").animate({ height : 105 } , 520 );
$("#login").animate({marginTop : 0 } , 100 );
$(this).blur();
  },function(){
    $("#login").parent("div").animate({ height : 0 } , 500 );
$("#login").animate({marginTop : -105 } , 520 );
$(this).blur();
  });
  $("#closeLogin").click(function(){
        $("#login").parent("div").animate({ height : 0 } , 500 );
$("#login").animate({marginTop : -105 } , 520 );
  });
})
</script>
부분이 있습니다
105 라는 부분을 68로 고치시면 됩니다
© SIRSOFT
현재 페이지 제일 처음으로