묻고답하기
로그인 위젯 공백 질문입니다
2015.03.02 15:28
이렇게 수정해서 로그인 위젯을 만들었는데 보시면 로그인창과 비밀번호 창 사이의 공백, 로그인창과 체크박스 사이의 공백, 그리고 밑의 로그인 버튼과 선 사이의 공백이나 가입버튼과 위아래 선 사이의 공백이 넓어요ㅠㅠ 이건 무엇을 수정해야 딱 달라붙게 될까요??ㅠㅠㅠㅠ
밑에는 login_form.html을 복사해온 거예요!
<!--%import("css/default.css")-->
<!--%import("./filter/login.xml")-->
<!--%import("./js/login.js")-->
<script type="text/javascript">
var keep_signed_msg = "{$lang->about_keep_signed}";
xAddEventListener(window, "load", function(){ doFocusUserId("fo_login_widget"); });
</script>
<body>
<table align="center" cellpadding="0" cellspacing="0" width="88px" style="margin-bottom:10px;">
<form action="./" method="get" onsubmit="return procFilter(this, widget_login)" id="fo_login_widget">
<font size=0>
<tr align="left">
<td width="58px" height="18px" align="left">
<p><input name="user_id" type="text" title="user id" maxlength=30 style="padding:1 0 0 5;font-family:Gulim;font-weight:bold; font-size:8pt; color:#FFFFFF;letter-spacing:2px; background-color:#FFFFFF;border-width:1; border-color:rgb(255,241,42); border-style:solid; width:70px; height:20px;" size="20" class="login_input" /></p>
</td>
<td width="88" align="left" height="25"><div align="left"><input type=checkbox name=auto_login value=1 onclick=check_autologin()></div></td>
</tr>
<tr>
<td width="78px" height="18px">
<div align="left"><input name="password" type="password" title="password" maxlength=30 style="padding:1 0 0 5;font-family:tahoma;latter-spacing:2px;color:#FFFFFF; border-color:rgb(255,241,42); border-style:solid; width:88px; height:18px;" size="20" class="login_input" /></div>
</td>
</tr>
<tr>
<td style="border-bottom-width:1px; border-bottom-color:rgb(255,241,42);border-bottom-style:solid;">
<p align="center"><input type="image" src="./images/login.gif" alt="login" /></p></td><tr>
<tr>
<td style="border-bottom-width:1px; border-bottom-color:rgb(255,241,42);border-bottom-style:solid;">
<p align="center"><a href="{getUrl('act','dispMemberSignUpForm')}"><img src="./images/join.gif"></a></p>
</td>
</tr>
</font>
</form>
</table>
</body>
아무리 봐도 어디를 고쳐야 할지 모르겠어요ㅠㅠ 제발 도와주세요ㅠㅠ
css는 밑에 이것뿐입니다!
.login_input {
width: 78px;
font-weight: bold;
text-align: center;
font-size: 8pt;
border: 1px solid #fff22c;
background-color: white;
}
.small {
font-size: 8pt;
color: #777;
line-height: 140%;
}
제가 원했던 모습은 이런 거였어요...ㅠㅠ
댓글 15
-
forest535
2015.03.02 15:49
-
휴우칫
2015.03.02 15:58
아 제 페이지 css를 고쳐보니 제가 원하던 대로 나오네요ㅠㅠ 그게 문제였나봐요....덕분에 고쳤습니다!! 감사합니다!!
-
휴우칫
2015.03.02 15:59
그런데 여전히 체크박스는 로그인박스로 붙질 않네요...이건 다른 방법이 없는 건가요?ㅠㅠ 첨부한 건 로그인 위젯 파일입니다ㅠㅠㅠㅠ도와주세요ㅠㅠㅠㅠ.....
-
forest535
2015.03.02 15:59
글쎄요, 이렇게 소스만 보여주면 아까 말씀드린대로 외부에서 영향받는 스타일은 체크할 수 없구요
우선 아래 내용만 조금 수정해 보세요
<tr align="left">
<td width="58px" height="18px" align="left">
<p><input name="user_id" type="text" title="user id" maxlength=30 style="padding:1 0 0 5;font-family:Gulim;font-weight:bold; font-size:8pt; color:#FFFFFF;letter-spacing:2px; background-color:#FFFFFF;border-width:1; border-color:rgb(255,241,42); border-style:solid; width:70px; height:20px;" size="20" class="login_input" /></p>
</td>
<td width="88" align="left" height="25"><div align="left"><input type=checkbox name=auto_login value=1 onclick=check_autologin()></div></td>
</tr>빨간부분부터 제거해 보세요
-
휴우칫
2015.03.02 16:05
제거했는데도 똑같아요...ㅠㅠhttp://bkung.dothome.co.kr/main5 여기가 제가 테스트하는 페이진데요 지금은 또 보면 로그인 창과 비밀번호 창이 붙어있어서 이건 또 어떻게 떼죠...?
-
forest535
2015.03.02 16:07
아래 코드로 해 보세요
테이블 태그가 잘못되었었네요
<table align="center" cellpadding="0" cellspacing="0" width="88px" style="margin-bottom:10px;" border=1>
<form action="./" method="get" onsubmit="return procFilter(this, widget_login)" id="fo_login_widget">
<font size=0>
<tr align="left">
<td width="60px" height="18px" align="left">
<input name="user_id" type="text" title="user id" maxlength=30 style="padding:1 0 0 5;font-family:Gulim;font-weight:bold; font-size:8pt; color:#FFFFFF;letter-spacing:2px; background-color:#FFFFFF;border-width:1; border-color:rgb(255,241,42); border-style:solid; width:60px; height:20px;" size="20" class="login_input" /><input type=checkbox name=auto_login value=1 onclick=check_autologin()>
</td>
</tr>
<tr>
<td width="78px" height="18px">
<div align="left"><input name="password" type="password" title="password" maxlength=30 style="padding:1 0 0 5;font-family:tahoma;latter-spacing:2px;color:#FFFFFF; border-color:rgb(255,241,42); border-style:solid; width:88px; height:18px;" size="20" class="login_input" /></div>
</td>
</tr>
<tr>
<td style="border-bottom-width:1px; border-bottom-color:rgb(255,241,42);border-bottom-style:solid;">
<input type="image" src="./images/login.gif" alt="login" /></p>
</td>
<tr>
<tr>
<td style="border-bottom-width:1px; border-bottom-color:rgb(255,241,42);border-bottom-style:solid;">
<a href="{getUrl('act','dispMemberSignUpForm')}"><img src="./images/join.gif"></a></td>
</tr>
</font>
</form>
</table> -
휴우칫
2015.03.02 16:10
말씀대로 바꿨더니 체크박스는 붙었는데 상자 선이 생기고 로그인버튼과 조인버튼이 중앙정렬이 아니네요ㅠㅠㅠㅠㅠ이건 어떻게 바꾸죠??
-
forest535
2015.03.02 16:09
맨윗줄운 이걸로
<table align="center" cellpadding="1" cellspacing="0" width="88px" style="margin-bottom:10px;">
-
forest535
2015.03.02 16:12
상자선생기는건 제가 테스트 한다고 그랬어요
바로위 코드로 바꾸면 되구요,
중앙정열은 <td align="center"> 로 처리하시면 됩니다
<p align="center") 로 하면 또 간격이 생겨요
-
휴우칫
2015.03.02 16:13
감사합니다!!! 바꿨어요! 근데 제가 처음 글에 올렸었던 원하는 모습으로 완전히 똑같이 만들 수는 없는 건가요?ㅠㅠ
-
forest535
2015.03.02 16:16
가능합니다
하지만 정확히 원하시는 형태가 어떤건지 몰라서 코딩해 드릴수는 없구요
html 과 css 를 좀 공부하심이 좋을것 같습니다 ^^
-
휴우칫
2015.03.02 16:18
ㅠㅠ네....더 알아보고 이것저것 해봐야겠어요ㅠㅠ 도와주셔서 정말정말 감사합니다!!
-
forest535
2015.03.02 16:13
색갈이 온통 노~래서 영 눈아프네요 ^^
-
휴우칫
2015.03.02 16:14
ㅎㅎ봄이라고 바꾸려고 했는데 샛노랗게 돼버렸네요!
-
DoorWeb
2015.03.02 16:39
얼쭉 다 잡힌거 같고 아이디와 비번쪽의 여백만 띄우시면 될거 같은데
아이디를 감싸는 td에 padding-bottom 을 넣어 보세요.
firefox+firebug 를 사용해 보세요
원하는 위치에서 정확한 css 를 짚어줍니다.
임시로 테스트 해 볼 수도 있고,
직접링크를 보면 제가 도와드릴수도 있을것 같지만
소스코드만 가지곤 힘드네요
그리고 css 도 이게 다가 아니라 사이트전체에 적용되는 스타일 적용을 받는것도 있을 수 있습니다