배너 옆 텍스트 위치 문의 드립니다.
본문
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<!-- Source: https://www.jssor.com -->
<script src="js/jssor.slider-27.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
jssor_1_slider_init = function() {
var jssor_1_options = {
$AutoPlay: 1,
$Idle: 0,
$SlideDuration: 5000,
$SlideEasing: $Jease$.$Linear,
$PauseOnHover: 4,
$SlideWidth: 230,
$Align: 0
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*#region responsive code begin*/
var MAX_WIDTH = 1200;
function ScaleSlider() {
var containerElement = jssor_1_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
if (containerWidth) {
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
jssor_1_slider.$ScaleWidth(expectedWidth);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*#endregion responsive code end*/
};
</script>
<style>
/*jssor slider loading skin spin css*/
.jssorl-009-spin img {
animation-name: jssorl-009-spin;
animation-duration: 1.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1200px;height:233px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:1200px;height:233px;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:935px;height:233px;overflow:hidden;">
<div data-p="30.00">
<img data-u="image" src="img/pro_01.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_02.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_03.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_04.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_05.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_06.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_07.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_08.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_09.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_10.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_11.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_12.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_13.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_14.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_15.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_16.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_17.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_19.jpg" />
</div>
<div data-p="30.00">
<img data-u="image" src="img/pro_20.jpg" />
</div>
</div>
</div>
<div style="float:right;width:250px;height:233px;border:px solid red;text-align:center;">
<? include "pcount/counter.php"; ?>
<span style="font-size:15px;font-weight:bold;line-height:35px;margin-top:20px;float:left;">고객이 원하시는 Turret & Tool holder의 기성품, 파생품, 개발품 문의를 빠르고 친절하게 도와드립니다.</span>
<div class="button" style="float:left;width:100px;height:30px;padding-top:5px;font-size:15px;border:1px solid #ccc;margin:20px 0 0 70px;border-radius:5px;">
<a href="../../board/bbs/write.php?bo_table=community03"><b>문의하기</b></a>
</div>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>
<!-- #endregion Jssor Slider End -->
</html>
위 내용은 슬라이드 배너와 텍스트 박스가 가로로 붙어야 하는데
부족한 지식으로 붙이지를 못하네요
한번 봐주셨으면 감사하겠습니다.
답변 4
어떤 요소가 나란히 오지 못하는 이유는 대체로 아래와 같습니다.
첫째, 특정 요소가 한 라인의 대부분의 너비를 차지하는 경우
둘째, 요소 중 하나나 모두에 display:block 요소 속성이 들어간 경우
셋쩨, position:absolute 등으로 절대 위치가 부여된 경우..
위 사항들 위주로 점검해 보세요.
답변 감사합니다 위 세가지 사항 점검 중입니다 ~!
이리저리 찾아보고 소스 수정하고 해도 그대로네요 ㅠㅠ
해당 소스 페이지 좌표를 남겨보세요.
그리고, 해당 페이지 스샷 찍어서 어디 부분이 어디로 가면 좋겠단 식으로 표시해놓으면
도움 받기 쉽지 않을까 합니다.
위처럼, 소스만 적어놔서는 도움드리기 쉽지 않아요.
위 그림 대로 적용 중입니다. 근데 슬라이드 좌우로 버튼을 적용 하려 했는데
소스를 찾다 보니 마우스 드레그로 좌우 방향 전환이 되는 소스가 있어서 적용을 시켜 보려고
했네요 ..
위 소스 코드로 적용을 시키면 이런식으로 나오네요
div 태그 짝이 맞는지 확인해 보시고, 아래 코드 참고해 보세요.
눈여겨 보실 건,
float:right 준 요소가 맨 아래에 있지 않고, 맨 위에 있어야 하는 점에 주의!!
https://codepen.io/sinbi/pen/QxqJzq
답변 감사합니다
sinbi 님 덕분에 열심히 공부했네요
같은 선상에 위치 까지는 가능 한데
슬라이더랑 텍스트 박스는 서로 붙질 않네요
도움 감사드립니다
