Positionnement d'un champ de saisie de commentaire

Question

Quel est un bon moyen de donner au champ de saisie ci-dessous les trois caractéristiques listées?

Caractéristiques:

-Toujours 30 px depuis le côté gauche de la fenêtre du navigateur.

- Toujours 30 px sous les mots "Ajouter un commentaire" si aucun commentaire n'a été ajouté.

-Très 30 px au-dessous du commentaire précédent si un ou plusieurs commentaire (s) ont été (sont) ajouté (s).

Merci à l'avance,

John

HTML/Code PHP:

<div class="addacomment"><label for="title">Add a comment:</label></div> 
    <div class="commentbox"><input class="commentsubfield" name="title" type="title" id="title" maxlength="1000"></div> 

CSS (thusfar Je n'ai pas des déclarations pour le sélecteur "commentbox"):

.commentsubfield { width: 390px; height: 90px; border: 1px solid #999999; padding: 5px; } 
.addacomment 
    { 
    position:absolute; 
    width:250px; 
    left:30px; 
    top:180px; 
    text-align: left; 
    margin-bottom:3px; 
    padding:0px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color:#000000; 
    } 

Answer 1

Tout d'abord, vous n'avez pas besoin de ceux <div> s. Vous pouvez simplement ajouter class="addacomment" à l'étiquette.

Vous avez ceci:

<label class="addacomment" for="title">Add a comment:</label> 
<?php print $your_comments_if_any; ?> 
<input class="commentsubfield" name="title" type="title" id="title" maxlength="1000"> 

Je ne suis pas sûr de ce que DOCTYPE que vous utilisez, mais vous voyez l'idée. Maintenant pour le CSS:

Si vous voulez positionner quelque chose par rapport à la page, c'est une bonne idée de garder les marges de la page à l'esprit. En supposant que la valeur par défaut, vous souhaitez définir des marges ou padding à 0:

html, body { 
    margin: 0; 
    padding: 0; 
    } 

Maintenant, le positionnement que vous avez fait sur .addacomment vous empêche essentiellement d'obtenir le résultat souhaité. J'ai dépouillé les trucs inutiles pour plus de clarté:

.addacomment { 
    display: block; /* override the default inline display */ 
    margin-left: 30px; /* The 30px from the left you wanted */ 
    } 

Ensuite, .commentsubfield a besoin que les marges ajoutées à ce:

.commentsubfield { 
    margin: 30px 0 30px 30px; 
    [your other styles] 
    } 

Cela devrait vous donner le résultat suivant (ce qui est une capture d'écran réelle de l'Opéra 10,10 OSX), bien que je trouve à séparer l'étiquette de son champ assez bizarre:

form element positioning example http://img.skitch.com/20100329-pbyj117655wig4pfh8estxw9me.jpg

Je recommande le maintien entrée et étiquette correspondante ensemble.

J'espère avoir bien compris votre question, et j'espère que cela vous aidera.