[CSS]2 kolommen

[Dr_Frickin_Evil]

Ik wil een contact form netjes opbouwen, het moet er als volgt uit komen te zien:

code:

Naam:         |______________|

Email:        |______________|

Onderwerp:    |______________|

Bericht:      |              |
              |              |
              |              |
              |______________|

Ik doe dit momenteel als volgt:

code:

<form id="contact">
    <p>
        Name:
        <span><input maxlength="60" size="40" type="text" name="name" /></span>
    </p>
    <p>
        Email:
        <span><input maxlength="60" size="40" type="text" name="email" /></span>
    </p>
    <p>
        Onderwerp:
        <span><input maxlength="60" size="40" type="text" name="subject" /></span>
    </p>
    <p>
        Bericht:
        <span><textarea name="message" cols="60" rows="10"></textarea></span>
    </p>
</form>

en dan met deze css code:
#contact span { position: absolute; left: 150px; }

Dit werkt opzich goed, maar met de <textarea> gaat het fout, door de position: absolute. Er wordt in de layout nu geen rekening gehouden met de hoogte van de textarea, met als gevolg dat de rest van de pagina deels achter de textarea staat. Nu kan ik opzich wel de textarea in een divje met position: relative; left: 150px zetten apart op een regel dus), maar dat vind ik een minder mooie manier. Hoe kan ik het beste 2 kolommen maken zoals in het voorbeeld?

[Skaah]

Tabellen.

[Not Pingu]

HTML:

css:
div.formcaption{
float: left;
width: 200px;
}

div.formitem{
width: 400px;
}



<form blabla>
<div class="formcaption">Naam</div>
<div class="formitem"><input type="text"></div>

<div class="formcaption">Email</div>
<div class="formitem"><input type="text"></div>
</form>

[edit] weer eens niet gelezen stoute gunp01nt

[ Voor 32% gewijzigd door Not Pingu op 04-04-2004 20:47 ]

[disjfa]

@Skaah. tabellen geven de oplossing niet van het probleem wat gegeven is.
@Gunp01nt. de inputs stonden al goed hoorde ik de ts zeggen, alleen de textarea niet.

Ik had wel een keer een goede uitleg gevonden op ala, ik zou daar even kijken als ik de ts was

[Unverter]

disjfa schreef op 04 april 2004 @ 19:58:
Ik had wel een keer een goede uitleg gevonden op ala, ik zou daar even kijken als ik de ts was

http://www.alistapart.com/articles/journey/
Of hier gelijk een voorbeeld: http://www.glish.com/css/9.asp

[ludo]

Ik heb vandaag hetzelfde gemaakt, misschien heb je er wat aan

De HTML is als volgt:

code:

<form method="post">
  <div>
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject"/>
  </div>
  <div>
    <label for="description">Description</label>
    <input type="text" name="description" id="description"/>
  </div>
  <div>
    <label for="parent_id">Parent</label>
    <select name="parent_id" id="parent_id">
      <option value="0">Root</option>
      <option value="1">&nbsp;&nbsp;&nbsp;Cat 1</option>
    </select>
  </div>
  <div>
    <input type="submit"/>
  </div>
  <br/>
</form>

En deze CSS wordt gebruikt om het geheel net zo weer te geven als jij het wilt:

code:

form br { clear:both; } /* Stupid hack to make sure stuff
after form is placed underneath it and not in line with it |:( */
form div {
    clear:both;
}
form div label {
    float:left;
    vertical-align:top;
    width:20%;
}
form div input, form div select {
    float:left;
}

Moet misschien nog wat verfraaid worden, maar het geeft een ideetje van hoe je het zou kunnen oplossen

[ Voor 57% gewijzigd door ludo op 04-04-2004 20:21 . Reden: Overbodige troep weggehaald ]

[F97]

http://www.quirksmode.org/css/forms.html !!

[crisp]

zo doe ik het in de nieuwe GoT layout, met definition lists dus: http://crew.tweakers.net/...ut/list_messages_mod.html

[Verwijderd]

Doe jezelf een lol en gebruik LABEL tags. Het voegt betekenisvolle structuur toe die je weer kunt stylen met CSS.

code:

<div class="formGroup">
    <label for="inputID">Een input</label>
    <input type="text" id="inputID" />
</div>

.formGroup {
    clear:both;
}

label {
    display:block;
    width:150px;
    float:left;
}

input {
    width:150px;
    float:left;
}

Dit zou al aardig in de richting moeten komen.

[ Voor 11% gewijzigd door Verwijderd op 04-04-2004 20:27 . Reden: spuit 11 :P ]

[crisp]

Het 1 sluit het ander niet uit; het voordeel van definition lists is dat het zonder opmaak ook een gestructureerd geheel is, terwijl je anderszijds binnen je definitie weer een label kan zetten. PPK gebruikt toch nog br-tags.

[Dr_Frickin_Evil]

Thx mensen, hier kan ik wat mee, had er eerlijk gezegd zelf ook op kunnen komen, maar af en toe staar je je blind op iets. Ik heb het met definition lists opgelost.

[X-Lars]

Ik zie hier nog niet de oplossing staan die het IMHO zou moeten zijn:

HTML:

<form>
  <fieldset>
    <label for="item1">Item 1</label><input name="item1" id="item1" />
    <label for="item2">Item 2</label><input name="item2" id="item2" />
    <input type="submit" />
  </fieldset>
</form>

Ik heb nu enkele keren een form op deze manier gemaakt en kan het helemaal naar wens stylen. Waarom dl's? Zonder CSS ziet zo'n fieldset er ook nog "goed" uit en eventueel kan die "clear:both;" ook wel aan hetgeen eronder komt gehangen worden. (Of aan de <form> of <fieldset>?)

[crisp]

X-Lars schreef op 05 april 2004 @ 09:28:
Ik zie hier nog niet de oplossing staan die het IMHO zou moeten zijn:
[...]
Ik heb nu enkele keren een form op deze manier gemaakt en kan het helemaal naar wens stylen. Waarom dl's? Zonder CSS ziet zo'n fieldset er ook nog "goed" uit en eventueel kan die "clear:both;" ook wel aan hetgeen eronder komt gehangen worden. (Of aan de <form> of <fieldset>?)

Dat is wel geopperd hoor
Het nadeel van deze manier is dat zonder stylesheet alles achter elkaar komt te staan omdat het allemaal inline elementen zijn; je moet dan eigenlijk achter elke input nog een br zetten.
Waar ik op doelde was een combinatie van een definition list met labels:

HTML:

<form action="bla.php">
  <fieldset>
    <legend>formuliertje</legend>
    <dl>
      <dt><label for="naam">naam</label></dt>
      <dd><input type="text" id="naam" name="naam" /></dd>
      <dt><label for="adres">adres</label></dt>
      <dd><input type="text" id="adres" name="adres" /></dd>
    </dl>
    <input type="submit" />
  </fieldset>
</form>

[ Voor 12% gewijzigd door crisp op 05-04-2004 11:38 ]

[X-Lars]

<insectensexmodus>"Ja maar," ik had nog een <fieldset> erin.</insectensexmodus>

Nou ja, het is me in ieder geval wel duidelijk. Maar ik heb wel een beetje moeite met zo'n "hack". Een dl gebruiken waar het niet nodig zou moeten zijn, zodat het er non-css ook nog acceptabel uitziet. So be it.