ansaurus

Question

Do I have divitis? WHat should I enclose in a DIV?

Answer 1

+1 A:

Do I even need a DIV around a fieldset (or a text input box, radio group, other form input element?

Only you yourself can know this. But in general, no. Why not apply the style directly to the elements? A <div> around all those elements certainly seems excessive and is necessary only in rare cases.

In particular, labels on a form should be <label>s! Always use the semantically “correct” tag rather than an unspecific tag like <span> or <div>.

Konrad Rudolph 2010-09-23 08:57:26

+1 thanks. "Only you yourself can know this" - no I can't, as I am a newbie, which is why I ask :-) "But in general, no" - thanks, I suspected not, but needed someone knowledgable to confirm it. Thanks

LeonixSolutions 2010-09-23 11:44:46

@Leonix: Ok, let me explain further: as I said, the `<div>` is generally redundant if it’s just placed around one other element. There are some advanced CSS hackeries that can only be implemented using redundant dummy elements. Only in *such* situations is the extra `<div>` needed. And even then its usage is a dirty hack that should be avoided if at all possible. – But notice that this doesn’t preclude *all* usage of a `<div>`. There are cases where a `<div>` element is legitimately used to *group* other elements.

Konrad Rudolph 2010-09-23 12:01:57

+! Thanks, Konrad, that makes things cleaer (and I *do* have divitis ;-)

LeonixSolutions 2010-09-23 23:39:01

Answer 2

+1 A:

you could use unordered lists for displaying form elements.

that doesn't look too bad to me (other than the nasty inline absolute positioning - dreamweaver right?)

but that's fine really.

except did you know there is a <label> element?

apply a class to the and you can eliminate those two extra divs

<div class="panel">
<fieldset style="position: absolute; top:8px; left: 136px; width: 136px; height: 64px;">
  <legend> </legend>
  <label class="Label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">one</label> 
  <label class="TLabel" id="Label2" style="position: absolute; top:32px; left: 16px; width: 54px; height: 14px;">two</label>    
</fieldset>
</div>

Divitis (IMO) is more severe like:

<div class="content">
<div class="content-body">
<div class="content-start">
<div class="title">The Title</div>
    <div class="theauthor">The Author</div>
    <div class="thedate"><div class="day">Thursday</div> 10th December</div>
</div>
</div>
</div>

Ross 2010-09-23 08:58:16

Answer 3

+1 A:

no, you don't need a div around those elements - if you want to position them manually, you can do this with the element directly. also, if you need labels, why don't you use the <label>-tag?

oezi 2010-09-23 08:58:25

Answer 4

+1 A:

It depends on what you are trying to achieve with the layout. Can we see what you're trying to do?

One thing you certainly want to do is to remove the inline styling, e.g.:

style="position: absolute; top:8px; left: 136px; width: 136px; height

Put all that in a CSS file.

Joe R 2010-09-23 09:00:46

+1 for replying, thanks. Does it really matter what I am trying to do with the layout? That was just a little example, but as a CSS newbie I am looking for a generic answer. I can say, though, that I will always want to pisition the form elements exactly - which is why the style is inline, on a per element basis

LeonixSolutions 2010-09-23 11:40:28

Hello. It does matter. If it's just a fieldset that you're using then you don't need the div. If, for example, you want to put the fieldset to the left of something else, both of which need to be on the top right-side of your page, then putting the fieldset in a div might make sense. It all depends on what you're trying to achieve.

Joe R 2010-09-23 12:44:19

You can still position the form elements exactly when you use a CSS file. I don't know of any acceptable use of inline styles.

Joe R 2010-09-23 12:45:18

Answer 5

+3 A:

Erm... no. You don't have to put a div around those fieldsets.

Given that in your example there's no form elements at all, why should this even be a form? Okay, I know from your previous questions that you're trying to build a WYSIWYG form editor, but that's no excuse to use these sort of HTML.

If I clean up the example you're using, it would probably look something like:

<fieldset style="top:8px; left: 136px; width: 136px; height: 64px;">
  <label class="Label" id="Label1" style="top:8px; left: 16px;">one</label>    
  <label class="TLabel" id="Label2" style="top:32px; left: 16px;">two</label>    
</fieldset>

Since some styles are being applied more than once I believe it would be appropriate to store them in a stylesheet instead.

fieldset, label {
    position: absolute;
}

You also should have no need to set explicit width and height on the labels, especially if you don't have any form of border or background.

Logically you should also group label - input pairs together, for instance with a unordered list. Remember that for accessibility you're going to need the for attribute to point to the correct input elements. It would be better to mention the context of what you're doing here.

Yi Jiang 2010-09-23 09:05:36

+1 Thanks. There are 4 or 5 very good points here. I am learning a lot.

LeonixSolutions 2010-09-23 11:46:44

ansaurus

tags:

views:

answers:

Do I have divitis? WHat should I enclose in a DIV?

related questions