묻고답하기
컨텐츠위젯-이미지 테두리 추가시 발생하는 문제
2011.07.08 10:26
테두리를 추가하는 방법을 질문하였는데 달빛늑대 님께서 친절하게 잘 가르쳐 주셨습니다.
그래서 그대로 했는데 문제가 생겼습니다.
테두리가 왼쪽과 위쪽에만 추가가 되고, 오른쪽과 아래쪽에는 나타나지 않습니다.
어떻게 하면 될까요? 도움을 요청합니다.
아래 이미지에서 빨간색 줄을 그은 부분에도 테두리가 나타나는 방법을 좀 가르쳐 주세요~
홈페이지 주소는 http://www.hmuchurch.com 입니다.
참고로 달빛늑대님께서 가르쳐 주신 방법은 아래와 같습니다.
---------------------------------------------------------
/xe/widgets/content/skins/default/css/widget.css 파일 찾아 여시고,
.widgetGalleryA LI .thumb IMG 를 찾으셔서
스타일을 추가해 보세요.
테두리만 #cccccc 색상으로 두께 1px로 줄 경우
.widgetGalleryA LI .thumb IMG { .....; border:1px #cccccc solid; }
그리고 그림과 약간 간격이 있었으면 싶을 경우
.widgetGalleryA LI .thumb IMG { .....; border:1px #cccccc solid; padding:3px; }
그리고 마우스가 오버될 때 테두리 색상이 #000000 색상으로 변했으면 싶을 경우
.widgetGalleryA LI .thumb IMG <- 이 줄을 몽땅 복사해서 바로 아래에 한줄 더 만들어 주고 필요한 부분만 수정.
.widgetGalleryA LI .thumb IMG { .....; border:1px #cccccc solid; padding:3px; }
.widgetGalleryA LI .thumb IMG:hover { .....; border:1px #000000 solid; padding:3px; }
를 적용해 저장해 보세요.
댓글 2
-
ForHanbi
2011.07.08 11:58
-
한마음^^
2011.07.08 23:54
한비님 감사합니다.^^!! -
달빛늑대
2011.07.08 19:18
할당된 크기와 내용의 크기가 같은 상황에서 내용인 이미지에 테두리를 주니 크기가 커져서 가려지는 현상입니다.
사용하시는 위젯의 구조를 잘 몰라서 ForHanbi 님의 답변중 소스내용을 빌려와 살을 붙이자면...gallay.html 파일에서...
<li style=”width:{$widget_info->thumbnail_width+8}px;”> <- 이부분 소스는 추측입니다.
<a href="{$item->getLink()}" class="thumb" style="width:{$widget_info->thumbnail_width+8}px; height:{$widget_info->thumbnail_height+8}px">위 부분을 찾아서 붉은색 부분을 넣어 줘 보세요. (그래도 안보이면 숫자는 조절해 주시구요)
그런데 세팅된 이미지 크기에 따라 일정하게 반응 할 필요가 없다면...<li style=”width:173px;”> <a href="{$item->getLink()}" class="thumb" style="width:173px; height:88px;">
처럼 아예 크기를 지정해 주어도 되겠구요.
-----------------------------------------------------------------------------------------
PS. 혹시나...
크기를 키우다가 레이아웃이 밀려져서 가로 4개의 이미지가 3개가 되면서 밀리는 경우가 있을 수 있습니다.
썸네일 전체 가로 크기의 제한 때문입니다.
이 부분의 크기를 수정하게 되면... 화면 전체 레이아웃에 영향이 있을 수 있으니까 그럴경우는 위에 처럼 수정하지 마시고 같은 소스위치에서 아래 부분 두 곳의 붉은색 부분을 추가해 주어서 이미지의 크기를 줄이는 방법도 고려해 보세요.
(테두리가 보여질 때까지 숫자를 가감해 주면서 맞춰 보세요)<a href="{$item->getLink()}" class="thumb" style="width:{$widget_info->thumbnail_width}px; height:{$widget_info->thumbnail_height}px">
<!--@if($item->getThumbnail())-->
<img src="{$item->getThumbnail()}" style="width:{$widget_info->thumbnail_width-8}px; height:{$widget_info->thumbnail_height-8}px"/>
<!--@else-->
<span class="imgNone">{$lang->none_image}</span>
<!--@end-->
지난번 답변후 사이트에 수정된 것을 보았는데, 선이 많아 보여서 일부러 두 곳의 테두리를 안나오게 하셨나보다~ 했습니다. ㅡㅡ;;
답변에는 이미지가 파일로 안 올라가는군요.
곧 없어질 수 있는 이미지 링크지만 참조하세요. (위와 내용은 같습니다.)
-
한마음^^
2011.07.08 23:54
정말 자세한 설명 감사합니다.^^
이런 형태로 되어 있습니다.
즉 한마음님이 이미지 가로 100px 세로 100px로 이미지 작업을 할 시에 이미지에 1px의 border를 추가해 버리면
실질적으로 이미지의 넓이는 102 세로는 102px이 되어 버리는데
a는 여전히 100px 100px이라 우측과 하단의 2px이 a를 벗어나기에 거기다가 그것을 감싸는 li부분의 넓이도 이미지의 넓이 기준으로 잡혀 버리기에 잘려버리게 됩니다.
수정을 하실려면
위젯에서 gallery.hml 부분을 수정하시든가 아니면
크롬으로 요소검사를 하시면 img와 img를 감싸는 a 그리고 그것을 감싸는 li 부분의 해당 css가 나올겁니다.
나열된 css중에 가장 상위의 css에 넓이와 높이를 각각 적고 마지막에 !important를 사용해서 html에서 주어지는 style 값보다 상위에 놓게 하는 방법등이 있습니다.
권장할 방법은 gallay.html을 수정하는 방법입니다.