홈페이지를 제작하고 있습니다.
 
 제로보드4까지는 그럭저럭 수정해왔는데 좀 편리하거나 자동화된 기능이 많아진 XE가 좋아보여서

 덤볐다가 이 고생이네요 ㅠㅜ CSS라니.. 맨날 테이블태그로 디자인하다 div로 할라니 당췌..

  그래도 이 곳에 CSS에 대해서 기본적인 것은 많이 설명 되있어서 간신히 레이아웃을 원하는대로 만들긴했는데요

 제가 만든 레이아웃에 로그인위젯이 들어갈 자리가 좀 일반적인 스킨보다 좁아서 대폭 사이즈를 줄여야겠는데 모르겠네요ㅠㅜ

 제로보드XE에 들어있던 로그인스킨 중 "기본"(XE_official말구요;)의 소스를 가져다가 폭을 줄이려는데 어디를 손대야할지 모르겠어요;

 아래가 기본 로그인스킨의 css에요

.fc_01 { color:#797771; }
.fc_02 { color:#9A9893; }

.box_login { border:solid 3px #D5D8DB; background:#FFFFFE; margin-bottom:10px;}

.box_login .user_info { padding:5px 0 0 5px; height:22px; }

.box_login .hr_dot_01 { background:url(../images/default/hr_dot_01.gif) repeat-x; height:2px; overflow:hidden; clear:both; margin:6px; }
.box_login .item { background:url(../images/default/bul_01.gif) no-repeat 5px 5px; height:16px; padding:3px 0px 0px 20px; margin-left:5px; margin-top:2px; }
.box_login .item a { color:#666666; text-decoration:none; }
.box_login .item { font-size:11px; letter-spacing:-1px; margin-right:10px; padding:3px 0px 0px 20px; white-space:nowrap; }
.box_login .profile { width:70px; float:left; background:url(../images/default/icon_profile.gif) no-repeat left; }
.box_login .message { width:70px; float:left; background:url(../images/default/icon_note.gif) no-repeat left; }
.box_login .friend { float:left; background:url(../images/default/icon_friend.gif) no-repeat left; }
.box_login .administrative { float:left; background:url(../images/default/icon_key.gif) no-repeat left; margin-right:0px; }
.box_login .administrative a { color:#D80D0F; }
.box_login .lastlogin { clear:both; padding-bottom:5px;}

.box_login .form_field { float:left; margin:9px 9px 0 9px; _margin:3px 3px 0 3px; height:55px; }
.box_login .form_field div { margin-top:2px; margin-bottom:3px; }
.box_login input.submit { width:45px; height:45px; background:url(../images/default/login_btn_submit.gif) no-repeat; border:none; margin:9px 0 0 0; _margin:5px 0 0 0; cursor:pointer; }
.box_login .input { width:140px; background-color: #ffffff;  border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6;  padding:2px; height:14px; margin:0px; cursor:text; color:#666666;}
.box_login ul.option { clear:both; height:20px; margin:0 0 0 9px;}
.box_login ul.option li { float:left; list-style:none;}
.box_login ul.option li a.btn { background:url(../images/default/bul_01.gif) no-repeat left; padding-left:10px; margin-left:14px; }
.box_login .checkbox  { width:15px; height:15px; margin:-1px 0px 0px -1px; margin-right:2px; }
.box_login .clear { clear:both; }
.box_login ul.extra_option { clear:both; height:40px; }
.box_login ul.extra_option li a {text-decoration:none;}
.box_login ul.extra_option li a.btn { background:url(../images/default/bul_01.gif) no-repeat left; padding-left:10px; margin-left:20px; }

.openid_login { clear:both; height:38px; border:3px solid #D5D8DB; background-color:#FFFFFF; margin:0 0 10px 0; }
.openid_login .openid_user_id { width:110px; _width:100px; background: url(../images/openid_login_bg.gif) left no-repeat; background-color: #ffffff; background-position: 0 50%; padding:3px 3px 3px 18px; border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; height:16px; line-height:1em; vertical-align:middle; margin-bottom:.5em; color:#666666;}

.openid_login .wButtonTypeA { display:block; cursor:pointer; background:url(../images/default/buttonTypeACenter.gif) repeat-x left center; line-height:100%; overflow:visible; color:#3f4040; margin:0 1px; white-space:nowrap;border:0px;}
.openid_login .wButtonTypeA:hover { text-decoration:none;}
.openid_login .wButtonTypeA img { vertical-align:middle;}
.openid_login .wButtonTypeA input { border:none; cursor:pointer; background:url(../images/default/buttonTypeACenter.gif) repeat-x left center; line-height:100%; overflow:visible; color:#3f4040; margin:0 1px; white-space:nowrap;border:0px;  vertical-align:middle; }
.openid_login .wButtonTypeA .leftCap { width:2px; height:24px; background:url(../images/default/buttonTypeALeft.gif) no-repeat; margin:0 .3em 0 0;  position:relative; left:-1px;}
.openid_login .wButtonTypeA .rightCap { width:2px; height:24px; background:url(../images/default/buttonTypeARight.gif) no-repeat; margin:0 -1px 0 .4em;}
.openid_login .wButtonTypeA .icon { margin:0 .2em;}
.openid_login .wButtonWrite ul { text-align:center; clear:both; display:block;}
.openid_login .wButtonWrite li { margin-top:.5em; float:left; margin-left:.3em; list-style:none;}

  그리구 레이아웃에서 로그인위젯의 위치를 좀 세밀하게 조정할 수 있으면 좋겠는데 div와 css로는 당췌 잘 안되는군요 ㅠㅜ

  css에서 margin과 padding을 써도 다른 div영역이 영향을 받아 전체가 틀어져버리고 어떻게 해야할지..

 아래가 레이아웃의 html이구요
 

<div id="contentLeftBGBox">
   <!-- 로그인 위젯 -->
            <div class="leftSideLoginBox">
            <img class="zbxe_widget_output" widget="login_info" skin="default" colorset="default" />    
            </div> 
 </div>

 이것이 레이아웃의 css입니다
 

/* 내용의 왼쪽 박스 (로그인박스배경) */
#contentLeftBGBox {
    width:164px;
 height:524px;
    background:transparent url("../images/default/board_bg_left.jpg") left;
    overflow:hidden;
 float:left;
}

 contentLeftBGBox에서 그 안에 있는 leftSideLoginBox의 위치를 아래로 110픽셀정도 아래로 배치하고 싶은데 어쩌면 좋을까요?