슬라이딩 로그인 질문 입니다...
안녕하세요...
슬라이딩 메뉴를 이용하고 만들고있는데...
좀 더 수정하고자 하는데...초보다보니 생각데로 안되어
질답 게시판에 올려 봅니다..ㅋ
위 이미지를 보시면 로그인 창 가운데에 공백이있는데...
공백없이 이어지게 붙이고싶습니다...
아시는분의 답변 부탁 드리겠습니다...
감사합니다..^^
-------------------------- .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;
}
첨부파일
댓글 2개
onlymilk74
14년 전
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로 고치시면 됩니다
14년 전
덕분에 해결되었습니다..ㅋ
정말 감사합니다^^
정말 감사합니다^^
게시판 목록
그누4 질문답변
그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.
기존 게시물은 열람만 가능합니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 66374 | 11년 전 | 2482 | ||
| 66373 |
narasarang
|
11년 전 | 4466 | |
| 66372 |
오래된미래
|
11년 전 | 2035 | |
| 66371 |
hchan77
|
11년 전 | 2667 | |
| 66370 | 11년 전 | 2073 | ||
| 66369 |
Mariplay
|
11년 전 | 4719 | |
| 66368 | 11년 전 | 2124 | ||
| 66367 |
겟타123
|
11년 전 | 2414 | |
| 66366 |
|
11년 전 | 2943 | |
| 66365 | 11년 전 | 2538 | ||
| 66364 |
jjuguning
|
11년 전 | 2062 | |
| 66363 | 11년 전 | 2615 | ||
| 66362 |
찰리콘트롤
|
11년 전 | 2222 | |
| 66361 | 11년 전 | 2983 | ||
| 66360 | 11년 전 | 3287 | ||
| 66359 |
테크노관리자
|
11년 전 | 3162 | |
| 66358 | 11년 전 | 2549 | ||
| 66357 | 11년 전 | 2927 | ||
| 66356 |
Mariplay
|
11년 전 | 2319 | |
| 66355 |
nsakura
|
11년 전 | 2739 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기