본문 바로가기

먹고살거/HTML,CSS

fieldset


컨텐츠 내용에는 항상 제목이있다.

그제목을 표현하려면 <fieldset> 라는것이 필요하다.
label이 컨텐츠 였다면 이걸 설명하는것이 있어야하겠지.....................?
예로 로그인을 들어보겠습니다. 

**html코딩
---------------------------------------------------------------------------
<div class="login_box">
      <fieldset>
           <legend>로그인하기</legend>
           <dl class="login">
               <dt>아이디입력</dt>
               <dd><input name="id" type="text" clsss="" /></dd>
               <dt>비밀번호입력</dt>
               <dd><input name="id" type="password" clsss="" /></dd>
           </dl>
           <p class="btn_click"><input id="id" title="button" class="input_click" type="image" src="img/btn_click.gif" alt="클릭" /></p>
      </fieldset>  
 </div>
---------------------------------------------------------------------------

 **CSS 코딩
-------------------------------------------------------------------------------------------------
/*로그인하기 박스*/
div.login_box {position:relative; width:400px; margin:100px 0 100px 100px;}
/*중요!!*/
fieldset {padding:0;}
fieldset legend {}
/*내용*/
dl.login {overflow:hidden; width:380px; margin-left:10px;}
dl.login dt {float:left; width:70px; padding:5px 0 0 0;}
dl.login dd {float:left; width:300px; padding-bottom:10px;}
dl.login dd input {width:170px; vertical-align:top;}
p.btn_click {position:absolute; right:8px; bottom:8px;}
p.btn_click input.input_click {width:117px; height:57px; border:none;}
------------------------------------------------------------------------------------------------- 

/*중요!!*/ _ 부분을 이렇게 고쳐야함.
fieldset {padding:0; border:none;}
fieldset legend {position:absolute; left:0; top:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden;}
결과  = 브라우져마다 약간의 차이가 있지만///(실력이 미숙한 관계로 다가;ㅋㅋㅋ)