묻고답하기
more버튼 위치변경과 자리잡는 질문입니다
2009.07.27 19:54
@charset "utf-8";
/* NHN > UIT Center > Open UI Technology Team > Jeong Chan Myeong(dece24@nhncorp.com) */
.widgetBoxContainer{ position:relative;}
.widgetBox{ position:relative; *zoom:1; }
.widgetBox:after{content:""; display:block; clear:both; }
.widgetBox .widgetBoxHeader{ font-size:16px; font-family:Tahoma; margin:0; z-index:10;}
.widgetBox .widgetContainer{ position:relative; z-index:10;}
.widgetBox .widgetMore{ position:absolute; display:block; text-decoration:none; font-size:11px !important; white-space:nowrap; font-family:Tahoma; color:#000; text-align:center; z-index:20;}
.widgetBox .widgetMore img{ border:0;}
.widgetBox .rcContainer{ display:block; width:100%; font-size:0; line-height:0; z-index:1; *zoom:1;}
.widgetBox .rc{ position:absolute; display:block; font-size:0; line-height:0; overflow:hidden;}
.widgetBox .rcTop .tl{ top:0;}
.widgetBox .rcTop .tr{ top:0;}
.widgetBox .rcBottom .bl{ top:0;}
.widgetBox .rcBottom .br{ top:0;}
.widgetBoxA .widgetBoxHeader{ position:relative; padding:4px 0; margin:1px; border-bottom:1px solid #ccc;}
.widgetBoxA .widgetMore{ top:0px; left:0; color:#888;}
.widgetBoxA .rcContainer{ display:none !important; }
제가 아래사진과 같이
more버튼대신 '자유게시판 FREE BOARD"라는 이미지를 넣어서 해당 이미지를 누르면 게시판으로 넘어가도록 하려는데요..
more버튼이 처음에 이상한 위치에 있어서 위젯스타일을 뒤져서 어찌 위치는 다 맞췄습니다.
그런데 문제가
이런식으로 more버튼(여기서는 test중입니다 라는문구)이 바로 아랫줄의 글의 내용과 겹치게 되는것입니다.
z-index가 높이를 가지는것 같아서 수정도 해보고 이래저래 건드려 봤습니다만 저 위의 내용조차 처음 보는 수준이기에..
도무지 찾을수가 없습니다.
어떻게 해야 more버튼이 위치를 가지고 글을 아래로 한줄 내려보낼까요?
아니면 widgetstyle.html에서 수정을 해야하나요?
<!--%import("css/widgetBoxStyle.css")-->
<div class="widgetBoxContainer {$widgetstyle_extar_var->ws_style}">
<div class="widgetBox">
<!--@if($widgetstyle_extar_var->ws_title_image || $widgetstyle_extar_var->ws_title)-->
<h3 class="widgetBoxHeader" <wws_title_colors_title_color)-->style="color:{$widgetstyle_extar_var->ws_title_color};"
혼자하고 혼자 해결해 버렸네요...;;
<!--@if($widgetstyle_extar_var->ws_more_image)-->
<img src="{$widgetstyle_extar_var->ws_more_image}" />
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<!--@if($widgetstyle_extar_var->ws_title_image)-->
<img src="{$widgetstyle_extar_var->ws_title_image}" />
정석적인 방법은 아니고 편법이지만..
더 이상 저에게 수정 할 필요가 없는 스킨이기에 그냥 해버렸습니다.