Question

This正是我要编写的代码。我对如何将所有内容放在页面中心感到茫然。我必须标题编码（没有悬停和其他交互，但我稍后会处理）但中心部分给我带来麻烦。首先，我不确定为什么我的'div id =“captionbar'不可见。其次，我无法弄清楚为什么'div class =”container“'周围的边框似乎忽略了height属性（600 px）我已经给出它并且仅仅符合我创建的滑块（400像素）的高度。

*的修改 * 我错误地键入了'heigth：600px'。所以现在正如预期的那样。但其他问题仍然存在 - 即缺少'div id =“captionbar”

我也不确定如何在'div class = container'中创建正确的列，并使用两个框来保存内容。我知道这是相当模糊的，而且要问的很多，但我正在大学的交互式设计课上教授。要求这个主页在一周的时间内编码，他所提供的所有教学方式都是一些基本的在线教程。此外，它必须具有响应性 - 所以我认为对于那些对代码一无所知的平面设计专业学生来说太过分了，所以非常感谢任何帮助！

这是我的完整HTML

<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>The Pantry</title>
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
    <div class="header">
        <div class="nav">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">MENU</a></li>
                <li id="logo"><a href="#"><img src="Images/pantry logo.png" width="536" height="348"/></a></li>
                <li><a href="#">CONTACT</a></li>
                <li id="last"><a href="#">ABOUT</a></li>
            </ul>        
       </div>
  </div><!--end header-->

<div id="container">
    <div id="slider">
        <figure>
            <img src="Images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="Hungarian Sausage Goulash"/>
            <img src="Images/G-lasagne-al-forno.jpg" width="600" height="400" alt="Lasagne al Forno"/>
            <img src="Images/5357829-svickova.jpg" width="600" height="400" alt="Svickova"/>
            <img src="Images/pork shoulder.jpg" width="600" height="400" alt="Pork Shoulder with Dumplings"/>
            <img src="Images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="Hungarian Sausage Goulash"/>
        </figure>

        <div id="captionbar">
            <h1>Test 123</h1>
        </div>

    </div><!--end slider-->

    <div id="menu ad">

    </div><!--end menu ad-->

    <div id="hours">

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

<footer>

</footer>

我的CSS

@charset "UTF-8";

body {
    background: #f8f8f1;
    line-height: 1.5;
}

/*header*/


.header {
    width: 960px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: 100px 0px 0px 0px;
}

div ul li {
    display: inline-block;
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 18px;
    color: #4f4d4b;
    text-decoration: none;
    list-style: none;
    vertical-align: middle;
}

.nav ul li {
    margin-right: 70px
}

.nav ul li:nth-child(5) {
    margin: 0;
}

div ul li a {
    list-style: none;
    text-decoration: none;
    color: #4f4d4b;
}

.nav ul li a:visited {
    text-decoration: none;
    color: #4f4d4b;
}


#logo a img {
    width: 250px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

#logo { 
    width: 250px; 
    position: relative;
}

/*End Header*/

/*Container*/

    div.container {
    margin: 0 auto;
    position: relative;
    width: 936px;
    height: 600px;
    padding: 10px;
    border: 2px solid #b9aea3;
    }

/*slider*/

@-webkit-keyframes slidy {
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

div#slider { position: relative; overflow: hidden; width: 80%; max-width: 600px; height: auto; max-height: 400px;
margin: 0 auto}
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  font-size: 0;
  animation: 20s slidy infinite; 
  margin: 0; top: 0; left: 0;
  -webkit-animation: 20s slidy ease-in-out infinite;
  animation: 20s slidy ease-in-out infinite; 
 }

 /*slider captions*/

 #captionbar {
     position: relative;
     max-width: 600 px;
     height: 60px;
     background: #f9f4df;
     margin-top: 5px;
 }

请访问网站here，了解正在发生的事情。

感谢您的帮助。

Answer 1

选中 lab Demo

检查代码here

您必须更改低于Css

div.container {
    margin: auto 0;
    position: relative;
    width: 960px;
    height: 438px;     /* heigth is what you have written */
    border: 10px solid red;
}

div#slider { 
   position: relative; 
   overflow: hidden; 
   width: 80%; 
   max-width: 600px; 
   height: auto; 
  /* max-height: 460px; */   /*Remove this */
    margin: 0 auto    /* to make the slider content center*/
}

编辑1

请使用以下代码#slider

#div#slider {
  margin: auto;
  position: relative;
  overflow: hidden;
  width: 80%;
  max-width: 600px;
}

注意我们还删除了float: left;

将div放在其他div中

1 个答案: