个人中心
gpt4 book ai didi

html - 调整大小/扩展幻灯片(在 div 内)覆盖下面的内容

转载 作者：行者123 更新时间：2023-11-28 09:04:33 25 4
gpt4 key购买 nike

我在水平菜单栏下方的 div 中构建了一个带有简单交叉淡入淡出幻灯片的页面。我希望幻灯片占页面宽度的 80%。到目前为止，一切都很好。那部分有效。

问题，我无法理解如何使应出现在幻灯片下方的任何内容向下移动，以便在用户将页面拉得更宽时保持可见。 (或者，如果页面变窄，则紧贴幻灯片 div 的底部。

有点复杂的是，我希望幻灯片与 upper/menu_bar div 的背景部分重叠(如果我给幻灯片 div 的 margin-top: 值为 -70px，这就有效)。不确定这是否是一个问题。

这是当前页面布局的精简 html，下面是我为此准备的 css 文件(一些 id 和类用于其他页面)

问题开始出现在“当前/即将发布的信息部分，如最近的新闻等。应该始终出现在幻灯片下方”这一行上方的某处

<!doctype html>
<html lang="en">
<head>
    <link rel="icon" type="image/png" href="logos/cc_ico.png">
    <link rel="stylesheet" type="text/css" href="new.css" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>New Idea</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
    <script src="jquery/jquery.cycle2.min.js"></script>
    <script type="text/javascript" src="new.js"></script>
    <script type="text/javascript">//show live dimensions of page in dimensions div
    window.onresize = displayWindowSize;
    window.onload = displayWindowSize;
    function displayWindowSize() {
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
        document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
    };
  </script>

</head>
<body>
    <div id="blackbar" style="text-align: right;">
        <div style="float: left;"><!---temp space for debug messages--->
    </div>  
    <div>This page is under development.</div>

    <a href="http://facebook.com/ourcompany" target="_blank" /><img src="logos/_face.png" style="margin:0;" /></a>
    <a href="http://twitter.com/ourcompany" target="_blank" /><img src="logos/_twit.png" style="margin:0;" /></a>
    <a href="http://pinterest.com/ourcompany" target="_blank" /><img src="logos/_pin.png" style="margin:0;" /></a>
    <a href="http://www.linkedin.com/company/ourcompany" target="_blank" /><img src="logos/_link.png" style="margin:0;" /></a>&nbsp;&nbsp;
    </div><!----end of blackbar--->

 <div class="whitecontent"><!--start the wrapper-->

 <div class="brickbar">
    <div class="content_box_centerwide">
        <img src="logos/CCLogoWeb5.png" style="width:40%; margin:0px; max-width:440px; min-width:360px; margin-bottom:-40px" /><!---absorbs top whitespace of number.png--->
        <img src="logos/number.png" style="width:40%; margin:0px; max-width:440px; min-width:360px; float: right; ;" />
        <div style="clear: both;"></div>
    </div>

    <div id="menu_row">
        <div class="buttonspace">
            <form method="post" action="" target="_self" title="[title]">
            <input type="submit" value="Home" class="visitorButton">
            <input type="hidden" name="do_this" value="new_Home.php"></form>
        </div>

         <div class="buttonspace">
            <form method="post" action="" target="_self" title="[title]">
            <input type="submit" value="Listings" class="visitorButton">
            <input type="hidden" name="do_this" value="new_Listings.php"></form>
        </div>

         <div class="buttonspace">
            <form method="post" action="" target="_self" title="[title]">
            <input type="submit" value="Search MLS" class="visitorButton">
            <input type="hidden" name="do_this" value="new_Search_MLS.php"></form>
        </div>         
        <div class="buttonspace">
            <form method="post" action="" target="_self" title="[title]">
            <input type="submit" value="About Us" class="visitorButton">
            <input type="hidden" name="do_this" value="new_About_Us.php"></form>
        </div>

         <div class="buttonspace">
            <form method="post" action="" target="_self" title="[title]">
            <input type="submit" value="Feedback" class="visitorButton">
            <input type="hidden" name="do_this" value="new_Feedback.php"></form>
        </div>
    </div><div id="menu_lastrow_bottompad"></div></div>

    <style>
    @media all and (max-width: 359px) {
      .midbar_toppad2 { display: none; }
      .midbar_toppad { display: none; }
      .wideslides { display: none; }
    }
    </style>

    <div class="midbar_toppad2">
    <style>
    /* the slide container with a fixed size */
    .wideslides {
        box-shadow: 0px 0px 6px black;
        margin-left: auto;
        margin-right: auto;
       margin-top:-70px;   /*hopefully floats up into brickbar */
        /*margin-bottom:-70px;  hopefully floats up into brickbar */
        width: 80%;
        min-width:360px;
        position: relative;
        background-color: transparent;
    }
    /* the images are positioned absolutely to stack. opacity transitions are animated. */
    .wideslides img { 
      display: block;
      position: absolute; 
      transition: opacity 1s;
      opacity: 0;
      width: 100%;
      border: solid thick #004000;
    }
    /* the first image is the current slide. it's faded in. */
    .wideslides img:first-child { 
      z-index: 2; /* frontmost */
      opacity: 1;
    }
    /* the last image is the previous slide. it's behind the current slide and it's faded over. */
    .wideslides img:last-child {
      z-index: 1; /* behind current slide */
      opacity: 1;
    }
    </style>

<script type="text/javascript">
function nextSlide() {/* very simple crossfade */
    var q = function(sel) { return document.querySelector(sel); }   
    q(".wideslides").appendChild(q(".wideslides img:first-child"));
}
setInterval(nextSlide, 5000)
</script>

    <div class="wideslides">
        <img src="images/crops_h/h_crop_03.JPG" r=1 />
        <img src="images/crops_h/h_crop_18.jpg" r=2 />
        <img src="images/crops_h/h_crop_07.JPG" r=3 />
        <img src="images/crops_h/h_crop_14.jpg" r=4 />
        <img src="images/crops_h/h_crop_06.JPG" r=5 /></div> 
    </div>

    <div class="midbar_toppad">

        <div class="content_box_centerwide">
        <center>
            (Section for current/upcoming info like recent news, etc. SHOULD ALWAYS APPEAR BELOW SLIDESHOW)
        </center>
        </div>
    </div>

    <!--//  FOOTER CONTENT  -->
    <div id="dimensions"><noscript>JavaScript must be enabled to utilize all functions on this page.</noscript></div>

    <div id="blackbar"><small>Copyright &copy;2014 Our Co. (Except where otherwise noted.)</small></div>
     </div><!--end the wrapper-->
     <div id="bottombar">&nbsp;</div>
</body>
</html>

这里是.css(上面代码中使用的div如下:

class="brickbar"
class="buttonspace"
class="clearbar"
class="content_box_centerwide"
class="midbar_toppad"
class="midbar_toppad2"
class="visitorButton"
class="whitecontent"
class="wideslides"
id="blackbar" 
id="bottombar"
id="dimensions" 
id="menu_lastrow_bottompad"
id="menu_row"

    body {
    font-family: "Century Gothic",arial,helvetica,sans-serif;
    font-size:12pt;
    text-align:center;
    margin:0px;
    overflow-x: hidden;
}

#whitecontent {/* a wrapper that contains everything */
    background-color:#FFFFFF;
}

#topbar{
width:100%;
margin:0px;
padding-bottom: 5px;
}

.clearbar{/*transparent*/
width:100%;
height: 100%;
margin:0px;
padding-bottom: 5px;
background-color: transparent; /**/
display: inline-block;
}

.brickbar{
background-image:url('../images/ccbrick3_pale.jpg');
width:100%;
margin:0px;
border-bottom: solid thick #004000;
}

.whitebar{/*white*/
width:100%;
margin:0px;
padding-bottom: 5px;
background-color: #FFFFFF; 
}

.midbar{ /* turned this into a class instead of an id*/
width:100%;
margin:0px;
background-color: #FFFFFF; 
color: #000000;
}

#blackbar{
width:100%;
vertical-align: middle;
background-color:#000000; /*black*/
color:#F5ECCB; /*font tan*/
margin: 0px;
padding-top: 2px;
}

/*idea from http://css-tricks.com/equidistant-objects-with-css/ */
#menu_row {
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    padding-left: 4%;
    padding-top: 5px;
    text-align: justify;
    border:none;
    white-space: nowrap;
    /*font-size: 0.1px;  IE 9/10 don't like font-size: 0; */
    max-width: 1000px;
    min-width: 360px;
}

 #menu_row div.buttonspace { /* a button space */
    width: 18%; /* for 5 buttons, etc. */
    margin: 0px;
    padding: 0px;
    line-height: 25px;
    display: inline-block;
}

 #menu_row div.visitor { /* a button space */
    font-family: "Century Gothic Bold",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    /*width: 15%;  for 6 buttons*/
    width: 18%; /* for 5 buttons, etc. */
    margin: 0px;
    line-height: 25px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    border: solid thin black;
    background-color:#244F21; /*a deep green*/
    color:#F5ECCB; /*font tan*/    
}

.visitorButton { /* a button */
    white-space: nowrap; 
    font-family: "Century Gothic Bold",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    /*width: 15%;  for 6 buttons*/
    width: 100%; /* of buttonspace */
    margin: 0px;
    line-height: 25px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    border: solid thin black;
    background-color:#244F21; /*a deep green*/
    border-color:#425A39;
    color:#F5ECCB; /*font tan*/
}

#menu_row:after {/* Ensures there are at least 2 lines of text, so justification works */
  content: '';
  width: 100%; 
  display: inline-block;
}

#menu_lastrow {
  content: '';
  width: 100%; 
  display: inline-block;
  /*border-bottom: solid thick #004000;*/
  margin-bottom: -4px; /* room for border */
}

/* START special selectors to float slide show box between menu and lower divs */
#menu_lastrow_bottompad {
  content: '';
  width: 100%; 
  display: inline-block;
  padding-bottom: 80px; /*so slideshow box can float upwards into brick*/
  margin-bottom: -6px; /* room for border */
}

.midbar_toppad2{ /* turned this into a class instead of an id*/
width:100%;
margin:0px;
padding-top: -70px; /*special case for  slidebox overlap*/
background-color: transparent;
color: #000000;
}

.midbar_toppad{ /* turned this into a class instead of an id*/
width:100%;
margin:0px;
padding-top: 210px; /*special case for  slidebox overlap*/
background-color: transparent;
color: #000000;
}

.images_box_centerwide {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    padding-top: 5px;
    text-align: left;
    width: 90%;
    min-width: 324px; /* 90% of 360 */
}

.content_box_centerwide {
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    padding-top: 5px;
    text-align: left;
    border:none;
    max-width: 850px;
    min-width: 360px;
}

.content_box_half {
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    text-align: left;
        font-size:10pt;
    border:none;
    max-width: 400px;
    float: left;
}

#bottombar{
    display: block;
width:100%;
height: 100%;
vertical-align: top;
background-color:#000000; /*black*/
color:#F5ECCB; /*font tan*/
margin: 0px;
padding-top: 2px;
}

最佳答案

我为您找到了解决方案...但是您使用的 html 结构不是最佳的。

.midbar_toppad{
width:100%;
margin:0px;
padding-top: 30%; /*This is what i changed*/
background-color: transparent;
color: #000000;
}

:) 希望您无论如何都能使用它。这是 fiddle :http://jsfiddle.net/PR4DE/a97m5549/1/

关于html - 调整大小/扩展幻灯片(在 div 内)覆盖下面的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26762822/

25 4 0
文章推荐： javascript - 不显示鼠标时删除元素的悬停状态
文章推荐： javascript - 我的页面上注册了哪些事件？
文章推荐： css - 如何在 LESS 中设置 Arial Black 字体系列
文章推荐： javascript - 有没有办法让外部固定布局 iframe 子页面在移动设备上工作？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com