탭만들고 밑에 줄그어주기~ HTML, CSS 2010. 11. 22. 18:13
.tab_box1 li
{
 ....
 float:left; 
 ....
}

li태그에 float:left 속성이 계속 유효하기 때문에..
일단 선을 그어주려면

.tab_boxline {
 border:0px;
 height:1px;
 background-color:#4e4a49;
 color:#4e4a49;
 clear:both;
}

이런식으로 float 속성을 없애주고
익스와 다른 브라우저에도 속성이 먹어야 하기 때문에 color를 둘다 깔아주고

<hr class="tab_boxline"/>

이렇게 선을 깔아주면 완성!!


저작자표시 비영리 동일조건
,
좁은 창의 내용을 새로운 팝업창으로 HTML, CSS 2009. 8. 12. 11:00

좁은 칸에 아래 위로 짤리는 글씨.. 스크롤로 왔다갔다 하면서 보기 힘드시죠?
그래서 새로운 팝업창을 통해 그 안의 내용을 확인할 수 있는 소스를 공개하겠습니다.


위와 같은 글 내용입니다.
아래쪽에 스크롤이 왔다갔다 하고.. 내용이 커서 한눈에 잘 보이지 않는 불편함이 있지요?
그래서 위에 미리보기 버튼을 누르면


이렇게 팝업으로 크게 볼 수 있도록 합니다.
오른쪽 위에 프린트할 수 있는 버튼과 닫기 버튼이 보이시죠?ㅎㅎ
밑에 소스는 미리보기 버튼을 눌렀을 때 호출하는 함수입니다.

function view(){
   var msg = document.getElementById('<%=lblMsg.ClientID%>').innerHTML;
   var html = window.open();
    
   html.document.writeln('<HTML><HEAD><title>Print Preview</title>')
   html.document.writeln('<base target="_self"></HEAD>')
   html.document.writeln('<body MS_POSITIONING="GridLayout" bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">');
   html.document.writeln('<form  method="post">');
   html.document.writeln('<TABLE width=100%><TR><TD></TD></TR><TR><TD align=right><INPUT ID="PRINT" type="button" value=" PRINT " onclick="javascript:location.reload(true);window.print();"><INPUT ID="CLOSE" type="button" value=" CLOSE " onclick="window.close();"></TD></TR><TR><TD></TD></TR></TABLE>');
   html.document.writeln(msg);
   html.document.writeln('</form></body></HTML>');
}

좀 복잡해보이지만 대충 이해하셨을거라고 생각됩니다.
lblMsg는 우리가 크게 뿌려줄 내용을 담은 라벨이구요.
이것을 msg변수에 너어줍니다.

^^


저작자표시 비영리 동일조건
,
alert 영어 경고메시지 HTML, CSS 2009. 7. 31. 10:13
비밀번호가 틀렸습니다. 다시입력해주세요. => Invalid password. Please try again. 
아이디가 틀렸습니다. 다시입력해주세요. => Invalid ID. Please try again. 
제목을 입력하세요. Enter your subject(title). 
제목을 입력하세요. Enter your contents(message). 
이름을 입력해주세요. => Enter your name. 
아이디를 입력하세요. Enter your ID. 
패스워드를 입력하세요. Enter your password. 
아이디가 존재하지 않습니다. 관리자에게 문의해 주세요. ID does not exist. Please contact the administrator. 
접근 권한이 없습니다. IT실 담당자에게 문의하세요. Not permitted to log in/connect. Please contact the IT administrator. 
접근권한이 없습니다. 관리자에게 문의해 주세요. Not permitted to log in/connect. Please contact the administrator. 
파일을 삭제하시겠습니까? Delete? 파일이 정상적으로 삭제 되었습니다. Deleted successfully. (Files deleted successfully.) 
등록 되었습니다. Registered/Saved successfully. 
수정 되었습니다. Updated successfully. 
삭제 되었습니다. Deleted successfully. 
삭제할 데이터가 없습니다. Nothing to delete. 
등록된 게시물이 없습니다. (게시물 = comment ?) No comment to delete. 
검색할 성명을 입력하세요. Enter name to search for. 
수신처를 지정해 주새요! Select contact method. 
부서 이하를 선택해 주세요. Select department from the list. 
검색된 사용자가 없습니다. Username does not exist. 
메세지를 받을 사람을 입력해 주십시오. Enter recipient's name.
저작자표시 비영리 동일조건
,
AJAX 달력 컨트롤 HTML, CSS 2009. 7. 29. 17:05



이런 형식 많이 보셨죠? 텍스트 박스를 클릭하면 날짜형식 포맷이 뜨고



옆에 달력버튼을 클릭하면 달력이 떠서 날짜를 선택할 수 있습니다.

그리고 날짜를 클릭하게 되면 이렇게 자동으로 날짜가 들어오지요.

자, 이제 소스를 보겠습니다.

--------------------------------------------------------------------------------

<asp:Label ID="Label3" runat="server" Text="날짜"></asp:Label>
<asp:TextBox ID="txtEdate" runat="server" Width="70px"></asp:TextBox>
<asp:Button ID="ibtnTxtEdate" runat="server" Text="달력" />

일단 레이아웃을 이렇게 넣어야 겠지요.
Label로 "날짜"를 찍어주고, 옆에 텍스트박스 붙여주고 그리고 "달력"이라는 Text를 가진 버튼까지 완료입니다.
<cc1:CalendarExtender ID="CalendarExtender2" runat="server" Format="yyyy-MM-dd" PopupButtonID="ibtnTxtEdate" TargetControlID="txtEdate"></cc1:CalendarExtender>

음.. 제일 중요(?)한 부분입니다. 사실 저 아래에 두 이벤트는 있으면 좋지만 없어도 되거든요.
이 부분이 바로 달력에서 날짜를 클릭하면 yyyy-MM-dd형식으로 텍스트 박스에 뿌려주는 부분입니다.
<cc1:MaskedEditExtender ID="MaskedEditExtender2" runat="server" AcceptNegative="Left" ClearTextOnInvalid="true" DisplayMoney="Left" ErrorTooltipEnabled="True" Mask="9999/99/99" MaskType="Date" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError" TargetControlID="txtEdate"></cc1:MaskedEditExtender>

이 부분은 텍스트박스를 클릭했을 때 날짜 형식으로 보이게 합니다.
MaskType이 "Date"로 되어있는 게 보이시죠?


<cc1:MaskedEditValidator ID="MaskedEditValidator2" runat="server" ontrolExtender="MaskedEditExtender2" ControlToValidate="txtEdate" Display="Dynamic" EmptyValueMessage="날짜를 입력해주세요." ErrorMessage="MaskedEditExtender2" InvalidValueMessage="유효하지 않은 날짜입니다." MaximumValue="2100-01-01" MaximumValueMessage="날짜는 2100년 보다 작아야합니다." MinimumValue="1900-01-01" MinimumValueMessage="날짜는 1900년 보다 커야합니다." ValidationGroup="MKE"></cc1:MaskedEditValidator>

이 부분은 날짜의 범위를 정해주는 곳이구요.



아직 걸음마 수준이네요. css도 잘 몰라서 배우는 중입니다.
다음부턴 더 예쁘게 꾸며서 블로깅하도록 노력해보겠습니다. (하지만 시간이 좀 걸리겠네요..)

저작자표시 비영리 동일조건
,

티스토리툴바