묻고답하기
간단한 CSS 질문입니다...
2013.03.31 14:40
<form>
<input name="" type="submit" value="로그인" class="login_submit" />
</form>
<div class="joinus">
회원가입
</div>
위와 같은 두 개의 영역에
.login_submit { position:absolute; top:2px; right:59px; width:45px; height:15px; background-color:#fff; border:1px #ddd solid; font:8pt 돋움, Dotum, Arial, AppleGothic; letter-spacing:-1px; }
.joinus { position:absolute; top:2px; right:0px; width:45px; height:15px; background-color:#fff; border:1px #ddd solid; font:8pt 돋움, Dotum, Arial, AppleGothic; letter-spacing:-1px; }
.joinus { position:absolute; top:2px; right:0px; width:45px; height:15px; background-color:#fff; border:1px #ddd solid; font:8pt 돋움, Dotum, Arial, AppleGothic; letter-spacing:-1px; }
두 개의 위치만 달리하고 나머지 옵션은 똑같이 주었습니다.
그런데 보시다시피 서로 두 개의 height 값이 다른데요.
딱 보기에도 '회원가입' 이 1~2px 정도 더 큽니다...
서로 똑같게 적용하려면 어떻게 해야 하나요? 저 왼쪽 것에 맞추고 싶어요...
왼쪽 것은 세로로, 가로로 다 정렬이 되어 있고 height 값도 맞는데...
어떻게 해야 하나요...?
댓글 2
-
DynamicLaser
2013.03.31 14:55
-
Fidelity
2013.03.31 16:16
답변 감사합니다... 좋은 참고가 되었습니다... -
송동우
2013.03.31 15:15
.joinus
여기에
line-height:15px;
이것 추가해보세요....
-
Fidelity
2013.03.31 15:33
.joinus 에 height 지우고 line-height:15px; 하니까 길이는 맞춰졌네요... 그런데 텍스트가 가운데 오게 하려면 어떻게 하죠...? ㅠㅠ -
Fidelity
2013.03.31 18:36
그냥, 이미지로 하기로 했어요. 이미지로 top 에 붙이면 해결될 문제 같네요- ㅎ
html, css를 다시 짜셔야 할듯 합니다.
로그인 작동원리가 뭔지 모르겠지만 a 로 넘어가는 방식이시면 <a>로 감싸주시면 끝나구요.
<a href="">로그인</a>
<a href="">회원가입</a>
</div>
이렇게 하시고 .float_right에는 float:right 옵션주시고, buttons에 세부 div설정 넣으시고
셀렉터는 .buttons a 로 하시면 되겠죠.
브라우저마다 input이나 div에 대한 스타일링이 다르구요, 문서 종류(HTML5, XHTML1.1, HTML4)에 따라 또 스타일링이 다릅니다.
그렇게 되면 css는 아래와 같겠죠
.float_right.buttons a{
width:45px;
height:15px;
text-align:center;
text-deocration:none;
background-color:#fff;
border:1px solid #ddd;
font-family:"AppleGothic", "돋움", "Dotum", "Arial";
size:8pt;
letter-spacing:-1px;
}