JeuWeb - Crée ton jeu par navigateur - Afficher 2 fieldset côte à côte.

Pages : 1 2

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

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 :

<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> 

et le code css pour la mise en forme

Citation :fieldset{
width:250px;
}
.gauche{
float:left;
}

C'est parfait ! Merci beaucoup

Si j'ai d'autre problèmes j'éditerai mon post !

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 :

<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>

Sephi-Chan

Bonjour tout le monde !

Me voila avec un nouveau problème, mais comme une image vaut mieux qu'un long discours :
[Image: screenby2.png]

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 !

Ton code serait utile

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

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...

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

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

Pages : 1 2

JeuWeb - Crée ton jeu par navigateur

Mr-Blonde

jo_link_noir

Mr-Blonde

Sephi-Chan

Mr-Blonde

Eluox

Sephi-Chan

Mr-Blonde

jo_link_noir

Mr-Blonde