Jump to content

i have navbar wen i click the image is not displaying properly

anushka

By anushka
in CSS Help

Recommended Posts

anushka Member

anushka

Posted
Posted

i have navbar when i click the image is not displaying below that .Its showing toward right all the image are showing under

Here is code

Please some one help

 

<html>

<head>

<style type="text/css">

 

body{

font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */

margin:2px;

 

}

 

.dhtmlgoodies_question{ /* Styling question */

/* Start layout CSS */

color:#FFF;

font-size:0.9em;

background-color:#317082;

width:200px;

margin-bottom:2px;

margin-top:2px;

padding-left:2px;

background-image:url('images/bg_answer.gif');

background-repeat:no-repeat;

background-position: right -198px;

height:20px;

 

overflow:hidden;

cursor:pointer;

float:left;

 

 

/* End layout CSS */

 

}

.dhtmlgoodies_answer{ /* Parent box of slide down content */

/* Start layout CSS */

border:1px solid #317082;

background-color:#E2EBED;

width:200px;

 

 

/* End layout CSS */

 

visibility:hidden;

height:0px;

overflow:hidden;

position:absolute;

 

 

 

}

.dhtmlgoodies_answer_content{ /* Content that is slided down */

padding:1px;

font-size:0.9em;

position:absolute;

float:none;

}

 

</style>

<script type="text/javascript">

 

var dhtmlgoodies_slideSpeed = 10; // Higher value = faster

var dhtmlgoodies_timer = 10; // Lower value = faster

 

var objectIdToSlideDown = false;

var dhtmlgoodies_activeId = false;

var dhtmlgoodies_slideInProgress = false;

function showHideContent(e,inputId)

{

if(dhtmlgoodies_slideInProgress)return;

dhtmlgoodies_slideInProgress = true;

if(!inputId)inputId = this.id;

inputId = inputId + '';

var numericId = inputId.replace(/[^0-9]/g,'');

var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

 

objectIdToSlideDown = false;

 

if(!answerDiv.style.display || answerDiv.style.display=='none'){

if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){

objectIdToSlideDown = numericId;

slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));

}else{

 

answerDiv.style.display='block';

answerDiv.style.visibility = 'visible';

 

slideContent(numericId,dhtmlgoodies_slideSpeed);

}

}else{

slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));

dhtmlgoodies_activeId = false;

}

}

 

function slideContent(inputId,direction)

{

 

var obj =document.getElementById('dhtmlgoodies_a' + inputId);

var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);

height = obj.clientHeight;

if(height==0)height = obj.offsetHeight;

height = height + direction;

rerunFunction = true;

if(height>contentObj.offsetHeight){

height = contentObj.offsetHeight;

rerunFunction = false;

}

if(height<=1){

height = 1;

rerunFunction = false;

}

 

obj.style.height = height + 'px';

var topPos = height - contentObj.offsetHeight;

if(topPos>0)topPos=0;

contentObj.style.top = topPos + 'px';

if(rerunFunction){

setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);

}else{

if(height<=1){

obj.style.display='none';

if(objectIdToSlideDown && objectIdToSlideDown!=inputId){

document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';

document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';

slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);

}else{

dhtmlgoodies_slideInProgress = false;

}

}else{

dhtmlgoodies_activeId = inputId;

dhtmlgoodies_slideInProgress = false;

}

}

}

 

 

 

function initShowHideDivs()

{

var divs = document.getElementsByTagName('DIV');

var divCounter = 1;

for(var no=0;no<divs.length;no++){

if(divs[no].className=='dhtmlgoodies_question'){

divs[no].onclick = showHideContent;

divs[no].id = 'dhtmlgoodies_q'+divCounter;

var answer = divs[no].nextSibling;

while(answer && answer.tagName!='DIV'){

answer = answer.nextSibling;

}

answer.id = 'dhtmlgoodies_a'+divCounter;

contentDiv = answer.getElementsByTagName('DIV')[0];

contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';

contentDiv.className='dhtmlgoodies_answer_content';

contentDiv.id = 'dhtmlgoodies_ac' + divCounter;

answer.style.display='none';

answer.style.height='1px';

divCounter++;

}

}

}

window.onload = initShowHideDivs;

</script>

<body>

<div class="dhtmlgoodies_question">New Products</div>

 

<div class="dhtmlgoodies_answer">

<div>

<img src="images2.jpg"/>

</div>

</div>

 

 

<div class="dhtmlgoodies_question">Hot Products</div>

 

<div class="dhtmlgoodies_answer">

<div>

<img src="images1.jpg"/>

</div>

</div>

<div class="dhtmlgoodies_question">Comming soon</div>

<div class="dhtmlgoodies_answer">

<div>

<img src="images3.jpg"/>

</div>

</div>

 

</body>

 

</head>

 

 

</html>

Thanks in advance

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.