Eyes Of Siche
Guest book

Search Results for 'css'


5 POSTS

  1. 2008/11/27 스크롤을 따라다니는 메뉴(고정 되어 있는 메뉴) by siche (1)
  2. 2008/11/25 투명이미지(png) IE6.0에서도 보이게 하기 by siche
  3. 2008/11/19 프린트시 스타일 달리 적용 by siche
  4. 2008/11/13 푸터가 항상 밑에 붙어 있기 by siche (1)
  5. 2008/10/07 CSS IE by siche

스크롤을 따라다니는 메뉴(고정 되어 있는 메뉴)

스크롤을 따라 다니는 메뉴 소스를 많이 보았을 것 이다.
허나 보통 돌아 다니는 스크립트는 일단 dotype을 선언 했을때 먹통이 되는 스크립트도 많고
간단해 보이는 것이 왜케 소스가 긴 것 인지.. -_-;
지금 설명 하려는 것은 css으로만 해당 기능을 구현 하는 방법 이다.
따라다니는 부드러운 느낌 보다는 고정 되어 있다는 느낌이 드는 것임으로 참고 하자.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> eyes of siche </title>
<style type="text/css">
    .skydiv { position: fixed; top: 10px; left: 10px; }
    .skydiv { border: 1px solid #790000; padding: 10px; }
</style>
<!--[if (IE 6)]>
<style type="text/css">
    .skydiv { position: absolute; top:expression(documentElement.scrollTop+10); }
</style>
<![endif]-->
</head>

<body>
<div class="skydiv">
    스크롤을 따라다니는 놈.
</div>
1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
4<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
5<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

일단 IE6.0을 제외한 다른 브라우저는 position: fixed 라는 속성으로 간단히 구현 할수 있다.
그런데 역시나 IE6.0은 다들 아시다시피 꼴통이라 이놈을 인지 하지 못한다.
그래서 넣어 준것이 top:expression(documentElement.scrollTop+10); 이놈.
documentElement.scrollTop 이것이 현재 스크롤의 높이 값을 던져 주고 +10 은
스타일에서 보면 top, left 를 각각 10px 씩 띄었다. 현재 스크롤 값에 10px를 더한 값이 top 속성 값이 되는 것이다.
<!--[if (IE 6)]> 이놈 안에 들어가 있는 소스는 IE6.0 에서만 불러온다.

Posted by siche

2008/11/27 20:58 2008/11/27 20:58
Tag
, , , ,
Response
No Trackback , a comment
RSS
http://eos.pe.kr/rss/response/108

Comments List

  1. 앙카 2013/04/07 19:23 # M/D Reply Permalink

    좋은 글 퍼가요

Leave a comment
[로그인][오픈아이디란?]

투명이미지(png) IE6.0에서도 보이게 하기

png 이미지는 gif와 다르게 투명 이미지로 사용할 수 있다.
허나 IE6.0 버젼에서는 fiter를 사용해야 png의 특징을 살려서 사용할수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> eyes of siche </title>
</head>

<body>
<script type="text/javascript">
<!--
    function setPng24(obj) {
        obj.width=obj.height=1;
        obj.className=obj.className.replace(/\bpng24\b/i,'');
        obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+obj.src+"',sizingMethod='image');"
        obj.src='';
        return '';
    }
//-->
</script>
<style type="text/css">
    body { background: yellow; }
    .png24 { tmp: expression(setPng24(this)); }
</style>
<img src="http://eos.pe.kr/ex/png/png.png" class="png24">
</body>
</html>

예제에서 사용한 이미지는 빨간색 동그라미에 투명한 그림자가 들어간 이미지 입니다.
보시다시피 그림자가 투명해서 바탕의 노란색을 살짝 살짝 보여주는 걸 볼수 있습니다.

Posted by siche

2008/11/25 08:38 2008/11/25 08:38
Tag
, , , ,
Response
No Trackback , No Comment
RSS
http://eos.pe.kr/rss/response/107
Leave a comment
[로그인][오픈아이디란?]

프린트시 스타일 달리 적용

보통 홈페이지에서 인쇄를 지원할때 인쇄가 안됐으면 하는 요소들이 분명히 있다.프린트 하기 버튼이라든지.. 뭐 그게 뭐든지 간에 프린트 할때 style을 달리 적용할수 있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> eyes of siche </title>
</head>

<body>
<style type="text/css">
    div.head, div.foot { height: 100px; background: red; }
    div.body { height: 200px; }

    @media print {
        div.head, div.foot {display:none;}
    }
</style>
<div class="head">
    머리
</div>
<div class="body">
    본문
</div>
<div class="foot">
    다리
</div>
</body>
</html>

@media print 는 프린트할때의 경우만 따로 스타일을 지정할수 있다.
예제1을 프린트할 경우는 본문 부분만 나온다.

Posted by siche

2008/11/19 14:02 2008/11/19 14:02
Tag
, ,
Response
No Trackback , No Comment
RSS
http://eos.pe.kr/rss/response/105
Leave a comment
[로그인][오픈아이디란?]

푸터가 항상 밑에 붙어 있기

제목이 말하는 그대로다.
간혹 본문에 바로 밑에 푸터가 붙어 있을 경우 본문 내용이 적어서 푸터와 제일 밑 부분이 텅~~ 비워 질때가 있다.
뭐.. 개개인 취향이 그럴수도 있지만.. 내가 볼때는 영~~ 이상하게 보이더라.
table 로 레이아웃을 잡을때는 뭐 height: 100% 값이 잘 먹고 해서 쉽게 구현을 했지만..
처음 div로 레이아웃을 잡을때 이런 것 조차 왜 이렇게 잡기 힘들던지...
혹시나 도움이 될까 하고 적어 본다~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> eyes of siche </title>
</head>

<body>
<style type="text/css">
    html, body { height:100%; margin:0; }
    *html .body { height:100%; }
    .head { height: 100px; background: #790000; }
    .body { min-height: 100%; margin-top: -200px; }
        .cnts { float:left; width: 100%; margin-top: 200px; background: #ccc; }
    .foot { clear: both; height: 100px; background: #790000; }
</style>
<div class="head">머리</div>
<div class="body">
    <div class="cnts">본문</div>
</div>
<div class="foot">다리</div>
</body>
</html>

head 의 세로가 100px, body 를 margin-top 에 음수를 넣어서 위로 올린다.
body 밑에 foot 가 붙여야 함으로 foot를 보여주기 위해서 foot 의 세로 값 100px 까지 같이 올려 준다.
고로 margin-top: -200px;
body 안에 cnts 도 같이 올라가므로 이놈은 margin-top: 200px; 만큼 밀어 준다.
head , foot 높이 값이 변하면 body, cnts 의 margin-top 값도 신경써서 수정할수 있도록~

Posted by siche

2008/11/13 16:27 2008/11/13 16:27
Tag
, ,
Response
No Trackback , a comment
RSS
http://eos.pe.kr/rss/response/100

Comments List

  1. siche 2008/11/14 00:10 # M/D Reply Permalink

    헛... doctype 위 다른 놈이 있어서 그런지... 미리보기 창에는 적용이 안되는군...;;
    글거 가서 해보면 될꺼에요~ -_-;

Leave a comment
[로그인][오픈아이디란?]

CSS IE

Item Example Comment
IE [if IE] The only currently supported feature is the string "IE", corresponding to Internet Explorer.
value [if IE 7] An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version. For more information, see Version Vectors.
! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.
true [if true] Always evaluates to true.
false [if false] Always evaluates to false.

Thank you for closing the message box.

You are using Internet Explorer.

Welcome to Internet Explorer 7!

You are using IE 7 or greater.

You are using an uplevel browser.

This nested comment is displayed in IE 7.

Proposal of CSS CC

:return WebForm_FireDefaultButton(event, 'ctl00_rs1_WikiContent_ctl01_Editor_Save')" id=ctl00_rs1_WikiContent_ctl01_Editor_Container>

// Hidden syntax (C-style):

@cc lte IE 8

{

 /*...*/

}

// Revealed syntax (BASIC-style):

@cc !IE begin;

 /*...*/

@cc end;

// Non-IE browsers would simply ignore @cc (standard behavior with

// unknown @ blocks and instructions).

Detecting Firefox

If the following code fails to exclusively detect Firefox..
Use "Downlevel-revealed Conditional Comments" to get it working...
Example to force Firefox to use an exclusive css..
 
Valid HTML for downlevel-revealed conditional comments

This topic used to include a discussion of how to create downlevel-revealed conditional comments that are valid HTML 4.01. This discussion appears to have gone missing. Thanks to search engine caches, we can reproduce it below:

Fixing Validation Errors

The downlevel-revealed conditional comment syntax is flagged as invalid HTML by some validation services. Additional characters can be added to construct a valid HTML Comment before and after the HTML content to be revealed.In the example above, the negative conditional expression prevents Internet Explorer from displaying the HTML content within the downlevel-revealed conditional comment block. However, if the conditional expression evaluates to true, the closing "-->" of the first comment appears along with the HTML content in Internet Explorer. To hide these characters from Internet Explorer users, add " HTML

http://msdn.microsoft.com/en-us/library/ms537512.aspx

Posted by siche

2008/10/07 09:24 2008/10/07 09:24
Tag
Response
13 Trackbacks , No Comment
RSS
http://eos.pe.kr/rss/response/85
Leave a comment
[로그인][오픈아이디란?]
« 1 »
블로그 이미지

안돼는 것은 없다.. 항상 방법이 문제일 뿐이다.. 그 방법을 찾기 위해서는 노력할 뿐이다.. - siche

Archives

Recent Posts

  1. apache 다중포트 연결 (1)
  2. 맥북프로 13" MC700KH/A (2)
  3. IOS5 탈옥이 벌써? ㅎㅎ;
  4. jquery cookie (3)
  5. 젠장 맞을 charset

Recent Comments

  1. 개하지 않음 replica rolex 04/16
  2. 좋은 글 퍼가요 앙카 04/07
  3. I seldom drop remarks, but i did som... Florida CPA 03/29
  4. 이런거 잘 안ㅆ는데, 너무 고마워서요 ... itemmm 2012
  5. 엥 댓글이 있었네요.. ㅎㅎ;; ios5를 ... siche 2012

Recent Trackbacks

Calendar

«   2013/05   »
일 월 화 수 목 금 토
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

Site Stats

Total hits:
816469
Today:
251
Yesterday:
548