메인쪽의 슬라이드되는 곳에 텍스트를 어떻게 넣어야할까요?
본문
아래 url 보시면, 메인 상단 슬라이드되는 곳의 오른쪽 비어있는 곳에 텍스트를 넣을려고 합니다.
3줄 글자가 들어갑니다.
그런데, 아무리생각해도 잘 모르겠네요.,.
어떻게 넣어야할지..
대충 감이 오긴하는데, 왠지 하게되면 오류나거나 안될것 같아서 여쭈어 봅니다.
초보자라 고수님 부탁드립니다.
그리고, 그 바로 밑에 빨간선이 메인슬라이드와 간격이 떨어져있는데 붙일 수 있는 방법이 어떻게되나요?
border주는것 같긴한데 정확히 잘 모르겠네요..
암튼 고수님 답변주세요.
답변 3
main_visual 이미지 크기가 가변적이므로
#container .main_visual에 min-height가 불필요하고, 하단 분홍색 라인 <div class="visual_line"></div> 을 따로 넣지 말고 #container .main_visual에 보더 값을 넣어서 대체하는게 나아보임
그리고 이미지에 텍스트를 넣는건 bxSlider 소스에서 "captions: true, // 이미지의 title 속성이 노출된다."를 이용해서 이미지 태그에 title를 추가해서 입력하시면 될듯합니다.
<!-- S : MAIN VISUAL SLIDE -->
<div>
<ul class="bxslider">
<li>
<div>
<img src="images/main/main_visual.png" title="원하는 3줄 텍스트<br>원하는 3줄 텍스트<br>원하는 3줄 텍스트"/>
</div>
</li>
<li>
<div>
<img src="images/main/main_visual.png" title="원하는 3줄 텍스트<br>원하는 3줄 텍스트<br>원하는 3줄 텍스트"/>
</div>
</li>
</ul>
</div>
이렇게 입력하시고, 스타일 시트는
/common/layout.css에서
#container .main_visual {border-bottom:4px solid #ff596d;}
/common/jquery.bxslider.css에서
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption { position:absolute; bottom:0; left:0; background:#666\9; background:rgba(80, 80, 80, 0.50); width:100%; }
.bx-wrapper .bx-caption span { color:#fff; font-family:Arial; display:block; font-size:.85em; line-height:1em; padding:10px; }를
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption { position:absolute; top:150px; right:100px; width:100%; }
.bx-wrapper .bx-caption span { color:#fff; font-family:Arial; display:block; font-size:.85em; line-height:1em; padding:10px; }
이런식으로 사이트에 맞춰서 수정하시면 될것 같네요
네 답변 감사합니다. 질문에 이걸 빠뜨렸네요. 죄송..
원래 글자추가는 이런식으로 들어가야거든요.
http://wixmodoo.kr/chunsa/images/main_visual.png
그러니깐 보시면 알겠지만, 위, 아래는 내용줄, 가운데는 사이트명..이렇게 들어가는지라.
님처럼 해도 할수있을까요? 제가 원본 글 들어가는 내용을 잊고 답주신것으로는 왠지 좀 안될듯싶기도하네요^^;
링크된 이미지 처럼 보이길 원한다면 차라리 main_visual.png 파일에 지금처럼 텍스트를 넣어서 한장의 이미지로 처리하는게 낫지않나요?
특히나 중간 천사맘테라피 앞뒤로 날개 이미지 까지 넣어야 한다면 그게 더 나은 방법 같습니다.
굳이 텍스트를 뿌려서 만들겠다면 텍스트에 스타일을 입혀주면 되겠지만 많이 복잡해지겠죠
<!-- S : MAIN VISUAL SLIDE -->
<div>
<ul class="bxslider">
<li>
<div>
<div class="main_text">
<p class="tit">올바른 1:1어쩌고</p>
<h4>천사맘테라피</h4>
<p class="txt">산모님들 어쩌고 <strong>빠른 쾌유 어쩌고</strong></p>
</div>
<img src="images/main/main_visual.png"/>
</div>
</li>
<li>
<div>
<div class="main_text">
<p class="tit">올바른 1:1어쩌고</p>
<h4>천사맘테라피</h4>
<p class="txt">산모님들 어쩌고 <strong>빠른 쾌유 어쩌고</strong></p>
</div>
<img src="images/main/main_visual.png" />
</div>
</li>
</ul>
</div>
<style>
.bx-wrapper ul li{position: relative;*zoom: 1;}
.bx-wrapper ul li .main_text{position:absolute; top:150px; right:100px;z-index:10000}
.bx-wrapper ul li .main_text h4{글자색깔,크기등등}
.bx-wrapper ul li .main_text h4:before { content:url(경로/날개이미지 앞쪽.jpg);vertical-align:middle;margin:0 20px 0 0}
.bx-wrapper ul li .main_text h4:after { content:url(경로/날개이미지 뒷쪽.jpg);vertical-align:middle;margin:0 0 0 20px}
.slider4 .slide .main_text h4{font-size:46px;color:#ff596d;line-height:100%;margin:20px 0}
.bx-wrapper ul li .main_text .tit{글자크기 등등}
.bx-wrapper ul li .main_text .txt{글자크기 등등}
.bx-wrapper ul li .main_text .txt strong{color:#ff596d}
</style>
다행히 무사히 해결하였습니다. 감사합니다.^^ 다음번에도 알려주신 소스 써먹어야겠네요.~
안녕하세요. 혹시 괜찮으시면 한번 더 문의드려도 될까요?ㅡㅡ;
님 알려주신대로 상단의 메인 슬라이드에 적용시켰습니다. 그런데 이것이 브라우저를 줄이면 글들이 가운데 솔리네요.ㅡㅡ; 알려주신 대로 거의 같이 했는데 제가 적용한 소스가 문제인가요?
아무리 봐도 같은 소스이긴한데..;;;
혹시나 여쭈어봅니다. 뭐가 문제인지..
http://angelmom.wixweb.kr/
/* 빨간선과 메인슬라이드 간격 붙도록 */
#container .main_visual { min-height: initial; }
.bx-wrapper img { display: block; }
/* 텍스트 예시 (실제로는 html, css 에 이부분의 스타일처럼 표현되도록 구성 필요) */
.bx-wrapper ul li div:before { content: "설명1\a description 2\a 12345"; position: absolute; right: 10%; top: 10%; white-space: pre; text-align: right; font-size: 2.0em; }
답변 감사합니다...근데 추가적으로 이것 이미지를 올렸어야하는데, 못올렸네요.ㅡㅡ; 죄송..
빨간선 메인슬라이드 선의 간격은 해결되었는데,
우측에 글자 추가하는건 원래 글자 이렇게 들어가야하거든요.
http://wixmodoo.kr/chunsa/images/main_visual.png
한문장씩 해서 3줄로 들어가게할려니 좀 헷갈리네요. 님이 알려주신건 한번에 3줄 다 들어가는건데 1문장씩은 3줄 들어가는 방법은 어떻게 되나요?
잘안되네요.ㅡㅡ;
.bx-wrapper ul li .main_text{position:absolute; top:140px; right:350px;z-index:99999}를
.bx-wrapper ul li .main_text{position:absolute; top:20%; left:90%;z-index:99999} 처럼 위치를 %로 잡아주시는게 맞을것 같구요. 그리고 텍스트 사이즈도 px이 아닌 em단위로 설정을 하면 화면이 줄어들면 이미지와 같이 글자크기도 줄어들겠죠