G

테이블이없이 CSS로 기본폼 만들기

· 2003-11-15 (토) 08:44:59 · 5735 · 4
양넘싸이트에서 뽀려왔습니다. -_-);;

<style>
div.row {
clear: both;
padding-top: 5px;
}

div.row span.label {
float: left;
width: 100px;
text-align: right;
}

div.row span.formw {
float: right;
width: 235px;
text-align: left;
}

</style>

The CSS above also gives widths for the SPANs. These can be absolute values like the example, or percentages that add up to 100% or slightly less, depending on padding and borders (and the box model you are designing for). In the example I have wrapped the form in another DIV to give it a border and a background.

The example HTML looks like:

<div style="width: 360px; background-color: #ccc;
border: 1px dotted #333; padding: 5px;
margin: 0px auto";>
<form>
<div class="row">
<span class="label">Name:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Age:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Comments:</span><span
class="formw">
<textarea cols="25" rows="8">
Go ahead - write something...
</textarea>
</span>
</div>
<div class="spacer">
 
</div>
</form>

</div>
|

댓글 4개

2003-11-15 (토) 11:18:15
그누에 오시는 분중 가장 아이디 길지(?) 않을까 하는
생각이 매번 듭니다.^^; 잘 봤습니다.
아! 그렇네요.
스크롤이 조금 돼서... 제목까지 까묵어부러서^^
2003-11-15 (토) 08:59:05
그렇지 않나요? =_=);;;;
질문을 이해를 못한듯 (=_=);;
기본 폼의 형태만 출력되는 것이 맞나요?
아무래도, 어제 올려 놓은 자료를 바탕으로, 한번 바꿔봐야 겠습니다.
게시판 연동이야 어차피 모르는(^^) 부분이니, 차치하고서라도...
댓글을 작성하시려면 로그인이 필요합니다.

자유게시판

203,065건
+
제목 글쓴이 날짜 조회
03-11-16 조회 4,844
03-11-16 조회 4,965
03-11-16 조회 5,008
03-11-16 조회 4,417
03-11-16 조회 4,961
&&nbsp;&nbsp;
03-11-16 조회 5,427
03-11-15 조회 5,042
03-11-15 조회 5,787
03-11-15 조회 5,279
03-11-15 조회 4,728
03-11-15 조회 5,088
03-11-15 조회 4,827
03-11-15 조회 4,647
JJ.Mando
03-11-15 조회 6,062
03-11-15 조회 4,693
03-11-15 조회 5,345
03-11-15 조회 5,736
JJ.Mando
03-11-15 조회 4,438
03-11-15 조회 4,900
03-11-15 조회 4,532