Form gaat niet in paragraph ?

[mcdronkz]

Ik heb in CSS een soort van box gemaakt die een randje er omheen heeft.

Als ik hier tekst in zet blijft het er prima in staan, maar een form krijg ik er niet in. Als ik de form tags weg haal gaat het input veld enzo er prima in, terwijl m'n form tag toch echt juist is:

code:

.lightgraybg {
    border: 1px solid gray;
    background-color: #EEEEEE;
    background-position: 5% 5%;
    padding: 2px;
}

code:

<p class="lightgraybg">
<form method="post" action="?p=replies&part=2&item={$content.id}">
    <fieldset>
         <legend>Plaats Reactie</legend>                        
         Tekst: <br />
          <textarea rows="10" cols="30" name="tekst"></textarea><br />
          <input type="submit" name="submit_add" value="OK">
    </fieldset>
</form>
</p>[

Hoe kan dit ? Ik heb geprobeerd om de breedte van het form aan te passen, maar dit biedt geen soelaas. Voor de duidelijkheid: zonder form tags werkt het perfect.

[NMe]

Je mag geen blocklevel elementen in een paragraaf zetten, AFAIK.

[mcdronkz]

-NMe- schreef op maandag 12 juni 2006 @ 21:07:
Je mag geen blocklevel elementen in een paragraaf zetten, AFAIK.

Okay, dat wist ik niet. Wat is dan wél geschikt ?

Hmm, div does the trick.

[ Voor 6% gewijzigd door mcdronkz op 12-06-2006 21:11 ]

[NMe]

Een div in plaats van een paragraaf waarschijnlijk. Maar ik ben geenszins een webdesigner, hooguit een webprogrammeur.

[mcdronkz]

-NMe- schreef op maandag 12 juni 2006 @ 21:10:
Een div in plaats van een paragraaf waarschijnlijk. Maar ik ben geenszins een webdesigner, hooguit een webprogrammeur.

Uiteindelijk had je het toch bij het juiste eind .

[Verwijderd]

En slightly on topic: gebruik class names die de inhoud en niet de weergave omschrijven (dus 'searchbox' ipv 'lightgreybox' bijvoorbeeld).

[Reinier]

En gebruik

code:

&

In plaats van

code:

&

[mcdronkz]

Thanks voor de tips !

[Blaise]

Doe gewoon je <p> in je <form>. Die style kan je ook aan je form geven.

En nu we toch bezig zijn kan je er ook wel een label in proppen:

Cascading Stylesheet:

form{
    border: 1px solid gray;
    background-color: #EEE;
    padding: 2px;
}

label,#tekst{
    display:block; /* ipv <br> */
}

HTML:

<form>
    <fieldset>
         <legend>Plaats Reactie</legend>       
         <p>                 
             <label for="tekst">Tekst:</label>
             <textarea id="tekst"></textarea>
             <input type="submit">
          </p>
    </fieldset>
</form>

[ Voor 18% gewijzigd door Blaise op 12-06-2006 21:50 ]