Afficher 2 fieldset côte à côte.

[Mr-Blonde]

Bonjour tout le monde !

Voila voila, je suis en train de programmer mon jeu (sur la base de PHPore, qui sera lui aussi distribué librement mais comme un MMORPG complet.) mais je reste débutant.
Voila ce que je voudrait faire, afficher 2 fieldset côte à côte, vous savez les fieldset c'est ça.
La seule chose que j'arrive à faire pour le moment, c'est afficher des Fieldset les unes sur les autres mais pas côte à côte.

Merci et bonne continuation

[jo_link_noir]

il faut leur donner une taille pour qu'ils ne prennent pas toute la largeur du cadre et mettre un float sur un des fieldset

Code PHP :

<?php 

<FORM method="post" action="..." >

    <FIELDSET class="gauche">

        <LEGEND> Informations personnelles </LEGEND>

        Nom : <INPUT name="nom" type="text"><br />

    </FIELDSET>

    <FIELDSET>

        <LEGEND> Informations personnelles </LEGEND>

        Nom : <INPUT name="nom" type="text"><br />

    </FIELDSET>

</FORM> 

[Mr-Blonde]

C'est parfait ! Merci beaucoup
Si j'ai d'autre problèmes j'éditerai mon post !

[Sephi-Chan]

Un petit ajout si tu veux profiter de l'extensibilité. Tu peux donner à div.fieldsetContainer la largeur que tu veux (que ce soit en pixel, cm, em, % ou n'importe quelle autre unité) et tes fieldset auront ainsi une taille relative.

De plus, il faut rajouter un spacer pour que l'on puisse mettre d'autres blocs en dessous.

CSS :

Code :

.fieldsetContainer {
    width : 700px;
}    

.fieldsetContainer fieldset {
    width : 50%;
    border : none;
    text-align : justify;
    padding : 20px;
}

.fieldsetContainer fieldset.left {
    float : left;
}

.fieldsetContainer .spacer {
    clear : both;
    margin : 0;
    padding : 0;
}

HTML :

Code PHP :

<?php 

<div class="fieldsetContainer">



    <fieldset class="left">

    

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

        <p>Mauris at leo interdum magna euismod malesuada. Vivamus vitae mauris a risus dignissim imperdiet. </p>

    

    </fieldset>

    

    <fieldset>

    

        <p>Nam sollicitudin mollis ante. In sed nisi. In lectus enim, pretium vitae, aliquet at, tempus in, odio.</p>

        

    </fieldset>

    <p class="spacer" />

    

</div> 

[Mr-Blonde]

Bonjour tout le monde !

Me voila avec un nouveau problème, mais comme une image vaut mieux qu'un long discours :

Comme vous le voyez les 3 fieldsets ne sont pas alignés à la même hauteur et ce n'est pas vraiment jolie.
J'ai essayé de faire un padding-top mais ça ne repositionne pas le filedset mais son contenu.
Savez-vous comment faire ?

Merci et bonne fin de journée !

[Eluox]

Ton code serait utile

[Sephi-Chan]

Avec le code que j'ai donné précédemment (qui n'est qu'une amélioration du code précédemment donné), il suffit de donner la classe left à tous les blocs, sauf celui qui sera le plus à droite.

Il faut également penser à régler la largeur des fieldset pour arriver à un total de 100% en additionnant leur largeur respective.


Sephi-Chan

[Mr-Blonde]

EDIT : J'avais pas fais attention à ton post, je vais regarder ça...

RE-EDIT : Comme je le disais je suis débutant et je NE PIGE RIEN DU TOUT à ton code, tu pourrais détailler un peu tout ça s'il te plait ?

Merci et bonne fin de journée...

[jo_link_noir]

sur le site du zéro il y les propriétés CSS les plus utiliser et des tutos pour faire un site web, si tu ne connais pas, je te conseil de regarder : http://www.siteduzero.com

et si tu veux connaître d'avantage de propriétés CSS, c'est ici.

bonne nuit

[Mr-Blonde]

Salut tout le monde,

Je profite de ce topic pour savoir si vous pouviez me dépanner, je voudrais supprimer l'effet 3D à 2 francs des bordures de mon fieldset et lui donner des bordures rouge en tirets.
J'ai essayé de faire ça en CSS :

Code :

.gauche{
float: left;
border-style: dashed;
}

Mais ça ne donne rien du tout !

Si vous pouviez m'aider, merci