SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: div positioning

Hybrid View

  1. #1
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div positioning

    Hello,

    I need some positioning help. I have some <div> tags that are created dynamically. Inside them are some more <div>s. One of the divs has text that is truncated because of its size. When I roll over the <div id="ProductTrunc_1"> I want to display the <div id="ProductFull_1"> over the <div id="lowerText_1"> without moving the <div id="lowerText_1"> at all. currently when you roll over the <div id="ProductTrunc_1"> the <div id="ProductFull_1"> shows, but it pushes the <div id="lowerText_1"> to the bottom.

    How can I get the <div id="lowerText_1"> to not move at all? I would also like it if the <div id="ProductFull_1"> displayed right over the <div id="ProductTrunc_1">

    http://www.servicewhale.com/expandableDiv.htm

    Thanks for any help

    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    	.wrapper {
    		width: 300px;
    		float: left;
    		border: solid 1px #CCC;
    	}
    	
    	.lowerText {
    		position: relative;
    		left: 0;
    		top: 0px;
    	}
    	
    	.productNameGridView {
    		position: relative;
    		left: 0;
    		top: 0;
    		z-index: 3;
    		color: red;
    	}
    </style>
    <script type="text/javascript">
    
        function expand(x){
            var expandAction = document.getElementById(x);
           
            expandAction.style.display="block";
        }
    
        function collapse(x){
            var collapseAction = document.getElementById(x);
           
            collapseAction.style.display="none";
        }
       
        function collapseAll(x){
             
           
            for (var i = 1; i <= document.getElementById(x.substring(0, 6)).length; i++)
               {
                    document.getElementById(x.substring(0, 12)).style.display="none";
               }
    					 
    					 
        }
    </script>
    
    </head>
    <body onload="collapseAll('ProductFull')">
    <div class="wrapper">
    	<div id="ProductTrunc_1" onmouseover="expand('ProductFull_1');" onmouseout="collapse('ProductFull_1');" class="productName">
    	    Some Text
    	</div>
    	<div id="ProductFull_1" class="productNameGridView">
    	    Some More Text Some More Text Some More Text Some More Text Some More Text
    	</div>
    	<div id="lowerText_1" class="lowerText">
    	    Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text
    	</div>
    </div>
    <div class="wrapper">
    	<div id="ProductTrunc_2" onmouseover="expand('ProductFull_2');" onmouseout="collapse('ProductFull_2');" class="productName">
    	    Some Text
    	</div>
    	<div id="ProductFull_2" class="productNameGridView">
    	    Some More Text Some More Text Some More Text Some More Text Some More Text
    	</div>
    	<div id="lowerText_2" class="lowerText">
    	    Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text
    	</div>
    </div>
    <div class="wrapper">
    	<div id="ProductTrunc_3" onmouseover="expand('ProductFull_3');" onmouseout="collapse('ProductFull_3');" class="productName">
    	    Some Text
    	</div>
    	<div id="ProductFull_3" class="productNameGridView">
    	    Some More Text Some More Text Some More Text Some More Text Some More Text
    	</div>
    	<div id="lowerText_3" class="lowerText">
    	    Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text
    	</div>
    </div>
                                              
    </body>
    </html>

  2. #2
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind, I got it.

    Just for the record:

    I needed to set the wrapper divs position to relative and then the I could set the child div positions to absolute. This was definitely an a-ha moment for me.


Bookmarks

Posting Permissions

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