Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    container div expanding when link is clicked

    Hey

    odd little error started cropping up when I introduced the container div "mainDisplay". whenever I click one of my links (which currently don't work due to a script adjustment that needs fixing)... the div expands to fit the entire width of the page and hides the links.

    I set the background color to red so you could see what i meant (click a link)
    www.enviromark.ca/Collab/tests/T1.htm

    here's the code.

    why would this be occuring?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>The Concordia Collaboration Lab</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script language="JavaScript" type="text/javascript" src="js/borderFade.js"></script>
    <script type="text/javascript"> 
      var arrPrevDiv = [null, null];
    
      function toggle(id, linkGroup) {
    
    	if (arrPrevDiv[linkGroup] != null) {
    		arrPrevDiv[linkGroup].style.display = "none"; 
    	}         
    
    	var s = document.getElementById(id);
    					
    	s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none"; 
    	arrPrevDiv[linkGroup] = s; 
    	// window.location.href='#'+ id;
    	window.status=''
    
    	}  
    
    </script>
    
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    html, body {
    height: 100%;
    text-align: center;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 11px;
    background-color: white;
    }
    #pageContainer {
    min-height: 100%;
    }
    * html #pageContainer {
    height: 100%;
    }
    A:link, A:visited, A:active {
    text-decoration: none; 
    color: blue;
    }
    .mainLinks {
    position: relative;
    text-decoration: none;
    margin-left: 25px;
    margin-right: 25px;
    }
    #welcome {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    font-size: 14pt;
    }
    #links {
    float: left;
    display: inline;
    height: 100px;
    width: 100px;
    margin-left: 75px;
    margin-top: 75px;
    position: relative;
    text-align: left;
    border-right: 1px #ccc solid;
    }
    #mainDisplay {
    position: relative;
    background-color: red;
    margin-right: 100px;
    }
    #mainLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 300px;
    width: 210px;
    padding: 20px;
    }
    #Link2, #Link3, #Link4, #Link5  {
    display: none;
    }
    </style>
    
    
    </head>
    
    <body onload="zxcInit('mainLinks','#FFFFFF','#000000',15)">
    <div id="pageContainer">
    	<div id="welcome">Welcome to the Concordia Collaboration Lab</div>
    	<div id="links">
    		<a class="mainLinks" href="#Link2" onclick="return toggle('Link2', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 2</a>
    		<br>
    		<a class="mainLinks" href="#Link3" onclick="return toggle('Link3', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 3</a>
    		<br>
    		<a class="mainLinks" href="#Link4" onclick="return toggle('Link4', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 4</a>
    		<br>
    		<a class="mainLinks" href="#Link5" onclick="return toggle('Link5', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 5</a>
    	</div>
    	<div id="mainDisplay">
    		<div id="mainLogo">
    			<img src="images/toddler.gif">
    		</div>
    		<div id="Link2">Link 2</div>
    		<div id="Link3">Link 3</div>
    		<div id="Link4">Link 4</div>
    		<div id="Link5">Link 5</div>
    	</div>
    </div>
    </body>
    </html>
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    what i'm essentially trying to do is this, but with divs

    So the mainDisplay div has to remain static where it is (height will vary), and i'm simply loading other divs into it.
    Last edited by canadianjameson; 09-26-2006 at 03:56 AM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm you need to add a left margin to #mainDisplay of at least 175px so it doesn't overlap your menu which is currently does.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    as always, perfect
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •