Sticky headers and tabs worden niet goed weergegeven

Status
Niet open voor verdere reacties.

vacances2000

Gebruiker
Lid geworden
28 jan 2013
Berichten
113
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:

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
 
Als je de website cross browser wilt houden zou ik geen position:sticky gebruiken en wel position:fixed
Als voorbeeld: een klein menu dat in de html direct onder <body> komt
Code:
<nav class="navbar">
   <ul>
      <li><a href="..">Home</a></li>
      <li><a href="..">Contact</a></li>
   </ul>
</nav>

Code:
/* ruimte fixed navbar */
body {
   padding-top: 60px;
}
/* navbar fixed top */
.navbar {
   display:block;
   position:fixed;
   top:0; right:0; left:0;
   z-index:1000;
   background:#fff;
}
/* navbar reset */
.navbar ul, .navbar li, .navbar a {
   margin:0;
   padding:0;
   box-sizing:border-box;
}
/* navbar list */
.navbar ul {
   float:left;
   list-style:none;
}
.navbar li {
   float:left;
   display:block;
}
.navbar a, .navbar a:focus, .navbar a:hover, .navbar a:active {
   display:block;
   padding:14px 12px;
   text-decoration:none;
   cursor:pointer;
   font-size: 16px;
   line-height:20px;
}
Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan