글
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html; charset=euc-kr"/> <title>Tabs</title> <!-- Description : XHTML Tabs style code [ IE6 , IE7 , FF2] --> <!-- Author : blueb(http://blueb.net/blog) --> <!-- Date : 2008-05-08 --> </head> <body> <scripttype='text/javascript'> function tabs(idx){ for(i = 1; i <= 3 ; i++ ){ document.getElementById('tab'+i).className = ""; document.getElementById('content'+i).className = "content hide"; } document.getElementById('tab'+idx).className = "active"; document.getElementById('content'+idx).className = "content show"; } </script> <!--[if IE 6]> <styletype='text/css'> /* IE 6 */ div.tabs-area { position:relative; z-index:2; width:100%; height:48px; padding:0;margin:0;overflow:hidden; } div.tabs-line { position:relative; z-index:1; width:100%; height:0; top:-1px; border-top:1px solid #D3D9E6; } </style> <![endif]--> <!--[if IE 7]> <styletype='text/css'> /* IE 7 */ div.tabs-area { position:relative; z-index:2; height:48px;width:100%;padding:0;margin:0 } div.tabs-line { position:relative; z-index:1; width:100%; height:1px; top:-2px; border-bottom:1px solid #D3D9E6; } </style> <![endif]--> <!--[if !IE]>--> <styletype='text/css'> div.tabs-area { position:relative; z-index:2; width:100%; height:45px; padding:0;margin:0;overflow:hidden; } div.tabs-line { position:relative; z-index:1; width:100%; height:1px; top:-1px; border-top:1px solid #D3D9E6; } </style> <!--<![endif]--> <styletype='text/css'> ul.tabs { padding:0px;margin:0px; z-index:2; } ul.tabs li { list-style:none; display:inline; height:50px; } ul.tabs li a { padding:5px 20px 3px 20px; border:1px solid #D3D9E6; text-decoration:none; font-size:9pt; line-height:30px; color:#4B69AF; background:#E9ECF2; } ul.tabs li a:hover { background:#E8FFFF; } ul.tabs li a.active { background:#fff; color:#4B69AF; border:1px solid #D3D9E6; border-bottom: 1px solid #ffffff; padding:10px 20px 3px 20px; font-weight:bold; line-height:70px; } div.content { /* 컨텐츠 영역 박스 스타일 지정 하는곳 */ } div.show { display:block;} div.hide { display:none; } </style> <h3>IE6, IE7, FF2 Tabs</h3> <div> <divclass='tabs-area'> <ulclass='tabs'> <li></li> <li><aid='tab1'title="Tab1 Desc"href="javascript:tabs('1');"class='active'>Tab 1</a></li> <li><aid='tab2'title="Tab2 Desc"href="javascript:tabs('2');">Tab 2</a></li> <li><aid='tab3'title="Tab3 Desc"href="javascript:tabs('3');">Tab 3</a></li> </ul> </div> <divclass='tabs-line'></div> </div> <divid='content1'class='content show'> <h1>Content 1</h1> </div> <divid='content2'class='content hide'> <h1>Content 2</h1> </div> <divid='content3'class='content hide'> <h1>Content 3</h1> </div> </body> </html> http://blueb.net/blog/1224
'웹스터디 > xhtmlcss' 카테고리의 다른 글
| CSS 를 이용하여 ‘따라다니는 배너’ 만들기 (0) | 2008.07.29 |
|---|---|
| 시각장애인용 웹브라우저에서 글자를 판독할 때 사용되는 목소리 정하기 (0) | 2008.07.12 |
| 인터넷익스플러 핵(hack) 박스모델링 (0) | 2008.07.12 |
| CSS 핵 - 브라우저별 CSS 적용 (0) | 2008.07.11 |
| CSS : 리스트와 불릿 이미지 - ul, li (0) | 2008.07.09 |
| 리스트 태그(ul, ol, li)의 list-style-type 종류 (0) | 2008.07.09 |
| overflow:hidden; text-overflow:ellipsis (0) | 2008.07.06 |
| 효율적인 폰트 속성 지정하기 (간단한 팁) (0) | 2008.06.30 |
| 크로스 브라우징을 위한 CSS적용 Tip (0) | 2008.06.21 |
| 크로스브라우징 - 박스모델의 padding, magin, width (0) | 2008.06.21 |
RECENT COMMENT