我正在制作一个非常非常简单的模板。或者我是这么想的。该模板最初没有侧边栏，所以我试着自己把它们偷偷放进去。它根本不起作用 - 我根本看不到我的测试文本。
有人可以指出我做错了什么吗？
您可以在 http://www.stfuisland.com/add.html 查看相关页面
代码贴在下面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>STFU Island</title>
<style type="text/css">
a.header:link {
color:#ffffff;
text-decoration:none;
hover {color:#ffcc00;}
}
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 75px; /*Set top value to HeightOfFrameDiv*/
//left: 0;
//right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
#leftbar {
float: left;
width: 30%;
}
#rightbar {
float: right;
width: 30%;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="leftbar">
<div class="innertube">
<p>test</p>
</div></div>
<body>
<div id="rightbar">
<div class="innertube">
<p>test</p>
</div></div>
<div id="framecontent">
<div class="innertube">
<center><h3><font color="white"><a class="header" href="index.html">home</a> | <a href="islandstatus.html">Are You on an Island?</a> | <a href="about.html">About</a></font></h1></center>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<center>
<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Your Name" name="creatorname" size="50">
<input type="text" class="pure-input-1-2" placeholder="Your Email" name="creatoremail">
<input type="email" class="pure-input-1-2" placeholder="Relationship to people being sent to island" name="relationship">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Name of first person sent to STFU Island" name="person1">
<input type="text" class="pure-input-1-2" placeholder="Their email address" name="email1">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Name of second person sent to STFU Island" name="person2">
<input type="text" class="pure-input-1-2" placeholder="Their email address" name="email2">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Name of third person sent to STFU Island" name="person3">
<input type="text" class="pure-input-1-2" placeholder="Their email address" name="email3">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Tell them why they're being sent to STFU Island!" cols="40" rows="5" name="reason">
</fieldset>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary" name="submit">Send them to STFU Island!</button>
<br>aaaaEmail addresses are sacred and we will treat them that way. Email addresses collected are only used to send emails when people are added or are being set free from STFU island. No other company will ever see or use them for any reason. Period.
</form>
</center>
</div>
</div>
</body>
</html>
最佳答案
添加到您的 CSS:(用于#leftbar 和#rightbar)
z-index: 2;
position: relative;
这对我有用，你也可能想使用 color:#fff 这样你就可以看到它。 使用 text-align:center 而不是居中， 使用 1 个 div 而不是彼此内部的多个 div..
来源非常繁忙和困惑；对于非常简单的东西来说太乱了。 我将制作一个克隆，展示它可以多么简化并稍后更新。
关于html - CSS 侧边栏不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20099624/