현재까지 작성한 코드 입니다.

http://skypia.kr/test 에서 미리보기 하실수 있는데요.

그냥 영역나누는걸 잘 몰라서 그거 위주로 하고있는데 웹표준에 맞게 잘 되고 있는건지 알수가 없어서

고수분들께서 한번 봐주셨으면 해서 올려봅니다.

 프로그래밍 언어들은 익숙한데 웹쪽은 익숙치 않아서 제대로 하고있는건지...ㅠㅠ

css

@charset "utf-8";
/*
Skypia (http://www.skypia.kr/)
newultra3@paran.com
Kim, Tae Yong
*/
body { margin:0; text-align: center; font-family:dotum; font-size:.75em; background:#f8f8f8; color:#000;}
/* layout frame */
#header {position:relative; width:100%; height:100px; background:url(../images/background.gif) left bottom; z-index:1; margin:0 auto;}
/* header는 최상단에 사이트로고와 로그인, 로그아웃 버튼등이 위치하는 공간 입니다. */
#header_body {position:relative; width:880px; margin:0 auto; }
/* 실질적인 로고와 메뉴등이 적용되는 영역 입니다. */
#logobox {position:absolute; height:50px; width:200px; background-color:#00FF00; top:5px;}
/* 사이트 로고가 들어갈 공간입니다. */
/* 1차 메뉴가 출력되는 레이어 입니다. */
#gnb {position:absolute; top:62px; left:15px; margin:0; padding:0; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li {display:inline; position:relative; left:-2px; z-index:1;  list-style:none; float:left; width:auto; background:url(../images/default/bgGnbVr.gif) no-repeat left 50%; white-space:nowrap; line-height:16px; letter-spacing:-1px;}
#gnb li a {display:block; float:left; padding:10px 15px 0 15px; width:auto; height:24px; color:#aaa; white-space:nowrap; text-decoration:none;}
#gnb li a:hover,
#gnb li a:focus {color:#000;}
#gnb li.on {position:relative; z-index:2; padding-left:3px; margin:0 -2px 0 2px; background:url(../images/default/bgGnbOn2.gif) no-repeat left top; font-weight:bold;}
#gnb li.on a {padding-right:18px; color:#FFF; background:url(../images/default/bgGnbOn.gif) no-repeat right top;}
#gnb li.on a:hover {color:#FFF;}
/* 메뉴 밑 컨텐츠 영역입니다. */
#content_body {position:relative; background-color:#666666; width:880px; margin:0 auto; padding-top:5px;}
/* Site Layout - Column Left */
#content_left {position:relative; width:200px; float:left; background-color:#00FF00}
#content_left .mask {width:200px; height:5px; background:#fff; display:block;}
.login_box {margin-top:10px; width:200px; height:100px; border:1px solid #dedede; background-color:#FFFFCC}

<!--%import("css/style.css")-->
<!-- 헤더부분 입니다. 로고부터 메뉴까지 영역 -->
<div id="header">
 <div id="header_body">
 
        <!-- 로고가 위치하는 영역입니다. -->
        <div id="logobox">
        logo Area
        </div>
        
        <!-- 1차 메뉴 시작 -->
        <div id="gnb_area">
            <ul id="gnb">
   <!-- main_menu 1차 시작 -->
  <list">!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
   <!--@if($val['selected'])-->
    {@ $menu_1st = $val }
   <!--@end-->
   <li <class="on">!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <onclick="window.open(this.href);return">!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<>{$val['link']}!--@end-->>{$val['link']}</a></li>
  <

아참... 로그인은 로그인폼이 있긴있지만... 상단에서 로그인버튼 누르면 XE 홈페이지처럼 팝업형태로 나타나게 할껀데요.

이거 적용은 쉬운데...

뭔가 슬며시 나타나게 하고 싶어요.

premiumxe 처럼 말이죠. jquery를 사용했다고 하셨던거 같은데 관련 자료를좀 구할수 없나요?