슬라이딩 로그인 질문 입니다... 정보
슬라이딩 로그인 질문 입니다...관련링크
본문
안녕하세요...
슬라이딩 메뉴를 이용하고 만들고있는데...
좀 더 수정하고자 하는데...초보다보니 생각데로 안되어
질답 게시판에 올려 봅니다..ㅋ
위 이미지를 보시면 로그인 창 가운데에 공백이있는데...
공백없이 이어지게 붙이고싶습니다...
아시는분의 답변 부탁 드리겠습니다...
감사합니다..^^
-------------------------- .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 소스 ---------------------------
/*
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로 고치시면 됩니다
하단에 보시면
<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로 고치시면 됩니다
덕분에 해결되었습니다..ㅋ
정말 감사합니다^^
정말 감사합니다^^