OK, I'm fairly new to the world of CSS and am basically ready to give up. I've tried to look for good books on CSS design, but they mostly just talk about the specifics. Not many "cookbooks" out there as far as I can tell.
Now the problem:
I've got a form in which I've created styles for each piece. Example, I've got a "item-field" style which I apply to a div which wraps an entire entry, a "item-label" which is the label for a field and "item-data" which is the input. All are divs, so a snippet of the code whould look like this:
<div style="new-user-form" >
<div style="item-field">
<div style="item-label">Name</div>
<div style="item-data"><input type="text" name="name" /></div>
</div>
<div style="item-field">
<div style="item-label">Catgegory</div>
<div style="item-data"><input type="text" name="category" /></div>
</div>
<div style="item-field">
<div style="item-label">Age</div>
<div style="item-data"><input type="text" name="age" /></div>
</div>
</div>etc....
I've got some code which makes the category field an autocomplete dropdown of sorts. The problem is that the only way that I could get it to work is to make each item-field have decreasing z-index otherwise the "dropdown" in the item-field for category won't go in front of the Age textbox.
The problem is that if all of the "item-field" divs are on the same z-index, then their children can't display in front of the other boxes. THe problem is that if I make each "item-field" at decreasing z-index, the containing div, "new-user-form" wont expand as I add fields. I have a dynamic number of "item-field" objects.
I wish there was someway to have relative positioning for everything other than z-index, and then absolute z-indexing. How do people create well behaved sites with little pop-up messages, etc. It seems that you can't have a child draw in front of it's parents, only in front of siblings which have a lower z-index.
Any ideas? Books? Thanks everyone.
