Question

我无法在我的图片滑块下定位div。它们都在滑块上方，就像滑块不在容器内一样。每当我尝试在包装器下放置另一个div时，位置就完全关闭了。是因为我在包装div中有滑块吗？

<body>

<div class="container" id="container-1">

    <!--Navigation Begin-->
    <div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav">
    <div class="container">

        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
        <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="/"><img src="../Images/nav-logo.png" alt="Breakday Charters Logo"></a>

        <div class="nav-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">Home</a>
                </li>
                <li><a href="#">About</a></li>
                <li><a href="#">Booking</a></li>
                <li><a href="#">Report</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>

            </ul>

    <ul class="nav navbar-nav pull-right">
      <h3 id="number-head">Get Hooked</h3>
      <p id="nav-number">(252)xxx-xxxx</p>
      <li><img src="../Images/hook.png" alt="hook" id="nav-hook"/></li>
    </ul>
            </ul><!-- end nav pull-right -->
        </div><!-- end nav-collapse -->

    </div><!-- end container -->
</div><!-- end navbar -->

<!--================Carousel===============-->

<div id="wrapper">
    <div id="carousel">
        <img src="../Images/Carousel/breakday-boat-lrg.png"alt="Breakday Charters Boat" width="990" height="450" class="img-responsive" />
        <img src="../Images/Carousel/turtle.png" alt="turtle" width="990" height="450" class="img-responsive"/>
        <img src="../Images/Carousel/justin-and-fish.png" alt="Captain Justin" width="990" height="450" class="img-responsive" />
        <img src="../Images/Carousel/shark.png" alt="shark" width="990" height="450" class="img-responsive"  />
    </div>
    <a href="#" id="prev" title="Show previous"> </a>
    <a href="#" id="next" title="Show next"> </a>
    <div id="pager"></div>
</div><!--wrapper div end-->

</div><!--container-->

CSS：

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

/*Navigation*/
#custom-nav {
    min-height:85px;
    background: #FFF;
    border-bottom:#0e76bc medium solid;
}

.nav.navbar-nav li a {
    color: #0E76BC;
    margin-top:25px;
    font-size:15px;
}

.nav.navbar-nav li a:hover {
    color: #494238;
}

.nav.navbar-nav.pull-right li #nav-hook {
    position: absolute;
    z-index: 1031;
    top: -40px;
}
.nav.navbar-nav.pull-right #nav-number {
    font-size: 16px;
    color: #333;
    font-weight: bold;
}
.nav.navbar-nav.pull-right #number-head {
    font-weight: bold;
    color: #0e76bc;
}
.nav.navbar-nav.pull-right {
    margin-top: 5px;
}

/* --------------------------------------
   Carousel
   -------------------------------------- */

#wrapper {
    background-color: #fff;
    width: 100%;
    height: 450px;
    margin-top: -225px;
    overflow: hidden;
    position: absolute;
    top: 40%;
    left: 0;
}
#carousel img {
    display: block;
    float: left;
    clear:right;
}
#prev, #next {
    background-color: rgba(255, 255, 255, 0.7);
    display: block;
    height: 450px;
    width: 50%;
    top: 0;
    position: absolute;
}
#prev:hover, #next:hover {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.8);
}
#prev {
    left: -495px;
}
#next {
    right: -495px;
}
#pager {
    margin-left: -470px;
    position: absolute;
    left: 50%;
    bottom: 10px;
}
#pager a {
    border: 2px solid #fff;
    border-radius: 10px;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px 0 0;
}
#pager a:hover {
    background-color: rgba(255, 255, 255, 0.5);
}
#pager a span {
    display: none;
}
#pager a.selected {
    background-color: #fff;
}

Answer 1

对于滑块横幅，您可以试试这个

html

<div class="banner">
  <div class="bannerslider">
    <div class="slidertxt">
      <div class="slidernumber">
        <div id="nav">
          <ul>
            <li><a class="active" href="#" onclick="goto('#1', this); return false">1</a></li>
            <li><a href="#" onclick="goto('#2', this); return false">2</a></li>
            <li><a href="#" onclick="goto('#3', this); return false">3</a></li>
            <li><a href="#" onclick="goto('#4', this); return false">4</a></li>
            <li><a href="#" onclick="goto('#5', this); return false">5</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="bannerimage">
    <div id="contentt">
      <div class="contentbox-wrapper">
        <div id="1" class="contentbox">
          <p> <a href="#"><img border="0" src="../Images/Carousel/breakday-boat-lrg.png" title="Haani"></a> </p>
        </div>
        <div id="2" class="contentbox">
          <p> <a href="#"><img border="0" src="../Images/Carousel/breakday-boat-lrg.png"></a> </p>
        </div>
        <div id="3" class="contentbox">
          <p> <a href="#"><img border="0" src="../Images/Carousel/breakday-boat-lrg.png"></a> </p>
        </div>
        <div id="4" class="contentbox">
          <p> <a href="#"><img border="0" src="../Images/Carousel/breakday-boat-lrg.png"></a> </p>
        </div>
        <div id="5" class="contentbox">
          <p> <a href="#"><img border="0" src="../Images/Carousel/breakday-boat-lrg.png"></a> </p>
        </div>
      </div>
    </div>
  </div>
</div>

css：

.banner {
    width: 900px;
    height: 357px;
    margin:0;
    float: left;
}
.bannerslider {
    width: 500px;
    position: absolute;
    height: 351px;
    float: left;
    z-index: 80;
    background-size: 350px 351px;
    margin: 0 0 0 2px;
}
.slidertxt {
    font-family: 'AUdimat-Regular';
    font-weight: normal;
    text-shadow: 0 2px 1px #000000;
    color: #fbfbfb;
    font-size: 14px;
    width: 500px;
    margin: 60px 0 0 30px;
    position: absolute;
}
#contentt {
    overflow: hidden;
}
.contentbox-wrapper {
    position: relative;
    left: 0;
    width: 5000px;
    height: 100%;
}
.contentbox {
    width: 975px;
    height: 100%;
    float: left;
}
.slidertxt p {
    font-family: 'AUdimat-Bold';
    color: #fbfbfb;
    font-size: 30px;
    width: 960px;
}
.slidernumber {
    height: 30px;
    margin-top: -40px;
    position: relative;
    z-index: 10000;
}
#nav {
    margin-top: 0;
}
#nav ul li {
    display: inline;
}
.slidernumber a {
    color: #fbfbfb;
    text-decoration: none;
    font-size: 13px;
    font-family: 'AUdimat-Regular';
    padding: 0 5px 0 5px;
    margin: 5px 5px 0 10px;
    display: inline;
    float: left;
}
#nav a.active {
    background: #fbfbfb;
    border: 1px solid #fbfbfb;
    border-radius: 10px;
    color: #8a0338;
}
.bannerimage {
    width: 975px;
    height: 350px;
    z-index: 0;
    margin: 1px 2px 0 5px;
    float: right;
}

JS：

function goto(id, t){   
        $(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
    $('#nav a').removeClass('active');
    $(t).addClass('active');
    }

您也可以尝试slider banner

无法在图像滑块下放置任何div

1 个答案: