只有一个链接在css-only手风琴中起作用
我试图在一个页面中显示一个只有CSS的垂直手风琴，还有其他东西。只有手风琴未正确显示-las/最底部链接打开预期文本-其他链接不显示。但是，当在只有手风琴的不同HTML文档中编写时，同样的代码也可以工作 我有直觉认为问题在于CSS和大小或定位（绝对/相对）-但无法找到它 希望得到一些光 我的HTML和CSS如下所示： HTML:只有一个链接在css-only手风琴中起作用,css,Css,我试图在一个页面中显示一个只有CSS的垂直手风琴，还有其他东西。只有手风琴未正确显示-las/最底部链接打开预期文本-其他链接不显示。但是，当在只有手风琴的不同HTML文档中编写时，同样的代码也可以工作 我有直觉认为问题在于CSS和大小或定位（绝对/相对）-但无法找到它 希望得到一些光 我的HTML和CSS如下所示： HTML: 测试页 我们会尽力帮助你 让您满意。。。。 我们是谁 表1的内容如下： 愿景等。 我们所做的 表2的内容如下： 证书、愿景等。 联系我们 表3的内容如下
测试页
我们会尽力帮助你
让您满意。。。。
-
我们是谁
表1的内容如下：
愿景等。
-
我们所做的
表2的内容如下：
证书、愿景等。
-
联系我们
表3的内容如下：
内容等。
资料
名字：
中名：
姓氏：
地址1：
地址2：
Pincode：
国家：
阿富汗
阿兰群岛
阿尔巴尼亚
阿尔及利亚
美属萨摩亚
安道尔
安哥拉
字段集>.inputs{
位置：相对位置；
左：50px；
宽度：100px；
}
#导航输入[id=“tab3”]：选中~表单{/****此样式是显示表单所必需的。没有此样式，表单中的字段不会显示*****/
显示：内联块；
}
#导航输入[id=“tab3”]：选中~form>fieldset{
位置：绝对位置；
宽度：565px；
左：-10px；
}
#导航输入[id=“tab3”]：选中~form>fieldset>.inputs>label{
显示：块；
浮动：左；
保证金：0；
填充：3px13px0；
文本对齐：右对齐；
宽度：140px；
背景颜色：粉红色；
边框宽度：0；
}
#导航输入[id=“tab3”]：选中~form>fieldset>.inputs>input[type=“text”]{
衬垫顶部：-5px；
边界：无；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
-webkit盒阴影：0 0 5px#666插图；
-moz盒阴影：0 0 5px#666插图；
盒影：0 0 5px#666插图；
高度：25px；
线高：25px；
宽度：200px；
文本缩进：5px；
}
#导航输入[id=“tab3”]：选中~form>fieldset>。输入>选择{
衬垫顶部：-5px；
边界：无；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
-webkit盒阴影：0 0 5px#666插图；
-moz盒阴影：0 0 5px#666插图；
盒影：0 0 5px#666插图；
高度：25px；
线高：25px；
宽度：200px；
文本缩进：5px；
}
#导航输入[id=“tab3”]：选中~form>fieldset>.inputs>input[type=“email”]{
衬垫顶部：-5px；
边界：无；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
-webkit盒阴影：0 0 5px#666插图；
-moz盒阴影：0 0 5px#666插图；
盒影：0 0 5px#666插图；
高度：25px；
线高：25px；
宽度：200px；
文本缩进：5px；
}
#导航输入[id=“tab3”]：选中~form>fieldset>。输入>选择{
宽度：250px；
}
#导航输入[id=“tab3”]：未（：选中）~.取消按钮{
显示：无；
}
#导航输入[id=“tab3”]：未（：选中）~.提交按钮{
显示：无；
}
#导航输入[id=“tab3”]：选中~。取消按钮{
位置：绝对位置；
宽度：100px；
左：400px；
顶部：540px；
高度：30px；
边界半径：5px；
}
#导航输入[id=“tab3”]：选中~。提交按钮{
位置：绝对位置；
宽度：100px；
左：550px；
顶部：540px；
高度：30px；
边界半径：5px；
}
#右边的酒吧{
位置：绝对位置；
顶部：200px；
左：1002px；
高度：600px；
宽度：340px；
边框样式：实心；
边框颜色：橙色；
}
#页脚{
位置：绝对位置；
左：0；
顶部：1200px；
宽度：100%；
/*边框样式：实心；
边框宽度：1px；
边框颜色：黑色*/
字号：1.25em；
字体：斜体；
字体大小：粗体；
文本对齐：居中；
颜色：白色；
背景色：中兰花；
高度：100px；/****接下来的三行一起垂直居中于******/
行高：100px；/****高度和行高必须与值为“nowrap”的空白相同*****/
空白：nowrap；
背景：-webkit线性梯度（中兰色，紫色）；
背景：-o-线性梯度（中等）
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" type="text/css" href="main1(with-accordion).css" media="screen">
</head>
<body>
<div id="header">
We do things to help you
<div id="inner_header">
to your satisfaction ....
</div>
</div>
<div id="nav">
<ul>
<li>
<input type="radio" name="tabs" checked id="tab1">
<label for="tab1">Who are we</label>
<div class="content">
<span>
Contents of tab1 goes here:
Visions etc.
</span>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">What we do</label>
<div class="content">
<span>Contents of tab2 goes here:
Credentials, visions etc.
</span>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Contact us</label>
<div class="content">
<span>
Contents of tab3 goes here:
Contents etc.
</span>
</div>
<form method="post" id="data">
<fieldset > <legend> Data </legend>
<br>
<span class="inputs">
<label>First Name :</label>
<input type="text" name="First_Name" size="50">
</span>
<br>
<br>
<span class="inputs">
<label>Middle Name :</label>
<input type="text" name="Middle_Name" size="50">
</span>
<br>
<br>
<span class="inputs">
<label>Last Name :</label>
<input type="text" name="Last_Name" size="50">
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Address 1 : </label>
<input type="text" name="Address1" size="50">
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Address 2 :</label>
<input type="text" name="Address2" size="50">
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Pincode :</label>
<input type="text" name="pincode" size="20">
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Country :</label>
<select>
<option value="Afghanistan" title="Afghanistan">Afghanistan</option>
<option value="Åland Islands" title="Aland Islands">Aland Islands</option>
<option value="Albania" title="Albania">Albania</option>
<option value="Algeria" title="Algeria">Algeria</option>
<option value="American Samoa" title="American Samoa">American Samoa</option>
<option value="Andorra" title="Andorra">Andorra</option>
<option value="Angola" title="Angola">Angola</option>
<option value="Anguilla"
</select>
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Email ID :</label>
<input type="email" name="email" size="30">
</span>
<br>
<br>
</fieldset>
</form>
<input class="cancel_button" type="button" name="Cancel" value="Cancel">
<input class="submit_button" type="button" name="Submit" value="Submit">
</li>
</ul>
</div>
<!-- The following code block is the problem area-->
<div id="accordion">
<ul>
<li> <a href="#tab1">Tab1</a></li>
<div id ="tab1" class="accordion-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
</div>
<li> <a href="#tab2">Tab2</a></li>
<div id ="tab2" class="accordion-content">
Cum eu oporteat voluptatum, mandamus explicari ius eu. Discere
</div>
<li> <a href="#tab3">Tab3</a></li>
<div id ="tab3" class="accordion-content">
No amet nullam detracto usu, vix posse iracundia deterruisset
</div>
<li> <a href="#tab4">Tab4</a></li>
<div id ="tab4" class="accordion-content">
In a professional context it often happens that private or
</div>
</ul>
</div>
<!-- The above code block is the problem area-->
<div id="right_bar">Fixed contents here ... </div>
<div id="footer">Page created by: Sukalyan Ghoshal. Email:sukalayn_g@yahoo.com </div>
</body>
</html>
#header {
position: absolute;
left: 0;
top: 0;
padding-top: 0;
height: 200px;
line-height: 250%; /**** This line is used to control spacing between the two lines in the header *****/
white-space: nowrap;
text-align: right;
font-size: 3em;
font-style: italic;
font-weight: bold;
color: navy;
width: 100%;
background: -webkit-linear-gradient (to right, mediumblue, darkturquoise);
background: -o-linear-gradient(to right, mediumblue, darkturquoise);
background: -moz-linear-gradient(to right, mediumblue, darkturquoise);
background: linear-gradient(to right, mediumblue, darkturquoise);
}
#inner_header {
display: block;
margin-top: 0;
line-height: 20%; /**** This line is also used to control spacing between the two lines in the header *****/
}
/*accordion css*/
#accordion {
position: absolute;
left: 0;
top: 200px;
}
#accordion ul {
position: relative;
top: 0;
list-style-type: none;
}
#accordion ul a {
display: block;
}
#accordion div {
display: none;
}
#accordion ul li + div:target {
display: inline-block;
margin-top: 10px;
}
.accordion-content {
width: 200px;
}
/* end of accordion css */
#nav {
position: absolute;
left: 225px;
top: 200px;
eight: 600px;
width: 775px;
border-style: solid;
border-width: 1px;
border-color: green;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
display: inline-block; /******* Display property of the li must be set to inline-block along with that of the labels for showing labels side by side *****/
height: 30px;
}
#nav ul li input[type="radio"] {
display: none;
}
#nav ul li label {
float: left;
display:inline-block;
vertical-align: middle;
padding-top: 5px;
padding-bottom: -5px;
margin-bottom: -15px;
width: 125px;
height: 2.1em;
text-align: center;
font-size: 1em;
overflow: auto;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: green;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-width: 0;
line-height: 2.1em;
white-space: nowrap; /****** height=line-height with white-space=nowrap makes text inside an element vertically centered ********/
}
#nav div {
display: none;
position: absolute;
top: 56px;
left: 35px;
width: 700px;
height: 543px;
border-style: solid;
border-width: 1px;
border-color: green;
text-align: center;
}
#nav .content span {
vertical-align: middle;
}
/****** The next two block must be like this to the minimum to show a behaviour of tabs and tabbed content showing not to have a seperation between them ******/
#nav input[type="radio"]:checked ~ div {
display: block;
background-color: pink;
z-index: -1; /****The z-index property of the labels and the <div> element showing tab content must be staggered like this *****/
}
#nav input[type="radio"]:checked ~ label {
border-bottom-width: 0;
height: 2.2em; /*** In this particular design em has been used for height of labels for ease of toggling border between tab and content *****/
background-color: pink;
z-index: 2; /****The z-index property of the labels and the <div> element showing tab content must have staggered z-index like this *****/
}
/****** The previous two block must be like this to the minimum to show a behaviour of tabs and tabbed content showing not to have a seperation between them ******/
#data {
position: absolute;
left: 100px;
top: 100px;
width: 500px;
height: 550px;
display: none;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs {
position: relative;
left: 50px;
width: 100px;
}
#nav input[id="tab3"]:checked ~ form { /**** This styling is required for showing the form. Without this the fields in the form do not show up. *****/
display:inline-block;
}
#nav input[id="tab3"]:checked ~ form > fieldset {
position: absolute;
width: 565px;
left: -10px;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > label {
display: block;
float: left;
margin: 0;
padding: 3px 13px 0 0;
text-align: right;
width: 140px;
background-color:pink;
border-width: 0;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > input[type="text"] {
padding-top: -5px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
height:25px;
line-height:25px;
width:200px;
text-indent:5px;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > select {
padding-top: -5px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
height:25px;
line-height:25px;
width:200px;
text-indent:5px;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > input[type="email"] {
padding-top: -5px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
height:25px;
line-height:25px;
width:200px;
text-indent:5px;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > select {
width: 250px;
}
#nav input[id="tab3"]:not(:checked) ~ .cancel_button {
display: none;
}
#nav input[id="tab3"]:not(:checked) ~ .submit_button {
display: none;
}
#nav input[id="tab3"]:checked ~ .cancel_button {
position: absolute;
width: 100px;
left: 400px;
top: 540px;
height: 30px;
border-radius: 5px;
}
#nav input[id="tab3"]:checked ~ .submit_button {
position: absolute;
width: 100px;
left: 550px;
top: 540px;
height: 30px;
border-radius: 5px;
}
#right_bar {
position: absolute;
top: 200px;
left: 1002px;
height: 600px;
width: 340px;
border-style: solid;
border-color: orange;
}
#footer {
position:absolute;
left: 0;
top: 1200px;
width: 100%;
/*border-style: solid;
border-width: 1px;
border-color: black;*/
font-size: 1.25em;
font-style: italic;
font-weight: bold;
text-align: center;
color: white;
background-color: mediumorchid;
height: 100px; /***** The next three lines together vertically center the writing in the <div> ******/
line-height: 100px; /**** height and line-height must be same with white-space having a value of "nowrap" *****/
white-space: nowrap;
background: -webkit-linear-gradient (mediumorchid, violet);
background: -o-linear-gradient(mediumorchid, violet);
background: -moz-linear-gradient(mediumorchid, violet);
background: linear-gradient(mediumorchid, violet);
}
<div id="accordion">
<ul>
<li> <a href="#tab10">Tab1</a></li>
<div id="tab10" class="accordion-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
</div>
<li> <a href="#tab20">Tab2</a></li>
<div id="tab20" class="accordion-content">
Cum eu oporteat voluptatum, mandamus explicari ius eu. Discere
</div>
<li> <a href="#tab30">Tab3</a></li>
<div id="tab30" class="accordion-content">
No amet nullam detracto usu, vix posse iracundia deterruisset
</div>
<li> <a href="#tab40">Tab4</a></li>
<div id="tab40" class="accordion-content">
In a professional context it often happens that private or
</div>
</ul>
</div>