[CSS] Hoe kan ik mijn form goed uitlijnen?

[Verwijderd]

Ik heb het volgende form met bijbehorende css:

HTML:

<form>
  <fieldset>
    <legend>Test fieldset</legend>
    <div class="description">Personalia voor administatiedingen</div>
    <div class="form-item ">
      <label for="naam">Naam:<span class="form-required">*</span></label>
      <input type="text" name="naam" class="form-text required">
      <div class="form-description">uw voor- en achternaam</div>
    </div>
    <div class="form-item">
      <label for="msg">Uw bericht:<span class="form-required" >*</span></label>
      <textarea class="form-textarea" name="msg" ></textarea>
      <div class="form-description">maximaal 200 woorden</div>
    </div>
    <div class="form-item ">
      <label>myselect:</label>
      <label class="option">
        <input type="checkbox" class="form-checkbox" value="A">A
      </label>
      <label class="option">
        <input type="checkbox" class="form-checkbox" value="B">B
      </label>
    </div>
    <input type="submit">
  </fieldset>
</form>

Cascading Stylesheet:

fieldset {
  border: solid 1px #aaa;
  width: 400px;
}

label {
  display: block;
  float: left;
}

.form-description {
  margin-left: 100px;
}

.form-item {}

.form-checkbox {}
 
.form-submit {}

.form-required {color: red;}

Momenteel ziet het form eruit als op de linker foto. Op de rechterfoto een geshopt voorbeeld van hoe ik het eruit wil laten zien. Maar hoe ik ook niet pruts met de marges in label en .form-item, ik krijg de inputs niet recht onder elkaar. Het probleem is dat ik de html niet kan aanpassen; anders had ik er hier en daar wel een handig divje tussen geplaatst.



Is wat ik wil, met deze html, ueberhaupt mogelijk en zo ja, wie kan mij op weg helpen?

[ Voor 3% gewijzigd door Verwijderd op 16-10-2009 21:45 ]

[Sebazzz]

Je kan natuurlijk met display: table-* gaan kloten, maar wat is er mis mee om het gewoon op de volgende lijn te zetten?

[RobertMe]

Waarom geef je die labels geen display: inline-block in de plaats van een display: block en een float: left, vervolgens kun je ook een width instellen op de labels (wat bij display: block natuurlijk ook kan, maar dan moet je de floats gaan clearen wat een nog grotere "puinzooi" oplevert aangezien je aangeeft de html niet te kunnen wijzigen)

[Verwijderd]

RobertMe schreef op vrijdag 16 oktober 2009 @ 22:23:
Waarom geef je die labels geen display: inline-block in de plaats van een display: block en een float: left, vervolgens kun je ook een width instellen op de labels (wat bij display: block natuurlijk ook kan, maar dan moet je de floats gaan clearen wat een nog grotere "puinzooi" oplevert aangezien je aangeeft de html niet te kunnen wijzigen)

Dan krijg ik nu dit dit:

Cascading Stylesheet:

fieldset {
  border: solid 1px #aaa;
  width: 400px;
}

label {
  display: inline-block;
  width: 80px;
  vertical-align: top;
}

.form-description {
  margin-left: 80px;
}

.form-item {}

.form-checkbox {}
 
.form-submit {
  margin-left: 80px;
}

.form-required {
  color: red;
}

Dat is bijna goed, alleen staan de checkboxes niet onder elkaar maar naast elkaar. Hoe zou ik dat kunnen aanpassen?

[iBasch]

Dan moet je na de eerste checkbox een <br /> neerzetten. Wel even margin weer goed zetten door er een lege label neer te zetten.

edit:
Goed bezig

[ Voor 28% gewijzigd door iBasch op 16-10-2009 22:38 ]

[Verwijderd]

iBasch schreef op vrijdag 16 oktober 2009 @ 22:35:
[...] Gewoon een <br />.

Ik kan de html dus niet aanpassen. Zou wel de DOM kunnen aanpassen met wat js, maar dat lijkt me vooralsnog wat overkill. Is er geen andere manier?

[iBasch]

Naar de volgende regel duwen met margin-right, en margin-left om ze weer onder elkaar te zetten.

Cascading Stylesheet:

.option
{
    margin-right: 200px;
    margin-left: 80px;
}

Werkt voor mij in Firefox en IE.

[Verwijderd]

iBasch schreef op vrijdag 16 oktober 2009 @ 22:46:
Naar de volgende regel duwen met margin-right, en margin-left om ze weer onder elkaar te zetten.

Cascading Stylesheet:

.option
{
    margin-right: 200px;
    margin-left: 80px;
}

Werkt voor mij in Firefox en IE.

Dat werkt bijna: zoals je ziet staan ze onder elkaar, maar de eerste checkbox (A) dient op dezelfde regel als "myselect" te staan. Nu beginnen de checkboxen pas op de regel daaronder. Enig idee?

[ Voor 20% gewijzigd door Verwijderd op 16-10-2009 23:42 ]

[RobertMe]

Je wilt dus elke .option, die door een .option word vooraf gegaan die margins geven, dat kan, met .option + .option (E + F, alle F's die worden vooraf gegaan door E) Als je dus die .option veranderd naar .option + .option dan zou die moeten werken.

[PeterSelie]

RobertMe schreef op dinsdag 20 oktober 2009 @ 08:21:
Je wilt dus elke .option, die door een .option word vooraf gegaan die margins geven, dat kan, met .option + .option (E + F, alle F's die worden vooraf gegaan door E) Als je dus die .option veranderd naar .option + .option dan zou die moeten werken.

Ik meen me te herinneren dat dat niet helemaal cross-browser compatible was. Enig idee waar (meer) documentatie over bovenstaande is te vinden?

[RobertMe]

SoaDmaggot schreef op dinsdag 20 oktober 2009 @ 08:31:
[...]

Ik meen me te herinneren dat dat niet helemaal cross-browser compatible was. Enig idee waar (meer) documentatie over bovenstaande is te vinden?

http://www.quirksmode.org/css/contents.html#t12
Oftewel, alleen IE 5.5 en IE6 niet, voor de rest zijn er sommige oudere versies van browsers die niet (goed) updaten als er dynamisch iets gebeurd, ik weet niet of je ook nog met JS dingen doet toevoegen waardoor die moet updaten?

[Verwijderd]

Als het niet mogelijk is, kan ik altijd de DOM aanpassen en een div om de options heen zetten:

HTML:

<div class="form-item ">
  <label>myselect:</label>
  <div class="options">
    <label class="option">
      <input type="checkbox" class="form-checkbox" value="A">A
    </label>
    <label class="option">
      <input type="checkbox" class="form-checkbox" value="B">B
    </label>
  </div> 
</div>

Dan kan ik div.options een float: left meegeven (uit mijn hoofd, css is bij mij nog vaak trial-and-error), maar zonder zou natuurlijk mooi zijn. Aan de andere kant is het imho nog te vroeg om IE5.5 en 6 buiten te sluiten. Ik heb niet recentelijk de respectievelijke marktaandelen bekeken, maar die zullen vast nog substantieel zijn...

[Cartman!]

IE5.5 kun je echt wel uitsluiten. IE6 is een keuze, ik zou net zoals T.net proberen te zorgen dat alles crossbrowser werkt vanaf IE6 maar als t niet zo is: dikke pech, dan moet je maar upgraden

[Tjolk]

IE 5.5 heeft volgens mij nog maar iets van een half procent aandeel, die sluit ik dus ook uit. IE6 heeft nog een procentje of 10 (met name bedrijfsnetwerken), en zou ik dus zeker niet uitsluiten voor belangrijke zaken.