Solved

relatively positioned div not expanding container div

Posted on 2008-06-16
3
1,054 Views
Last Modified: 2008-06-24
i ahve a nested div, the inner div is positioned at 400px inside a 558px parent div with a bg image, ona click event content is added to the child div but the parent div does not expand to accomodate teh div, cant seem to figure it out.

tia

0
Comment
Question by:James Rodgers
  • 2
3 Comments
 
LVL 16

Expert Comment

by:rbudj
ID: 21796295
Please post code.  This cannot be troubleshooted without either code or a link to your page.
0
 
LVL 25

Author Comment

by:James Rodgers
ID: 21796496
cant post a link and this is the best i can do for code, css is complete, page code is complete-minus images and the js is just dummied up to prevent errors
the div with teh gold border(just for debugging) is the container div which has a bg image 960X558 teh child div is positioned at 400px from top and has a black border and no content, when clicking a button the content is added, actual page uses an ajax call to populate currently using test content and is simulated by the js in the code

when the content is added the black border div expands with the content but it overlaps the content blow the gold bordered div, i need it to push teh gold bordered div down to accomodate the new contetn...whech may b 5 lines or may be 100(not likely but you get the idea)

thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml">
 

<head>

	<title>The Voila Institute</title>

	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<meta http-equiv="Pragma" content="no-cache">

	<meta http-equiv="Expires" content="-1">

	<meta name="TITLE" content="The Voila Institute">

	<meta name="DESCRIPTION" content="Voila ">

	<meta name="KEYWORDS" content="hair, styling, salon, education, spa, colouring, fashion">

	<meta name="OWNER" content="Voila Institute">

	<meta name="AUTHOR" content="Radii Web & Print Production">

	<meta name="RATING" content="General">

	<meta name="ROBOTS" content="index,follow">
 

<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />

<script type="text/javascript" language="javascript">

var str='<h3>About the School	</h3><img src="/images/sml_intranet.jpg" class="imgTabDesc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras condimentum rhoncus arcu. Aliquam massa tellus, cursus et, dignissim eget, auctor sit amet, libero.<br>  <br><br><br><br><br><br><br><br><br><br><br><br><br><div class="clearBoth"></div>';

function getSource(sSource, eTarget){

	

    document.getElementById(eTarget).innerHTML=str;
 

}
 

function setImage(lstParentID, objOn){

	var y=1;

	var iStep=2;

	//change indexing for IE - Opera also supports document.all, so check that it is not opera!! 

	if(document.all && navigator.appName.toLowerCase().indexOf('opera')==-1){

		y=0;

		iStep=1;

	}	

	for (x=y; x<document.getElementById(lstParentID).childNodes.length;x+=iStep){

		document.getElementById(lstParentID).childNodes[x].firstChild.src=document.getElementById(lstParentID).childNodes[x].firstChild.src.replace(/on|hv/i,'nm');

	}

	objOn.src=objOn.src.replace(/on|hv|nm/i,'on');

	sTemp=objOn.src

}
 

</script>

<style>

body {

	font-family:Arial, Helvetica, sans-serif;

	color:#333333;

	background-color:#383838;

	font-family:Verdana, Arial, Helvetica, sans-serif;

	margin:0px;

	padding:0px;

	font-size:80%;

}
 

a {

	color:#0066CC;

}
 

a:visited {

	color:#0066CC;

}
 

a:hover {

	color:#0033CC;

}
 
 

p {

	padding: 0px;

	margin:0px 0px 16px 0px;

	line-height:130%;

}
 

.bgMain {

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

	background-repeat:repeat-y;

	width:976px;

}
 

.bgCopyright {

	background-repeat:no-repeat;

	width:976px;

	height:39px;

}
 

.bgFooter {

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

	background-repeat:no-repeat;

	width:976px;

	height:39px;

}
 

.contentContainer {

	width:880px;

	padding:20px 48px 16px 48px;

	text-align:left;

}
 

.headerContainer {

	width:976px;

	padding:0px 16px 16px 16px;

}
 

.footerContainer {

	padding:4px 16px 16px 16px;

}
 

.pNavContainer {

	width:966px;

	padding:10px 0px 8px 0px;

	text-align:right;

}
 

.pNav {

	padding: 0px 16px 0px 0px;

}
 

.fNav {

	font-size:11px;

	color:#333333;

	text-decoration:none;

	padding: 0px 3px 0px 3px;

}
 

.fNav a.fNav, a.fNav:visited {

	color:#333333;

	text-decoration:none;

}
 

.fNav a, a:hover {

	text-decoration:underline;

}
 
 

.clearBoth {

	clear:both;

}
 

.caseImage {

	float:right;

	width:240px;

	height:160px;

	margin:0px 0px 10px 10px;

	border:1px solid black;

}
 

.caption {

	font-size:80%;

	text-align:right;

}
 
 

h1 {
 

}
 

h2 {

	font-size:110%;

}
 

h3 {

	font-family:Tahoma,Arial,Verdana,sans-serif;

	font-size:120%;

	font-weight:bold;

	margin:5px 0px 5px 0px;

	padding:5px 0px 5px 0px;

	clear:both;

	color:#000000;

}
 

h4 {

	font-family:Tahoma,Arial,Verdana,sans-serif;

	font-size:100%;

	font-weight:bold;

	margin:0px 0px 0px 0px;

	padding:0px 0px 0px 0px;

	clear:both;

	color:#000000;

}
 

.dividerH {

	border-top-style:solid;

	border-top-color: #cccccc;

	border-top-width:1px;

	margin:10px 0px 0px 0px;

}
 

.tabDescription {

	margin:0px 0px 0px 0px;

}
 

.imgLanding {

	bottom:0px;

	right:0px;

	float:right;

	width:290px;

	/* border-style:solid;

	border-width:1px;

	border-color:#cccccc; */

}
 

.imgTabDesc {

	bottom:0px;

	right:0px;

	float:right;

	margin:0px 0px 16px 16px;

	width:160px;

}
 

.moreInfo {

	padding:10px 0px 0px 0px;

}
 
 

/* lists */
 
 

ul {

	width:70%;

	margin:0px;

	padding:10px 0px 0px 20px;

	line-height:150%;

}
 
 

ul.landing {

	margin:0px;

	padding:10px 0px 0px 20px;

	line-height:150%;

	font-weight:bold;

	color:#ff0000;

}
 

ul.landing a:link {

	color:#ff0000;

}
 

/* end lists */
 

.introCopy {

	font-family:Tahoma,Arial,Verdana,sans-serif;

	font-size:110%;	

	color:#333333;

	line-height:130%;

	width:100%;

	margin:10px 0px 10px 0px;

}
 

.introHeader {

	font-family:Tahoma,Arial,Verdana,sans-serif;

	font-size:150%;	

	font-weight:bold;

	color:#000000;

	line-height:130%;

}
 

.wrapperContent {

	width:100%;

}
 

.wrapperColumn1 {

	width:65%;

	float:left;

}
 

.wrapperColumn2 {

	width:30%;

	float:right;

	vertical-align:text-bottom;

}
 

.columnDivider {

	float:left;

	width:40px;

	height:400px;

	margin:10px 0px 10px 0px;

	background: url('/images/columnDivider.gif') repeat-y;

}

 

.divClearFloat, .clsDivClearBoth {

	clear:both;

	height:15px;

}
 

.clsDivFormLabel{

	width:150px;

	float:left;

}
 

.clsDivFormInputText, .clsDivFormInputTextArea{

	float:left;

}

 

/* Links */
 

p.moreInfo_wrap {

	float: left;

}
 

a.moreInfo {

	font-size: 90%;

	font-family:Tahoma,Arial,Verdana,sans-serif;

	color: #1d1b19;

}
 

a.moreInfo:hover {

	color: #2d6ea8;

}
 

/* end links */

 

 

#divContentWrapper{

	width:959px; /* change this width to desired page width; contents will scale */	

	margin:auto;	/* 0 for left alignment - auto for center alignment */

	text-align:left;	

}

 

#divPageHeader {

	position:relative;

	width:100%;

	height:110px;

	text-align:center;

	color:#000000;

	padding-top:0px;

}

 

#divLogoLeft {

	position:absolute;

	left:0;

	top:0;

}

#divTagLineLeft {

	font-weight:bolder;

}
 

#divLogoRight {

	position:absolute;

	right:0;

	top:0;

	width:460px;

	height:102px;

	background: url('/images/hNav_background.gif') no-repeat top center;

}

#divGlobalNav {

	position:relative;

	right:0;

	top:0;

	width:460px;

	height:102px;

}
 
 
 

#divTagLineRight {

	font-weight:bolder;

}
 

#divHeaderName {

	margin-top:10px;

	font-size:24pt;

	font-weight:bolder;

}

 

 

#divMainNav {

	height:25px;

	position:absolute;

	text-align:center;

	left:0px;

	bottom:0px;

	width:100%;

	z-index:100;

}
 

 

#divMainContent {

	padding:0px 0px 0px 0px;

	position:relative;

	width:100%;

	z-index:0;

	min-height:400px;

}

 

#divSecondNav {

	position:relative;

	z-index:2;

	padding:0px 0px 0px 0px;

	background: url(/images/sNav_filler.gif) repeat-x;

	height:23px;

	 /*float:left; left side menu layout */
 

}

#divSecondNavInner {

	position:relative;

	padding:0px 0px 0px 0px;

	top:0px;

	left:0px;

	z-index:2;

	height:23px;

}
 

.tdSecondNav {

	padding:0px;

	margin:0px;

	color:black;

	text-align:left;

	position:relative;

	z-index:2;

}
 

.tdSecondNav a{
 
 

}
 

#divTertNav{

	margin-top:10px;
 

} 
 
 

#divPageContentNarrow {

	padding-top:0px;

	width:98%;

	color:#000000;

	/*float:right;  left side menu layout */    

}
 

#divPageContentWide {

	padding-top:0px;

	width:98%;

	color:#000000;

	float:right; /* left side menu layout */     

}
 

#divBreadCrumbs {

	position:relative;

	width:100%;

	font-size:8pt;

	padding:0 0 15px 0;

	color:red;

	padding-left:0px;

	margin-top:20px;

}
 

#divPageContentHeader {

	position:relative;

	width:100%;

	font-size:18pt;

	font-weight:bold;

	padding:0px 0px 0px 0px;

	margin:0px;

}
 

#divPageContentBody {

	padding-top:15px;

}
 

#divPageFooter {

	position:relative;

	width:100%;

	height:80px;

	text-align:center;

	color:#000000;

	font-weight:bolder;

	border-top:1px solid #999999;

	padding-top:5px;

	margin-top:10px;

}

 

#divCopyright {

	position:relative;

	bottom:0px;

	left:0;

	color:#00008B;

	text-align:right;

	width:100%;

	font-size:12pt;

	display:block;

}
 

#divLastUpdated {

	color:red;

	font-size:8pt;

	text-align:center;

}
 

tr {

	vertical-align:top;

}
 

/* Main Menu Styles */
 

.sMainMenu1{

	border:	none;

} 
 

.sMainMenu2, .sMainMenu3 {

	border:1px solid black;

	background-color:white;

}
 

.sMainMenuText1, .sMainMenuText2, .sMainMenuText3 {

	color:black;

	font-size: 8pt;

	text-decoration:none;

}
 

/* Form Styles */
 
 
 

.clsFormContainer {

	padding:20px 0 0 0 ;

}
 

.clsFormLabel {

	width:30%;

	float:left;

}
 

#divEditFormLastNameInput, #divEditFormFirstNameInput, #divEditFormGroupNameInput {

	width: 25%;

	float:right;

	

}
 
 

#divFormButtonCancel, #divFormButtonReset, #divFormButtonSubmit{

	width:25%;

	margin:0;

	float:left;

	text-align:center;

}
 

.clsFormSelInput, .clsFormTextInput, .clsFormFileInput {

	width:35%;

	float:left;

	margin:0;

	border:2px solid black;

}

.clsFormButton {

	width:80px;

}
 

.clsDivider {

	margin-top:15px;

	margin-bottom:10px;

	border-top: 3px double black;

	

}
 

.clsPageContainer {

	padding-top:10px;

}
 

.clsPageSubHeading {

	font-size:14pt;

	font-weight:bold;

}

#divTabbingContainer {

	min-height:400px;

	overflow-y:auto;

	position:relative; 

}
 

#divSettingsContainer {

	position:relative; 
 

} 
 

.clsSectionHeaderOn {

	background-color:#ffffff;

	font-size:10pt;

	color:black;

	width:100px;

	padding-left:5px;

	border-left:2px solid black;

	border-top:2px solid black;

	border-right:2px solid black;

}
 

.clsSectionHeaderOff {

	background-color:#ffffff;

	font-size:10pt;

	color:black;

	width:100px;

	padding-left:5px;

	border-left:1px dotted black;

	border-top:1px dotted black;

	border-right:1px dotted black;

	border-bottom:2px solid black;

}

.clsSectionHeaderOff:hover {

	background-color:#ffffff;

}
 

.clsSubSectionOn {

	background-color:#ffffff;

	font-size:10pt;

	color:black;

}
 

.clsEmphaticSmall {

	font-size:8pt;

	color:red;

	font-weight:bold;

}
 

.clsDivSpacer {

	height:20px;

}
 

.clsFormSubHeading {

	font-size:10pt;

	font-weight:bold;

	border-bottom:1px dashed black;

}
 

#tabFaxInBox th, #tabVoicemailInBox th{

	padding-top:5px;

	border-bottom:2px double black;

	text-align:center;

	vertical-align:top;

}
 

#tabFaxInBox td, #tabVoicemailInBox td{

	padding-top:5px;

}
 

#divAdminTools, #divSupportTools, #divMyTools {

	margin-right:25px;

	

}
 

.clsToolsHeader {

	padding-bottom:15px;

}
 

form, .clsText, .clsSubmit{

	display:inline;

	white-space : nowrap;

}
 

#divClientExtensions {

	float:left;

	width:20%;

	border:1px solid red;

}

.clsActiveExtension input {

	margin:0;

	padding:0;

	white-space : nowrap;

}

#divActiveExtensionsHeader {

	padding-bottom:10px;

	

}

.clsActiveExtension {

	padding:3px 5px 2px 10px;

	font-size:10pt;

}
 

#divInActiveExtensionsHeader {

	padding-bottom:10px;

	

}

.clsInActiveExtension {

	padding:3px 5px 2px 10px;

	font-size:10pt;

}
 

.clsTextInput {

	border:2px solid black;

}
 

.clsFromSectionSubHeading {

	font-weight:bold; 

	padding-bottom:5px;

}
 

.clsWorkWithExt {

	width:184px;

	color:white;

	background-color:#0000cd;

}
 

.clsButAssignExt {

	width:184px;

	color:white;

	background-color:#ff6347;

}
 

#divCallout {

	float:right;

	width:120px;

	height: 200px;

	padding:5px;

	font-size:10pt;

	border-left:1px solid black;

}

#divCallout div {

	padding: 2px 0 3px 0;

}

#divCallout div a {

	text-decoration:none;

}
 

a img {

	border:0;
 

}
 

#imgPageTitle{

	position:relative;

	z-index:1;

}
 

.clsTinyMCESection{

	margin-bottom:10px;

}
 

.clsClearBoth{

	clear:both;

}
 

/* begin tab menu style */

/* base container style */

#divTabContainer{

	width:100%;

}
 

/* content window (div) where ajax response to be written */

#divTabContent{

	/*height:300px;

	padding:10px;

	position:relative;*/

	/*border:1px solid gray; border should to be same color as clsTabOff bg colour for best look */

}
 

/* tabs are list items - set list style */

#ulTabList {

	margin:0;

	list-style-type:none;

	padding:0;

}
 

/* div containing tab list items, having them in this div allows for ease of placement 

allows overlapping placement of menu item layer/div with content layer/div */

#divTabList{

	position:relative;

	z-index:10;

}
 

/* list item style - mainly intended to be used if tabs are text but margins can be important */

#ulTabList li{

	width:100px;

	float:left;

	margin:0 5px -1px 0px;

	border:1px solid gray;

	border-bottom:none;

	text-align:center;

	list-style-type:none;

	padding:0;

	cursor:pointer;

}
 

/* only used for text tabs - set 'on' state style */

.clsTabOn{

	background-color:#ffffff;

	color:#000000;

	cursor:pointer;

}
 

/* only used for text tabs - set 'off' state style */

.clsTabOff{

	background-color:gray;

	color:#ffffff;

	cursor:pointer;

}
 

/* end tab menu style */
 

</style>

</head>
 

<body>
 

<div align="center" id="mainContainer">
 

<div class="headerContainer">
 

<div style="float:left;position:relative;left:30px;top:20px;">

	<a href="/p_home.cfm"><img src="/images/header_logo.gif" alt=""></a>

</div>
 

<div class="clearBoth"></div>

</div> <!-- end headerContainer -->
 

<div class="pNavContainer">

	<a href="/p_home.cfm" onmouseover="MM_swapImage('pNav_home','','/images/pNav_home_hv.gif');" onmouseout="MM_swapImage('pNav_home','','/images/pNav_home_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_home_nm.gif" border="0" name="pNav_home"></a>

	<a href="/p_about.cfm" onmouseover="MM_swapImage('pNav_about','','/images/pNav_about_hv.gif');" onmouseout="MM_swapImage('pNav_about','','/images/pNav_about_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_about_nm.gif" border="0" name="pNav_about"></a>

	<a href="/p_vision.cfm" onmouseover="MM_swapImage('pNav_vision','','/images/pNav_vision_hv.gif');" onmouseout="MM_swapImage('pNav_vision','','/images/pNav_vision_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_vision_nm.gif" border="0" name="pNav_vision"></a>

	<a href="/p_program.cfm" onmouseover="MM_swapImage('pNav_program','','/images/pNav_program_hv.gif');" onmouseout="MM_swapImage('pNav_program','','/images/pNav_program_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_program_nm.gif" border="0" name="pNav_program"></a>

	<a href="/p_services.cfm" onmouseover="MM_swapImage('pNav_services','','/images/pNav_services_hv.gif');" onmouseout="MM_swapImage('pNav_services','','/images/pNav_services_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_services_nm.gif" border="0" name="pNav_services"></a>

	<a href="/p_gallery.cfm" onmouseover="MM_swapImage('pNav_gallery','','/images/pNav_gallery_hv.gif');" onmouseout="MM_swapImage('pNav_gallery','','/images/pNav_gallery_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_gallery_nm.gif" border="0" name="pNav_gallery"></a>

	<a href="/p_contact.cfm" onmouseover="MM_swapImage('pNav_contactus','','/images/pNav_contactus_hv.gif');" onmouseout="MM_swapImage('pNav_contactus','','/images/pNav_contactus_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_contactus_nm.gif" border="0" name="pNav_contactus"></a>

</div> <!-- end pNavContainer -->
 

<div class="bgMain" id="divBgMain">
 

<div class="contentContainer">
 

<div class="wrapperContent">

	

	<div class="wrapperColumn1">
 

<div style="position:relative;top:-20px;left:-40px;background:#ffffff; background-image: url('./images/landing_home.jpg');background-repeat:no-repeat;background-position:center top; width:960px; min-height:558px;border:1px solid gold; z-index:0;">	<!-- border is just dtil issue resolved -->
 

	<div id="divTabContainer" style="position:relative; top:400px;left:0; width:100%;">

	

		<ul id="ulTabList" style="margin-left:15px;">

			<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img1" src="/images/pNav_corporate_nm.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('about.school','divTabContent')"></li>

			<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img2" src="/images/pNav_corporate_on.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('about.course','divTabContent')"></li>

			<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img3" src="/images/pNav_corporate_hv.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('our.mission','divTabContent')"></li>

		</ul>

		<div class="clsClearBoth"></div>

	

		<div id="divTabContentContainer">

			<div id="divTabContent" class="clsTabContent" style="position:relative;border:1px solid black"> <!-- border is for testing only --->

				

			</div>

			<div style="clear:both;"></div>

		</div>

	</div>

</div>
 

	</div> <!-- end wrapperColumn1 -->
 

</div> <!--  end wrapperContent -->
 

<div class="divClearFloat"></div>
 

<div class="dividerH"></div>
 

<div class="wrapperContent">

	

<div class="wrapperColumn1">

	
 

</div> <!-- end first column -->
 

	

	

	<div class="wrapperColumn2">

	

	

	</div> <!-- end second column -->
 

</div> <!--  end wrapper -->
 

<div class="divClearFloat"></div>
 

</div> <!-- end contentContainer -->
 
 

</div> <!-- end bgMain -->
 

<div class="bgFooter">
 

<div class="footerContainer">

<div style="float:left;">

<span class="fNav"></span>

</div>
 

<div style="float:right;">

<a href="/p_home.cfm" class="fNav">Home</a>

<a href="/p_about.cfm" class="fNav">About</a>

<a href="/p_vision.cfm" class="fNav">Our Vision</a>

<a href="/p_program.cfm" class="fNav">The Program</a>

<a href="/p_services.cfm" class="fNav">Services</a>

<a href="/p_gallery.cfm" class="fNav">Gallery</a>

<a href="/p_advanced.cfm" class="fNav">Alumni Login</a>

<a href="/p_contact.cfm" class="fNav">Contact Us</a>

</div>
 

<div class="clearBoth"></div>
 
 

</div>	<!-- end fNav -->
 
 
 

</div>	<!-- end wrapper -->
 

<div class="bgCopyright">
 

<div class="footerContainer">

<div style="float:left;">

<span class="fNav"><img src="/images/fNav_copyright.gif" alt=""></span>

</div>
 

<div style="float:right;">

	<img src="/images/fNav_address.gif" alt="">

</div>
 

<div class="clearBoth"></div>
 
 

</div>	<!-- end fNav -->
 
 

</body>

</html>

Open in new window

0
 
LVL 25

Accepted Solution

by:
James Rodgers earned 0 total points
ID: 21797338
figured it out,kinda funny tho

because i placed the inner div at 400px the browser was still placing it at 0,0 and adjusting teh psotion so when i expanded teh div because it did not go over 558px in height it did not push down the content below the containing div not sure if that makes any sense but i fixed it by placing a spacer div 400px in height rather than use css positioning and it now pushes the container out when the inner div expands


<div style="position:relative;top:-20px;left:-40px;background:#ffffff; background-image: url('./images/landing_home.jpg');background-repeat:no-repeat;background-position:center top; width:960px; min-height:558px;border:3px solid red;">	

			<div id="divImageSpacer" style="height:400px;"></div>

			<div id="divTabContainer" style="">

				<ul id="ulTabList" style="margin-left:15px;">

					<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img1" src="/images/pNav_corporate_nm.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('about.school','divTabContent')"></li>

					<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img2" src="/images/pNav_corporate_on.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('about.course','divTabContent')"></li>

					<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img3" src="/images/pNav_corporate_hv.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('ourVision.mission','divTabContent')"></li>

				</ul>

				<div class="clsClearBoth"></div>

				<div id="divTabContentContainer" style="border:1px solid purple">

					<div id="divTabContent" class="clsTabContent" style="border:1px solid black">

					</div><!--- end divTabContent --->

				</div><!--- end divTabContentContainer --->

			</div><!--- end divTabConatainer --->

		</div><!--- end image div --->

Open in new window

0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now