JeuWeb Créez votre jeu par navigateur !

Gabriel · (Modification du message : 02-03-2010, 07:23 PM par Sephi-Chan.)

Bonjour à tous.
J'ai un pb avec la mise en page des pages de mon jeu. J'ai localisé d'où venait le problème sauf que je ne comprends pas pourquoi ça ne marche pas ( c'est un simple "float:left" qui fait ch***)

Voici mon code css :

Code :
body

{

background-color:black;  

}

#corps_de_la_page

{

background-image: url("images/img_fond.png");

width: 820px; 

margin: auto;

margin-top: 10px; 

margin-bottom: 20px;

color: blue;

}

#centre

{

float: left;

width: 550px;

}

Si je retire le float:left contenu dans #centre ça marche par contre je perds la floataison à gauche (logique me direz vous )

Dans l'image ci dessous j'ai laissé le code css normal comme je vous l'ai présenté au dessus. Les blocs/fieldset sont correctement organisé par contre on remarque que le background ne dépasse pas la bannière...
http://upload.jeuweb.org/voir-491

Dans la 2ème image en enlevant le fameux "float:left"
Le background s'affiche bien mais je perd la disposition des fieldset :
http://upload.jeuweb.org/voir-492

Si vous voulez je pourrais aussi vous rajouter mon code html/php mais je doute que le pb vienne de là....

Merci d'avance pour votre aide !

Holy · 08-05-2009, 04:10 PM

Perso j'arrive pas à voir les images ^^'

Il nous faudrait le code HTML également vu que ça dépend pas mal de la structure en question. Ou au moins une structure schématique.

Gabriel · (Modification du message : 08-05-2009, 04:13 PM par Gabriel.)

voila ce doit etre bon pour les images

pour le html, je le posterais ce soir la je n'ai pas le temps !

Ruz · (Modification du message : 08-05-2009, 04:31 PM par Ruz.)

position: relative/absolute
pourrait t'aider, histoire de positionner les divs les uns par rapport aux autres... Mais effectivement, sans le code HTML, impossible de bcp t'aider ^^

Gabriel · 08-05-2009, 04:36 PM

J'ai eu un peu de temps en fait donc voila le code (dans sa structure gloabale) J'ai vérifié mes include et toutes les balises qu'ils contiennent sont bien fermées !

Code :
<?php

session_start();

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

    <head>

         <title>Universe-Quest</title>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

         <?php include("meta.php"); ?>

         <link rel="stylesheet" media="screen" type="text/css" title="Design" href="skin_joueur.css" />

    </head>

    <body>

<div id="body">

    <div id="en_tete">

    <img src="images/header2.PNG" alt="banniere du site" />    

    </div>

<?php

include("choix_sur_la_carte.php");

include("menu-gauche.php");

?>

<div id = "centre">

<?php

include("gestion_ressources.php");

///////////////////////////////////////////////////////////////////////////////////////////////////

 <fieldset>

<legend>Carte</legend>

<?php

 include("affichage_carte.php");

 ?>

<div id = "deplacements"> <!-- gestion des déplacements -->

 <img src="images/rose.png" usemap="#boussole" alt="" style="border:none;"/>

        <map name="boussole">

            <area shape="rect" coords="40,1,58,37" href="?nord=1&amp;est=0&amp;ouest=0&amp;sud=0" title="nord"/>

            <area shape="rect" coords="60,39,99,58" href="?est=1&amp;nord=0&amp;ouest=0&amp;sud=0" title="est"/>

            <area shape="rect" coords="0,38,39,56" href="?ouest=1&amp;est=0&amp;nord=0&amp;sud=0" title="ouest"/>

            <area shape="rect" coords="41,58,57,99" href="?sud=1&amp;est=0&amp;ouest=0&amp;nord=0" title="sud"/>

        </map>

</div> <!-- fin du div de déplacement -->

</fieldset> <!--fin de la carte-->

<fieldset>

<legend>Tchat général</legend>

<?php

include("chat.php");

?>

</fieldset>

</div> <!--fin du menu central-->

<?php

include("colone-droite.php");

?>

<?php

mysql_close();

?>

</div>

    </body>

</html>

Merci pour votre aide !

wild-D · 08-05-2009, 05:08 PM

pour une fois, c'était le code html qui était demandé (et non ton code source).
donc faut affiché le source de ta page html (une fois générée ) dans le navigateur Wink

a priori je suppose que ton code marche sous IE7, mais pas sous FF3 ^^

si tu fais un "flottant" (float); sans clear, par défaut ff ne prend pas en compte le flottant pour le calcul de la taille du conteneur; fait

- un clear. (soit avec un div clear:both ;au "pied" de ton conteneur parent ou en utilisant la pseudo-class after: )

- ou astuce: en fixant width et overflow:auto; pour le conteneur parent.

Gabriel · 08-05-2009, 09:10 PM

Effectivement ça marche avec IE. Je n'avais pas remarqué car je ne teste qu'avec FF et opéra (en général quand ça marche pas avec FF, ça marche pas avec IE ^^)

Peut tu expliquer plus comment procédé pour l'utilisation d'un clear. Je ne sais pas comment l'utiliser.

J'ai résolu partiellement le problème grâce à un

Code :
div

{

display:table;       /* pour ff */

display:inline-block;/* pour IE , opera  ... */

}

Sauf que maintenant,

Ruz · (Modification du message : 08-05-2009, 11:46 PM par Ruz.)

manquerait pas un bout à la fin de la phrase?

Gabriel · 09-05-2009, 12:40 AM

Si effectivement la phrase était donc :
sauf que maintenant toute les divs sont sur la gauche de l'écran alors qu'avant c'était bien centré avec le margin:auto.

wild-D · 09-05-2009, 08:02 AM

ben en même temps si tu change les règles de display de tous tes divs; c'est pas trop étonnant Big Grin

(en plus si je dis pas de connerie; si FF2 ne supportait pas les inline-block; FF3 si; donc ton "hack" je crois pas qu'il fait ce que tu veux). Je serais toi, sauf hack déséspéré; je m'écarterais pas trop du triptique de base display:block/none/inline qui sont les seuls supportés de manière assez uniforme sur tous les navigateurs.

et pour faire court



<div class="classparent">

<div class="classfloat">blabla</div>

<div class="classclear" />

</div>

et pour le clear la base c'est un



.classclear {

clear:both;

}

je suis plus sûr mais me semble que y a quelque subtilité si tu veux vraiment être compatible tous tous navigateurs; je sais plus si c'est IE mac qui aime pas les div vide; donc faut fixer une hauteur sur classclear ou un autre "hack"....