수다닷컴

네이버 메일폼을.. 비슷하게나마 만들어보고 있는중입니다.

근데 지금 2가지의 문제점이있습니다..

1. 받는사람 제목 에 있는 작은 텍스트박스를 가변길이로 두고싶은데.. width:100%하면 당연히 익스플로러 화면을 벗어나게되고
auto로 설정하니 이렇게 작아져서 길이가 변하질 않습니다.. 어떻게 해결해야할까요?

2. 만들긴 했는데.. 화면을 줄이니까 이렇게 되네요.. 도대체 왜이러는지 잘모르겠습니다..

좀 도와주세요..

설명 이미지
전체화면..아무문제없음화면을 조금줄여보았음.. 아무문제없음..뭔가 좀 이 상하게 화면을 줄여봄( 화면이 짤리게 ) 그랬더니 이렇게 나오네요..전체소스는..

!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
head
meta http-equiv=Content-Type content=text/html; charset=EUC-KR
title네이버 메일/title
style type=text/css
#logo { width:20px; height:20px; display:inline-block; background:url(image/cm_sp.png) no-repeat 0px 0px; }
#naver{ width:47px; height:17px; display:inline-block; background:url(image/cm_sp.png) no-repeat -153px -162px; }
#me{ width:41px; height:17px; display:inline-block; background:url(image/cm_sp.png) no-repeat -200px -167px;}
#back{ width:100%; height:35px; display: inline-block; background:url(image/cm_sp.png) no-repeat -64px -25px;}
#bm{ width:18px ; height:20px; display: inline-block; background:url(image/spr_lft_menu_le_white_111229.png) no-repeat 0px -142px; }

#home{ width:100%; height:52px; display: inline-block; background:url(image/spr_lside_menu_110831.png) no-repeat -120px 0px;}
#mail{ width:100%; height:52px; display: inline-block; background:url(image/spr_lside_menu_110831.png) no-repeat -120px -104px;}
#cal{ width:100%; height:52px; display: inline-block; background:url(image/spr_lside_menu_110831.png) no-repeat -120px -158px;}
#list{ width:100%; height:52px; display: inline-block; background:url(image/spr_lside_menu_110831.png) no-repeat -120px -210px;}
#ndri{ width:100%; height:52px; display: inline-block; background:url(image/spr_lside_menu_110831.png) no-repeat -120px -262px;}
#photo{ width:100%; height:52px; display: inline-block; background:url(image/spr_lside_menu_110831.png) no-repeat -120px -314px;}
#word{ width:100%; height:52px; display: inline-block; background:url(image/spr_lside_menu_110831.png) no-repeat -120px -366px;}
#ga{ width:100%; height:52px; display: inline-block; background:url(image/spr_lside_menu_110831.png) no-repeat -120px -418px;}
#he{ width:100%; height:52px; display: inline-block; background:url(image/spr_lside_menu_110831.png) no-repeat -120px -522px;}
#lite{ width:100%; height:52px; display: inline-block; background:url(image/spr_lside_menu_110831.png) no-repeat -120px -574px;}

/style
/head

body
div class=헤더 style= background-color:#282828;width:100%; height:35px;

span style=padding-top:20px;margin-left:17px;id=naver/span
span style=padding-top:15px; id=me/span

/div

div class=Left영역1 style=width:51px; height:100%; float:left; background-color:silver;
ul class=메뉴 style=list-style-type:none; list-style-image:none; margin:0px; padding:0px;0px;0px;0px;
li title=네이버me class=me style=height:52px; width:100%; padding:0px;0px;0px;0px; margin:0px;
span id=home/span/li
li title=쪽지 class=쪽지 style=height:52px; width:100%; padding:0px;0px;0px;0px; margin:0px;
span id=mail/span/li
li title=캘린더 class=캘린더 style=height:52px; width:100%; padding:0px;0px;0px;0px; margin:0px;
span id=cal/span/li
li title=주소록 class=주소록 style=height:52px; width:100%; padding:0px;0px;0px;0px; margin:0px;
span id=list/span/li
&n li title=N드라이브 class=N드라이브 style=height:52px; width:100%; padding:0px;0px;0px;0px; margin:0px;
span id=ndri/span/li
li title=포토앨범 class=포토앨범 style=height:52px; width:100%; padding:0px;0px;0px;0px; margin:0px;
span id=photo/span/li
li title=워드 class=워드 style=height:52px; width:100%; padding:0px;0px;0px;0px; margin:0px;
span id=word/span/li
li title=가계부 class=가계부 style=height:52px; width:100%; padding:0px;0px;0px;0px; margin:0px;
span id=ga/span/li
li title=건강기록부 class=건강기록부 style=height:52px; width:100%; padding:0px;0px;0px;0px; margin:0px;
span id=he/span/li
li title=메일Lite class=메일Lite style=height:52px; width:100%; padding:0px;0px;0px;0px; margin:0px;
span id=lite/span/li
li title=공란 class=공란 style=height:52px; width:100%; padding-bottom:166px; margin:0px;/li
/ul
/div

div class=left영역2 style=width:219px; float:left; margin-left:0px; border:1px solid #b4b4b4; background-color:#D5D5D5;

div class=버튼1감싸기 style=position:relative; padding:15px 15px 17px 15px;
button style=align:center;width:50%; height:36px; float:left; position:relative;
메일쓰기/button
button style=align:center;width:50%; height:36px; position:relative;내게쓰기/button/div

div class=전체메일 style=border-top:1px solid gray; position:relative; padding-bottom:3px; padding-left:14px padding-right:0px; padding-top:5px;
ul style=margin:0px; padding:0px;0px;0px;0px;
li class=allmail_box style=list-style-type:none;padding:5px;0px;3px;13px;
span style=position:relative;top:6px; id=logo/span전체메일
span class=divbarl/spanspan style=padding-left:8px;안읽음/span/li
li class=받은메일 style=list-style-type:none; padding:5px;62px;3px;14px; position:relative
span style=position:relative; id=bm/span받은메일함/li
li class=내게쓴메일함 style=list-style-type:none; padding:5px;62px;3px;14px; position:relative내게쓴메일함/li
li class=보낸메일함 style=list-style-type:none; padding:5px;62px;3px;14px; position:relative보낸메일함/li
li class=임시보관함 style=list-style-type:none; padding:5px;62px;3px;14px; position:relative임시보관함/li
/ul/div

div class=리스트2 style= border-top:1px solid gray;padding-top:4px; position:relative;
ul style= margin:0px; padding:0px;0px;0px;0px;
li title=Notesclass=Notes style=list-style-type:none; margin-left:25px;padding:5px;0px;0px;0px; position:relativeNotes/li
li title=정크메일class=정크메일 style=list-style-type:none; margin-left:25px;padding:5px;0px;0px;0px; position:relative정크메일/li
li title=쇼핑레터함class=쇼핑레터함 style=list-style-type:none; margin-left:25px;padding:5px;0px;0px;0px; position:relative쇼핑레터함/li
li title=청구서함class=청구서함 style=list-style-type:none; margin-left:25px;padding:5px;0px;0px;0px; position:relative청구서함/li
li title=자동청구서함class=자동청구서함 style=list-style-type:none; margin-left:25px;padding:5px;0px;0px;0px; position:relative자동청구서함/li
/ul /div

div class=리스트3 style=border-top:1px solid gray; padding-bottom:4px; position:relative;
ul style=list-style-type:none; list-style-image:none; padding:0px;0px;0px;0px; margin:0px;
li title=스팸메일함 class=스팸메일함 style=position:relative; padding:5px;0px;3px;14px;스팸메일함/li
li title=휴지통 class=휴지통 style=position:relative; padding:5px;0px;3px;14px;휴지통/li
li title=중요메일 class=중요메일 style=position:relative; padding:5px;0px;3px;14px;중요메일/li
li title=첨부메일 class=첨부메일 style=position:relative; padding:5px;0px;3px;14px;첨부메일/li
li title=외부메일 가져오기 class=외부메일 가져오기 style=position:relative; padding:5px;0px;3px;14px;외부메일 가져오기/li
/div

div class=리스트4 style=border-top:1px solid gray; border-bottom:1px solid gray; position:relative; padding:10px;0px;4px;0px;
ul style=lstyle=list-style-type:none; list-style-image:none; padding:0px;0px;0px;0px; margin:0px;
li class=환경설정 style=position:relative; padding:5px;0px;3px;14px;환경설정/li
/ul /div

div class=리스트5 style=font-size:11px; position:relative; padding:20px; padding-bottom:134px;마지막 접속시간 13-07-17 10:29/div
/div

div class=Main영역 style=border:1px solid #b4b4b4; width:auto; height:auto; position:relative; margin-left:270.5px;
div class=Main_Head style= width:auto; height:54px; border-bottom:1px solid #e5e5e5 ;
div class=head_1 style=font-weight:bold; font-size:18px; width:auto; height:36px; padding:18px;0px;18px;30px;메일쓰기/div/div
div class=Main_Head2 style= width:auto; height:38px; padding:0px;0px;0px;4px; border-top: 1px solid gray; border-bottom: 1px solid gray; padding-top:11px;
button class=보내기 style=margin-left:20px; font-size:14px;background-color:white; border-bottom:1px solid #b4b4b4; border-left:1px solid #b4b4b4; height:27px;보내기/button
button class=미리보기 style= font-size:14px; background-color:white; border-bottom:1px solid #b4b4b4; border-left:1px solid #b4b4b4; height:27px;미리보기/button
button class=저장하기 style= font-size:14px; background-color:white; border-bottom:1px solid #b4b4b4; border-left:1px solid #b4b4b4; height:27px;저장하기/button/div
div class=Main vertical-align:middle; style=width:auto; height:auto; padding:8px;10px;10px;15px;
trth style=padding:2px;0px;0px;0px; margin:0px; text-align:left; font-size:10px;
span class=label style= font-size:14px;width:61px; vertical-align:middle; font-weight:bold; height:30px;받는사람/span
input type=checkbox; class=ck style=margin-left:10px; vertical-align:middle; padding:0px;0px;0px;0px; font-size:12px; width:13px; height:13px;/input
span class=label2 style=font-size:12px; width:61px; font-weight:normal; 내게쓰기/span/th
td colspan=2 style=font-size:12px; padding:4px;0px;3px;0px; vertical-align:top;

input type=text; style= margin-left:30px; width:*; height:20px;/input
button class=주소록 style=width:auto; height:27px; margin-left:15px; font-size:14px; vertical-align:middle; background-color:white; border:1px solid #b4b4b4;주소록/button
input type=checkbox; class=개인 style=vertical-align:middle; font-size:12px; width:13px; height:13px;/input
span class=개인별 style= font-size:12px; width:60px; font-weight:bold;개인별/span
input type=checkbox; class=주소 style=vertical-align:middle; font-size:12px; width:13px; height:13px;/input
span class=주소록 style= font-size:12px; width:60px; font-weight:bold;주소록에 추가/span
/td
/tr
/div
div class=main2 style=width:auto; height:auto; padding:8px; 10px; 10px; 15px;
trth style=padding:2px;0px;0px;0px; margin:0px; text-align:left; font-size:10px;
span class=label style= font-size:14px;width:61px; font-weight:bold; height:30px;받는사람/span
input type=checkbox; class=ck style= margin-left:10px; vertical-align:middle; padding:0px;0px;0px;0px; font-size:12px; width:13px; height:13px;/input
span class=label2 style=font-size:12px; width:61px; vertical-align:middle; font-weight:normal; 내게쓰기/span/th
td colspan=2 style=font-size:12px; padding:4px;0px;3px;0px; vertical-align:top;

input type=text; style= margin-left:30px; width:*; height:20px;/input
button class=주소록 style=width:auto; height:27px; margin-left:15px; font-size:14px;vertical-align:middle; background-color:white; border:1px solid #b4b4b4;주소록/button

/td
/tr
/div
div class=main3 style=vertical-align:middle; width:auto; height:auto; padding:8px;10px;10px;15px;
trth style=padding:2px;0px;0px;0px; margin:0px; text-align:left; font-size:10px;
span class=label style= font-size:14px;width:61px; font-weight:bold; height:30px;제목/span
inp;input type=checkbox; class=ck style=margin-left:40px;vertical-align:middle; padding:0px;0px;0px;0px; font-size:12px; width:13px; height:13px;/input
span class=label2 style=font-size:12px; width:61px; font-weight:normal; vertical-align:middle; 중요/span/th
td colspan=2 style=font-size:12px; padding:4px;0px;3px;0px; vertical-align:top;

input type=text; style= margin-left:54px; width:*; height:20px;/input
/td
/tr

/div
div class=main4 style=margin:0px 30px 10px 0px;vertical-align:middle; width:auto; height:auto; padding:8px; 10px; 10px; 15px;
trth style=padding:2px;0px;0px;0px; margin:0px; text-align:left; font-size:10px;
span calss=label style= font-size:14px; width:61px; font-weight:bold; height:30px;파일첨부/span
input type=checkbox; class=file style=margin-left:10px; vertical-alingn:middle; padding:0px;0px;0px;0px; font-size12px; width:13px; height:13px;/input
button class=mypc style=width: auto; height:27px; margin-left:84px; font-size:14px; vertical-align:middle; background-color:white; border:1px solid #b4b4b4;내PC/button
button class=Ndr style=width: auto; height:27px; font-size:14px; vertical-align:middle; background-color:white; border:1px solid #b4b4b4;N드라이브/button
span class=삭제 style=vertical-align:middle; font-size:12px; font-weight:bold; height:27px;삭제/span
span class=vertical-align:middle;divbar2l/span
span class=일반첨부 style=vertical-align:middle; font-size:12px; font-weight:bold; heigt:27px;일반첨부로 전환/span
div class=wirte style=border: 1px solid #b4b4b4; font-size:12px; position:relative; margin-top:12px; padding:0px;0px;0px;0px; height:383px; width:100%;
input type=text style=display:inline-block; width:99.5%;height:380px; font-size:12px; font-family:dotum;/input /div

/div
div class=bot style= padding:10px 15px 15px 15px; border: 1px solid #b4b4b4; height:20px; width:auto;
button class=보내기 style=width: auto; height:27px; font-size:14px; vertical-align:middle; background-color:white; border:1px solid #b4b4b4;보내기/button
button class=미리보기 style=width: auto; height:27px; font-size:14px; vertical-align:middle; background-color:white; border:1px solid #b4b4b4;미리보기/button
button class=저장하기 style=width: auto; height:27px; font-size:14px; vertical-align:middle; background-color:white; border:1px solid #b4b4b4;저장하기/button
/div
/div

div class=foot align=center style=padding-top:10px; background-color:#282828;font-size:13px; width:100%; height:29px; border-top:1px solid #252730; posotion:absolute; bottom:0px;
font color=white face=돋움Copyright ⓒ NHN Corp. All Rights Reserved./font/div

/body
/html
입니다.

신청하기