vacances2000
Gebruiker
- Lid geworden
- 28 jan 2013
- Berichten
- 114
Beste,
Ik ben een website aan het maken voor mezelf. Om informatie wat ordelijk te rangschikken, dacht ik tabs en sticky headers te gebruiken. Nu is mijn probleem dat ik die sticky headers enkel in tab 1 wil zien maar niet in tab 2, 3 of 4. Toch verschijnen ze in tab 2, 3 en 4.
De code die ik nu heb is als volgt:
Kan iemand helpen? weet iemand de oplossing om dit te verhelpen?
Dank en vriendelijke groeten,
Jonathan
Ik ben een website aan het maken voor mezelf. Om informatie wat ordelijk te rangschikken, dacht ik tabs en sticky headers te gebruiken. Nu is mijn probleem dat ik die sticky headers enkel in tab 1 wil zien maar niet in tab 2, 3 of 4. Toch verschijnen ze in tab 2, 3 en 4.
De code die ik nu heb is als volgt:
HTML:
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Overview</label>
<div class="content">
<div id="landing-images-left">
<img src="../../images/sunset-bali.jpg" alt=""/>
<img src="../../images/santorini.jpg" alt=""/>
</div>
<div id="landing-text-right">
<div class="sticky-box23">About the hotel</div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Rooms</label>
<div class="content">
Text en foto's
</div>
</div>
Code:
.sticky-box23{
position: -webkit-sticky;
position: sticky;
height: 35px;
top: 105px;
width: 100%;
background-color:#30DBC8;
color: #ffffff;
font-size: large;
font-family: helvetica, arial, sans-serif;
margin-bottom: 10px;
line-height: 35px;
text-indent: 15px;
z-index:3;
}
.tabs {
position: relative;
height: 2400px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
Kan iemand helpen? weet iemand de oplossing om dit te verhelpen?
Dank en vriendelijke groeten,
Jonathan