Je remarque que la plupart des gens parlent d'utiliser des divs et du CSS pour
Étiquette, paires de textes de texte. Comment convertir une table telle que: de l'utilisation d'une table dans un DIV avec CSS, un échantillon serait utile! Actuellement, j'utilisais une table pour une telle chose, imaginez un site qui affiche simplement certaines informations de l'utilisateur. Comment afficherai-je les paires (l'étiquette, la zone de texte) à l'aide de DIVS plutôt que le format de tableau? supposons que les étiquettes / textbox sont des étiquettes et des boîtes de texte ASP.NET.
5 Réponses :
Considérez cet article intitulé Formulaires de détachement à l'aide de CSS de CSSDrive.
Un peu de style aide vraiment. J'ai refactoring / remplaçant toutes les formes de toutes mes formes de table avec le modèle trouvé dans l'article ci-dessus.
avec le code suivant:
Voici le basique Exemple présenté:
le CSS: le HTML: < Pré> xxx
Considérez cet article à Woork intitulé propre et Conception de formulaire CSS pur
J'ai implémenté ce style, y compris le fichier envisagez d'utiliser et a modifié tous les styles de manière appropriée pour le look / sens nécessaire.
@pcampbell, sympa ce que je suis le plus intéressé, c'est "Ajoutez votre nom", "Ajoutez une adresse valide", etc. En dessous de chaque étiquette audacieuse. Pouvez-vous partager le CSS pour ce formulaire et le HTML?
Si vous allez utiliser des balises <étiquettes> dans votre balisage, envisagez d'utiliser un
Juste Fyi, dans les 3 ans ou quelque chose comme cette réponse,
@ P.Campbell, il suffit d'ajouter l'exemple ce matin.
Grande réponse, le lien "Clean and pur CSS Form Design" n'est pas disponible, mais trouvé ce lien à la la mise en oeuvre
extrait de mon code: avec le CSS suivant:
J'ai utilisé essentiellement la même idée de créer une mise en page de forme sans défaite. Mais, j'utilise une liste non ordonnée pour conserver mes étiquettes et mes entrées. Par exemple:
ul {list-style: none; margin: 0; padding: 0;}
Basé sur @ p.cambell Réponse et La mise en œuvre avec CSS , j'ai écrit ce code dans ASP.NET pour un écran contextuel de connexion:
CSS strong> p> <div id="popupLogin" class="flotante-login" style="display:none;">
<asp:Panel ID="panelLogin" runat="server" DefaultButton="lbLogin">
<div id="login" class="loginBox">
<h1>Acceso</h1>
<label>
Usuario:
<span class="small">Ingresa tu email</span>
</label>
<asp:TextBox ID="txtUsuario" runat="server" MaxLength="250"></asp:TextBox>
<label>
Contraseña:
<span class="small">Ingresa tu contraseña</span>
</label>
<asp:TextBox ID="txtPassword" runat="server" MaxLength="8" TextMode="Password"></asp:TextBox>
<asp:LinkButton ID="lbLogin" Text="Ingresa" runat="server"></asp:LinkButton>
<div class="spacer"></div>
</div>
</asp:Panel>
</div>
Votre écran de connexion se comporte-t-il comme une fenêtre modale?
@Danielv oui c'est une fenêtre de fenêtre contextuelle, j'utilise jQuery blockui si vous vous demandez