레이어 얹히기...이게 맞는 걸까요?
개럭시
위의 그림을 보시면
네비가 탑영역 위로 올라가야하고
네비 마우스 오버시 비쥬얼과 컨텐츠 영역이 가려집니다.
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml xml:lang=ko lang=ko
style
* {
padding: 0;
margin: 0;
line-height:100%;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,blockquote,button{margin:0;padding:0;}
body {
font-family:돋움, Verdana, sans-serif;
font-size:12px;
color:#333;
line-height:16px;
}
a:link { color:#333; text-decoration:none;}
a:visited { color:#333; text-decoration:none;}
a:active{ color:#333; text-decoration:none;}
a:hover{ color:#3E7537; text-decoration:none;}
img {border:none;}
#top {position:absolute; width:100%;}
#top img {display:block;}
#top_d01 {width:1000px; margin:0 auto;}
#top_logo {display:inline; float:left; padding-left:19px;}
#top_search {display:inline; float:left; margin-left:46px; background:url(images/search.gif); width:435px; height:31px;}
#top_menu {display:inline; float:right; margin-top:7px; margin-right:11px;}
#top_menu ul {list-style:none;}
.top_menu01 {width:191px;}
.top_menu01 li {float:left;}
.top_menu02 {clear:both; padding-top:20px; padding-left:32px; padding-right:100px;}
.top_menu02 li {float:left; padding-left:10px;}
#top_d02 {clear:both; width:1000px; margin:0 auto; padding-top:43px;}
#top_d03 {width:1000px; margin:0 auto; position:relative; left:0px; top:0px;}
#top_navi {width:900px; z-index:100; position:absolute;}
/style
/HEAD
BODY
div id=top
div id=top_d01
div id=top_logo
a href=/img src=images/logo.gif width=186 height=56 alt=로고/a
/div
div id=top_search
/div
div id=top_menu
div class=top_menu01
ul
lia href=/ title=Homeimg src=images/tm_01.gif width=30 height=11 alt=Home/a/li
liimg src=images/tm_line.gif width=13 height=11 alt=Home/li
lia href=/ title=관련사이트img src=images/tm_02.gif width=43 height=11 alt=관련사이트/a/li
liimg src=images/tm_line.gif width=13 height=11 alt=Homeli
lia href=/ title=사이트맵img src=images/tm_03.gif width=36 height=11 alt=사이트맵/a/li
liimg src=images/tm_line.gif width=13 height=11 alt=Home/li
lia href=/ title=ENGLISHimg src=images/tm_04.gif width=43 height=11 alt=ENGLISH/a/li
/ul
/div
div class=top_menu02
ul
lia href=/ title=크게img src=images/t_size_big.gif width=42 height=17 alt=크게/a/li
lia href=/ title=원본img src=images/t_size_origin.gif width=42 height=17 alt=원본/a/li
lia href=/ title=작게img src=images/t_size_small.gif width=42 height=17 alt=작게/a/li
/ul
/div
/div
/div
div id=top_d02
img src=images/flash.gif width=900 height=181 alt=flah
/div
/div
div style=position:absolute; width:100%;
div id=top_d03
div id=top_navi
a href=img src=images/navi.gif width=900 height=450 alt=메뉴/a
/div
/div
/div
div style=width:100%; padding-top:280px;
div style=width:1000px; margin:0 auto;
contents
/div
/div/BODY
/HTML
이렇게 짜봤구요..
크로스브라우징은 문제가 없는데...이게 웹표준에 맞는 걸까요?
주의 할점은 tab키로 이동시 탑영역의 컨텐츠 - 네비 - 컨텐츠 순이어야하구요.
아참 제일 중요한거....센터정렬입니다....
-
하련솔
표준은 코드만 맞으면 표준입니다. 한마디로 벨리데이터 통과하면 표준이라는거죠
거기서 의미있는데 쓰자는 스멘틱한 마크업이라고 하죠. 이건 표준과 무관하고 접근성의 일부입니다.
거기서 좀더 머리써야하는게 크로스브라우징 이것도 역시 표준과 무관하면서 오히려 접근성에 많이 해당되는 녀석입니다.
표준에 대한 잘못된 이식을 탈피 하세요~ -
가리매
네...답변감합니다.