28172 sujets

CSS et mise en forme, CSS3

[Résolu] Aligner des labels et des champs de saisie + centrage Div

Hello tout le monde,

Je suis en train de travailler sur un site et j'aimerai, pour une fois, utiliser le moins possible les tableaux pour la mise en forme des éléments. Pour ça, voilà quelques jours que je me suis plongé dans la lecture des tutoriaux et du forum de ce site mais je ne sais pas si le résultat est vraiment bien.
En fait, voilà l'élément auquel je dois arriver :
upload/16356-login.gif

Et pour cela, voilà les styles que j'utilise :

.loginBox
{
	width: 350px;
}
.shadowedBox
{
	position: relative;
	width: 100%;	
}
.box-header
{
	background-image: url(images/form-top-left.gif);
	background-repeat: repeat-x;
	padding: 0px 0px 0px 18px;
	text-align: left;
	vertical-align: middle;
	height: 22px;
	line-height: 22px !important; /* Hack for IE6 */
	line-height: 18px;
	margin-right: 15px;
}
.shadowedBox-right
{
	position: absolute;
	background-image: url(images/shadow-right.jpg);
	background-repeat: no-repeat;
	right: 0px;
	width: 15px;
	height: 150px;
}
.shadowedBox-content
{
	margin-right:15px;
	text-align:left;
	background-image: url(images/bg-shadow.jpg);
	background-repeat: no-repeat;
	background-color: #ffffff;
}
.box-line
{
	height: 20px; 
	padding-top: 2px; 
	padding-bottom: 2px; 
	margin-right: 15px; 
	margin-left:15px;
	vertical-align: middle;
	height: 20px;
	line-height: 20px !important; /* Hack for IE6 */
	line-height: 18px;
}
.labelsBlock
{
	float: right;
	text-align: right;
	margin-right: 1px;
}
.controlsBlock
{
	float: right;
	text-align: left;
}
.titleBlock
{
	float: left;
	text-align: center;
	width: 100%;
}
.orange-button 
{
	float: right;
	background-color: transparent;
	background-image: url(images/button/left-orange.gif);
	background-repeat: no-repeat;
	color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 700;
	height: 24px;
	line-height: 24px;
	vertical-align: middle;
	margin-left: 5px;
	padding-bottom:2px;
	text-align:center;
	text-decoration: none;
}
.orange-button a {
	color: #ffffff;
	text-decoration:none;
}
.white-button 
{
	float: right;
	background-color: transparent;
	background-image: url(images/button/left-white.gif);
	background-repeat: no-repeat;
	color: #686a6c;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 700;
	height: 24px;
	line-height: 24px;
	padding-bottom:2px;
	text-align:center;
	text-decoration: none;
	vertical-align: middle;
	margin-left: 5px;
}
.white-button a {
	color: #686a6c;
	text-decoration:none;
}


Et le résultat dans la page :

<html>
  <body>
    <form>
        <div style="width: 100%; text-align: center; margin: auto; background-color: #FFFFFF">
            <div class="loginBox">
                <div class="shadowedBox">
                    <div class="box-header">
	              <img src="App_Themes/Default/Images/form-top-right.gif" align="right" style="border-style:none;border-width:0px;" /><span id="titleLogin" class="form-name">Login</span>
                    </div>
                    <div class="shadowedBox-right">
                    </div>
                    <div class="shadowedBox-content">
                        <div class="box-line">
                            <div class="titleBlock">
                                <span id="lblLoginIntro" class="form-message">You must be connected to accede to the service.</span>
                            </div>
                        </div> 
                        <div class="box-line">
                            <div class="controlsBlock">
                                <input name="UserName" type="text" id="UserName" class="form-input-200" />
                                <span id="UserNameRequired" title="User Name is required." class="form-error" style="color:Red;visibility:hidden;">*</span>
                            </div>
                            <div class="labelsBlock">
                                <label for="UserName" id="UserNameLabel" class="form-label">User Name</label>
                            </div>
                        </div>
                        <div class="box-line">
                            <div class="controlsBlock">
                                <input name="Password" type="password" id="Password" class="form-input-200" />
                                <span id="PasswordRequired" title="Password is required." class="form-error" style="color:Red;visibility:hidden;">*</span>
                            </div>
                            <div class="labelsBlock">
                                <label for="Password" id="PasswordLabel" class="form-label">Password</label>
                            </div>
                        </div>
                        <div class="box-line">
                            <div class="labelsBlock">
                                <a id="lnkRetrievePassword" class="form-link" href="">I have forgotten my password</a>
                            </div>
                        </div> 
                        <div class="box-line">
                            <div class="orange-button" style="width:100px;">
	                      <img src="App_Themes/Default/Images/button/right-orange.gif" align="right" style="border-style:none;border-width:0px;" /><a id="btnConnect" href="" style="display:inline-block;width:100px;">Connect</a>
                            </div>
                            <div class="white-button" style="width:100px;">
	                      <img src="App_Themes/Default/Images/button/right-white.gif" align="right" style="border-style:none;border-width:0px;" /><a id="btnCancel" href="">Cancel</a>
                            </div>
                        </div>
                        <div class="box-line">
                            <div class="form-error">   
                            </div>
                        </div>
                        <div class="box-line"> 
                            <div id="valLoginErrorsSummary" class="form-error" style="color:Red;display:none;">
                            </div>
                        </div> 
                    </div>
                </div>
            </div> 
        </div> 
    </form>
  </body>
</html>


J'arrive au résultat voulu mais ma technique me paraît peut-être un peu compliquée avec beaucoup de div imbriquées. Est-ce que c'est normal ou y a-t-il d'autres techniques plus standards pour arriver à ce style d'alignement ? Je n'ai par exemple pas réussi à faire autrement que d'avoir un div par "ligne" (label + champ).

De plus, j'ai un problème sous Firefox : le div "loginBox" n'est pas centré alors que ça fonctionne bien sous IE. J'ai fait des recherches mais je n'arrive à comprendre pourquoi ça ne fonctionne pas.

Voilà, j'espère que vous pourrez m'aider et me faire profiter de votre expérience ! (y compris si c'est pour me dire que pour ce genre de mise en forme, les tableaux sont la meilleure solution !)
Modifié par Kornichon (15 Apr 2008 - 16:38)
Hello et bienvenue Smiley smile

a écrit :
J'arrive au résultat voulu mais ma technique me paraît peut-être un peu compliquée avec beaucoup de div imbriquées.
Oui on peut le dire Smiley ravi

a écrit :
Est-ce que c'est normal ou y a-t-il d'autres techniques plus standards pour arriver à ce style d'alignement ?
Il y a une méthode beaucoup plus simple...

Je te laisse la découvrir : Formulaires sans tableaux

Bon courage et à bientôt Smiley cligne
Super merci !
Effectivement c'est quand même un poil plus simple... Ceci dit, je me tâte pour savoir si je vais pas conserver des divs pour la structure externe de la boite et un bête tableau pour l'intérieur. Je sais pas, je vais quand même essayer avec ta technique pour voir.

Par contre, par rapport au problème de centrage de l'élément dans la page, une idée ?

Merci
Bonjour,

Tu peux éventuellement utiliser un tableau (deux lignes, deux colonnes) pour tes labels/champs texte, ça ne posera pas de problème particulier ici. Mais je te laisse voir les exemples pointés par BeliG, avec un avertissement toutefois: le premier exemple bugue dans Firefox 3 (mais pas dans Firefox 2, Opera 9, Safari 3.1...). Je pense que le problème vient du fait que certaines règles de mise en forme sont appliquées directement aux éléments input, ce que certains navigateurs n'apprécient pas toujours. Donc il est plus prudent d'utiliser une structure du type:
<p class="double">
	<label for="f1-prenom">Prénom:</label>
	<span class="field"><input type="text" id="f1-prenom" /></span>
</p>
pour appliquer le positionnement au span (en display: block) et la mise en forme «cosmétique» au champ input.
Hello,

Donc j'ai pas mal bosser sur les exemples fournis ainsi que d'autres ressources concernant la réalisation de boutons image redimensionnables et je suis finalement parvenu à un résultat pas mal (je pense).
Ca change pas énormément de choses au niveau du nombre de balises imbriquées mais par contre, au lieu d'avoir plein de divs partout, j'ai des "p" et des "span". J'en ai aussi profité pour renommer mes styles de manière plus hiérarchiques.

Donc voilà le résultat :

        <div class="loginBox">
            <div class="shadowedBox">
                <span id="lblTitle" class="title" style="display:inline-block;width:350px;"><span style="width:350px;"><span style="width:332px;">Login</span></span></span>
                <div class="shadowedBox-content">
                    <p class="box-line">
                        <span class="centerBlock">
                            <span id="Label3" class="form-message">You must be connected to accede to the service.</span>

                        </span>
                    </p>
                    <p class="box-line">
                        <span class="leftBlock">
                            <span id="Label1" class="form-label">User Name</span>
                        </span><span class="rightBlock">
                            <input name="TextBox1" type="text" id="TextBox1" class="form-input-200" />
                        </span>

                    </p>
                    <p class="box-line">
                        <span class="leftBlock">
                            <span id="Label2" class="form-label">Password</span>
                        </span><span class="rightBlock">
                            <input name="TextBox2" type="text" id="TextBox2" class="form-input-200" />
                        </span>
                    </p>
                    <p class="box-line">
                        <span class="rightBlock">
                            <a id="lnkRetrievePassword" class="form-link" href="javascript:__doPostBack('lnkRetrievePassword','')">I have forgotten my password</a>
                        </span>
                    </p>
                    <p class="box-line">
                        <span class="buttonsBlock">
                            <a id="btnCancel" class="white-button" href="javascript:__doPostBack('btnCancel','')" style="display:inline-block;"><span><span style="width:85px;">Cancel</span></span></a>

                            <a id="btnConnect" class="orange-button" href="javascript:__doPostBack('btnConnect','')" style="display:inline-block;"><span><span style="width:85px;">Connect</span></span></a>
                        </span>
                    </p>
                </div>
            </div>
        </div>


Et les styles associés :

div.loginBox
{
	width: 350px;
	margin-right: auto;
	margin-left: auto;
}
div.shadowedBox
{
	width: 100%;
}
div.shadowedBox-content
{
	text-align:left;
	background-image: url(images/bg-shadow.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
}
p.box-line
{
	margin: 0px 10px;
	overflow: hidden;
	height: 1.5em;
	vertical-align: middle;
	line-height: 1.5em;
}
span.centerBlock
{
	display: block;
	text-align: center;
}
span.leftBlock
{
	float: left;
	width: 28%;
	text-align: right;
}
span.rightBlock
{
	display: block;
	margin-left: 30%;
}
span.buttonsBlock
{
	display: block;
	text-align: right;
}
a.orange-button { 
    display: -moz-inline-box; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    font: 700 11px/1.5em Verdana, Arial, Helvetica, sans-serif; 
    color: #FFFFFF;
    white-space: nowrap; 
    text-align: center; 
    vertical-align: middle; 
    cursor: pointer; 
    border: 0; 
    background: none; 
    text-decoration: none;
} 
a.orange-button span
{ 
	height: 24px;
	line-height: 2em;
    float: left; 
    padding: 0 0 0 15px; 
    vertical-align: middle; 
    background: url(images/button/left-orange.gif) left top no-repeat; 
} 
a.orange-button span span 
{ 
    padding: 0 15px 0 0; 
    background: url(images/button/right-orange.gif) right top no-repeat; 
}
 a.white-button { 
    display: -moz-inline-box; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    font: 700 11px/1.5em Verdana, Arial, Helvetica, sans-serif; 
    color: #686A6C;
    white-space: nowrap; 
    text-align: center; 
    vertical-align: middle; 
    cursor: pointer; 
    border: 0; 
    background: none; 
    text-decoration: none;
} 
a.white-button span
{
	height: 24px;
	line-height: 2em;
    float: left; 
    padding: 0 0 0 15px; 
    vertical-align: middle; 
    background: url(images/button/left-white.gif) left top no-repeat; 
} 
a.white-button span span 
{ 
    padding: 0 15px 0 0; 
    background: url(images/button/right-white.gif) right top no-repeat; 
}
span.title { 
    display: -moz-inline-box; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    font: 700 11px/1.5em Verdana, Arial, Helvetica, sans-serif; 
    color: #FFFFFF;
    white-space: nowrap; 
    text-align: left; 
    vertical-align: middle; 
    cursor: pointer; 
    border: 0; 
    background: none; 
    text-decoration: none;
} 
span.title span
{ 
	height: 22px;
	line-height: 2em;
    float: left;
    margin: 0; 
    vertical-align: middle; 
    background: url(images/form-top-left.gif) left top no-repeat;
} 
span.title span span 
{
    margin: 0 0 0 18px; 
    background: url(images/form-top-right.gif) right top no-repeat;
}


Merci encore pour le coup de main et n'hésitez pas si vous avez des remarques !

PS : pour le centrage du div, j'avais juste placé le "margin: auto" sur le mauvais div... Smiley biggol
Sujet clos
Aller à