SHOW/ HIDE div's werkt wel maar Layers VERSCHIJNEN NIET bovenaan

[vacances2000]

Beste,
Ik heb denk ik een klein probleembje met m'n CSS want de html werkt op zich prima. De verschillende layers tours, vluchten, autohuur, hotel komen naast elkaar rechts onderaan te voorschijn afhankelijk van welke link je klikt. Dit is mijn html:

<div id="container" class="container">
<div id="central-text" class="central-text">
<div id="menu" class="menu">
<ul>
 <li><a href="#" onclick="MM_showHideLayers('tour-search','','show','carrental-search','','hide','hotel-search','','hide','flight-search','','hide')">Tours</a></li>
 <li><a href="#" onclick="MM_showHideLayers('tour-search','','hide','carrental-search','','show','hotel-search','','hide','flight-search','','hide')">Rent an affordable cheap car</a></li>
 <li><a href="#" onclick="MM_showHideLayers('tour-search','','hide','carrental-search','','hide','hotel-search','','show','flight-search','','hide')">Book a Hotel</a></li>
 <li><a href="#" onclick="MM_showHideLayers('tour-search','','hide','carrental-search','','hide','hotel-search','','hide','flight-search','','show')">Flight Search</a></li>
 </ul>
 </div>
<div>
<div id="tour-search" class="tour-search" onclick="show"><iframe src="#" height="1000" width="1015" frameborder="0"></iframe></div>
<div id="carrental-search" class="carrental-search" onclick="show">Car Rental</div>
<div id="hotel-search" class="hotel-search">hotel search</div>
<div id="flight-search" class="flight-search">Flight Search</div>
</div>
</div>
</div>

Dit is m'n css code:

/* Main content*/

#container{
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
	height:auto;
	width:auto;
	clear: both;
}

#central-text{
	position: relative;
	text-align: left;
	overflow: visible;
	padding-left: 20px;
	padding-right: 20px;
	height:auto;
	width:auto;
	clear: inherit;
}

/*Search index*/
#menu-search{
	
}

#tour-search{
	position: relative;
	overflow: hidden;
	float: right;
	margin-top:20px;
	width:auto;
	height:auto;
}

#carrental-search{
	position: relative;
	visibility: hidden;
	overflow: hidden;
	float: right;	
	margin-top:20px;
	width:auto;
	height:auto;
	clear: inherit;
}

#hotel-search{
	position: relative;
	visibility: hidden;
	overflow: hidden;
	float: right;
	margin-top:20px;
	width:auto;
	height:auto;
}

#flight-search{
	position: relative;
	visibility: hidden;
	overflow: hidden;
	float: right;
	margin-top:20px;
	clear: inherit;
	width:auto;
	height:auto;
}

Ziet iemand wat het probleem zou kunnen zijn??? Ik heb met van alles en nog wat geprobeerd maar daar veranderd niets mee..

Pls help.

Dank

Jonathan

 

[Tha Devil]

Wat is het probleem dan? Uit je verhaal komt dat niet echt naar voren

Dat ze naast elkaar staan in plaats van onder elkaar?

 

[vacances2000]

Beste,
Hierbij dan een printscreen van wat ik bedoel. De 4 div's waarom het gaat zijn dus in de div central-text en zouden eigenlijk onder elkaar moet komen te liggen zeg top:0px en left:0px, echter is dat nu dus niet het geval met eerder genoemde css en html code.

Wilt u een voorbeeld van? kijk dan op klm.nl, linker zijde, de box met vlucht boeken, hotel's auto's en meer, vluchttijden. Zo ongeveer is wat ik bedoel.

Ik hoop dat het zo duidelijker is en dat u me kan helpen...

Dank
Jonathan

 

[Tha Devil]

Dat ze naast elkaar komen te staan in plaats van onder elkaar heeft met de "float: right;" op de elementen te maken.

Heb je deze pagina ook ergens online staan?
Met de gegeven code kan ik helaas niet de layout krijgen zoals in je bijlage: http://jsfiddle.net/Md74s/

 

[vacances2000]

Voor de duidelijkheid heb ik alvast float right naar left gewijzigd, echter is het de bedoeling dat al die 4 layers op de plaats van de tour-search komen, en tour-search is de default layer.

Dank
Jonathan

 

[Tha Devil]

Dat komt omdat je "visibility" gebruikt
Die CSS-eigenschap zorgt er voor dat een element niet getoond wordt maar wel zijn ruimte in blijft nemen.

Vervang die eens door "display".

Tonen is "display: block", verbergen "display: none".

 

[vacances2000]

Beste,
Helaas krijg ik nog steeds hetzelfde. Heb geprobeerd met position: absolute en dan top:0px en left: 0px nogmaals en dan float weghalen maar geen resultaat.

De div's zijn goed geplaats dat ik meen waar het dus niet aan ligt???

Dank

Jonathan