+- 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 : Problème CSS (/showthread.php?tid=3952)
Pages :
1
2
Problème CSS - Gabriel - 08-05-2009
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 !
RE: problème css - Holy - 08-05-2009
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.
RE: problème css - Gabriel - 08-05-2009
voila ce doit etre bon pour les images
pour le html, je le posterais ce soir la je n'ai pas le temps !
RE: problème css - Ruz - 08-05-2009
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 ^^
RE: problème css - Gabriel - 08-05-2009
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&est=0&ouest=0&sud=0" title="nord"/>
<area shape="rect" coords="60,39,99,58" href="?est=1&nord=0&ouest=0&sud=0" title="est"/>
<area shape="rect" coords="0,38,39,56" href="?ouest=1&est=0&nord=0&sud=0" title="ouest"/>
<area shape="rect" coords="41,58,57,99" href="?sud=1&est=0&ouest=0&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 !
RE: problème css - wild-D - 08-05-2009
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
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.
RE: problème css - Gabriel - 08-05-2009
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 ... */
}RE: problème css - Ruz - 08-05-2009
manquerait pas un bout à la fin de la phrase?
RE: problème css - Gabriel - 09-05-2009
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.
RE: problème css - wild-D - 09-05-2009
ben en même temps si tu change les règles de display de tous tes divs; c'est pas trop étonnant
(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"....