JeuWeb - Crée ton jeu par navigateur
[Résolu][CSS] Positionnement de blocs - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu][CSS] Positionnement de blocs (/showthread.php?tid=2665)

[Résolu][CSS] Positionnement de blocs - Mr-Blonde - 08-06-2008

Bonjour à tous !

Tout d'abord je vous soumet cette screen de mon MMORPG :
[Image: hailpemiwi4.png]

Vous pouvez voir dessus 3 modules :
-Dojo : La carte
-Mr-Blonde : Les stats de persos
-Votre Messagerie : La messagerie en construction.

Je voudrais placer le module "Votre Messagerie" sous le module "Mr-Blonde", voici les CSS que j'utilise pour :
-Les Modules Mr-Blonde et Dojo :
Citation :.gauche{
float: left;
border : 1px solid #7297d8;
}
-Le Module Votre Messagerie :
Citation :.messagerie{
float: left;
border : 1px solid #7297d8;
margin-top : 135px
}

Et le code de la page en question :
Code :
<fieldset class="gauche" style="width:{MAP_WIDTH}px;height:{MAP_HEIGHT10}px;">
  <legend><b>{MAP_NAME}</b></legend>

   <div id="global_map">

    <div style="position:relative;left:0px;top:0px;background-image:url({MAP_BACKGROUND});width:{MAP_WIDTH}px;height:{MAP_HEIGHT}px">

     <div id="message"></div>

     <div id="map_loader">

      <div id="map_loading" style="width:{MAP_WIDTH}px;height:{MAP_HEIGHT}px;"><br /><i>{L_MAP_LOADING}</i></div>

     </div>

     <div id="lower_bloc"></div>

     <div id="upper_bloc"></div>

     <div id="event_bloc"></div>

     <div id="player_bloc"></div>

     <div id="action_bloc"></div>

     <div id="action_bloc_cursor"></div>

    </div>

   </div>
   </fieldset>
   <fieldset class="gauche" style="height:105px">
   <legend><b>{USER_NAME}</b></legend>
    <div style="width:{CHAR_WIDTH}px;height:{CHAR_HEIGHT}px;background-image:url(images/charasets/{CHARASET})"></div>
   <br>{L_HAD_MONEY} <b>{MONEY}</b> {L_SORT_MONEY}
   </fieldset>
<fieldset class="messagerie">
   <legend><b>{L_PAGE_MESS}</b></legend>
    <div style="width:{CHAR_WIDTH}px;height:{CHAR_HEIGHT}px;background-image:url(images/charasets/{CHARASET})"></div>
   <br>{L_HAD_MONEY} <b>{MONEY}</b> {L_SORT_MONEY}
   </fieldset>

Je tiens à préciser que tout ça doit être programmé comme un gros sale pour la simple et bonne raison que je suis novice :p

J'ai essayé tout pleins de systèmes (comme programmer comme un gros sale) mais je n'arrive pas au résultat recherché !

Merci d'avance et bonne fin de journée !

RE: [CSS]Placement de modules. - Psykose - 08-06-2008

Solution #1 : Pour le div dont le nom est MrBlonde sur la screen (la flemme de chercher son nom en css xD ) appliques la propriété display : block; et si il a un float enleve le lui.

Solution #2 : Crée un fieldset global pour gauche puis crée un div de la largeur de ton fieldset et met le div ou il y a marqué Mr Blonde dedans.

RE: [CSS]Placement de modules. - Shakkah - 08-06-2008

Le plus simple tu fais une div globale contenant les stats du perso et la messagerie.

En gros 2 div principale , puis la div de gauche rediviser en 2.

RE: [CSS]Placement de modules. - zneman - 09-06-2008

Shakkah a écrit :Le plus simple tu fais une div globale contenant les stats du perso et la messagerie.

En gros 2 div principale , puis la div de gauche rediviser en 2.

Idem, ça ne tiendrais qu'à moi, je ferrais un div contenant tout Smile

RE: [CSS]Placement de modules. - Psykose - 09-06-2008

Si ça ne tenait qu'a moi je n'aurais même pas fais de fieldset xD

RE: [CSS]Placement de modules. - Mr-Blonde - 10-06-2008

Merci Shakkah ça marche parfaitement Wink
J'avais pas trouvé la solution, faut dire que je suis pas super débrouillard en CSS :p