[thelist] [SOLVED] [CSS & DHTML] Showing/Hiding Divs in a Table-less layout

Jacques Capesius jacques_capesius at cnt.com
Tue Jan 20 15:18:01 CST 2004


> Here's a couple pointers that you may find helpful:
> 
> 1.  Absolute position (along with right and top) will not be needed
> to solve this issue.  You should be able to do this with nothing more
> than using the float attribute.
> 2.  The CSS property "display" may be very helpful here.  "Visibility"
> reserves the area on the page for the element.  Display actually
> pulls the element out of the document flow.
> 3.  Take a look at CSS Child Selectors.  You should be able to use
> those (as opposed to explicit classes on embedded divs) to align the
> elements as you'd like.  Using these selectors helps reduce the
> amount of page code as well as improving debugability.
> 
> Best of luck.
> 
> <><><><><><><><><><>
> Joshua Olson
> Web Application Engineer
> WAE Tech Inc.
> http://www.waetech.com/service_areas/
> 706.210.0168

Hello, guys,

With Joshua's help, I was able to figure it out. Here's what I did, for
those of you who might find the info useful. I noticed another similar topic
on the list. Maybe this will help ya out...

<tip type="Javascript for Showing / Hiding Divs.">
   /* hide */	document.getElementById(divID).style.display = "none";
   /* show */	document.getElementById(divID).style.display = "block";

   /* the term 'block' may be misleading. it doesn't mean 'block the div
      from being shown', rather 'draw a block for this div and add it to
      the document flow'
	more information: 
      http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display
   */
</tip>

<tip type="simple table-less 'row' using CSS">
   **CSS Style:**
	.left { /* left cell in the row */
	   float:left;
	   width:300px; /* how wide you want the left 'cell' to be */
	}

   **(X)HTML**
     <div class="left">row 1 left 'cell' text</div>
     row 1 right 'cell' text
     <div class="left">row 2 left 'cell' text</div>
     row 2 right 'cell' text
   
    **CAVEAT:**
    text in the right 'cell' will wrap flushed to the left, aligned
    with the left-classed div

    more information:
    http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float
</tip>


More information about the thelist mailing list