[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