JeuWeb - Crée ton jeu par navigateur
CSS et div ... - 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 : CSS et div ... (/showthread.php?tid=4118)

CSS et div ... - phenix - 20-06-2009

Bonjour à tous,

suite a quelques problème d'agencement de page j'ai décidé de changer la façon dont mes div ce place pour formé le désign de mon site.
Je pense la conversion facile, grave erreur, sa fait 2 heures que je bosse sans avancer d'un pouce :pleure2:

Je vous passe les détails des pages, voici l'essentiel:



/* Tableau de gauche */

.table_gauche

	{

		width: 169px;

		height: 100%;

		background: #131313;

		float: left;

		/*padding-left: 23px;

		padding-right: 23px;*/

		margin: 0 auto;

		text-align: center;

	}

.gauche

	{

		background: #131313 url(image/gauche.jpg) left repeat-y;

		width: 100%;

		height: 100%;

	}

.Xgauche

	{

		background: #131313 url(image/Xgauche.jpg) right repeat-y;

		width: 100%;

		height: 100%;

	}

/* Fin tableau de gauche */	



/* Tableau du centre */

.table_center

	{

		width: 582px;

		min-height: 614px;

		background: #131313;

		float: left;

	}

/* Fin tableau du centre */



/* Tableau de droite*/

.table_droite

	{

		width: 204px;

		height: 100%;

		background: #131313;

		float: left;

		/*padding-left: 23px;

		padding-right: 23px;*/

	}

.droite

	{

		background: #131313 url(image/droite.jpg) left repeat-y;

		width: 100%;

		height: 100%;

	}

.Xdroite

	{

		background: #131313 url(image/Xdroite.jpg) right repeat-y;

		width: 100%;

		height: 100%;

	}

/* Fin tableau de droite*/

Le xHTML en lui même:



<div class="main_table">

<!-- Header -->

<div class="headerXgauche"></div>



<div class="rose">

	<!-- Lien de la rose -->



	<div class="acceuil">

		<a href="index.php">

			<img src="valme/design/image/acceuil.jpg" alt="acceuil" class="HoverFade" />

		</a>

	</div>

	<div class="forum">

		<a href="#">

			<img src="valme/design/image/forum.jpg" alt="forum" class="HoverFade" />

		</a>



	</div>

	<div class="tutoriel">

		<a href="tutoriel.php" class="Ajax">

			<img src="valme/design/image/tutoriel.jpg" alt="tutoriel" class="HoverFade" />

		</a>

	</div>

	<div class="background">

		<a href="backg.php" class="Ajax">

			<img src="valme/design/image/background.jpg" alt="background" class="HoverFade" />



		</a>

	</div>

	<!-- Fin des liens de la rose -->

</div>



<div class="ange">

	<img src="valme/design/image/ange.jpg" alt="La vallée des Larmes" class="HoverFade" />

</div>



<div class="tombe">

	<!-- Lien de la tombe -->

	<div class="lacharte">



		<a href="charte.php" class="Ajax">

			<img src="valme/design/image/lacharte.jpg" alt="la charte" class="HoverFade" />

		</a>

	</div>

	<div class="classement">

		<a href="classement.php" class="Ajax">

			<img src="valme/design/image/classement.jpg" alt="classement" class="HoverFade" />

		</a>

	</div>



	<div class="screenshot">

		<a href="screenshot.php" class="Ajax">

			<img src="valme/design/image/screenshot.jpg" alt="screenshot" class="HoverFade" />

		</a>

	</div>

	<!-- Fin des liens de la tombe -->

</div>

<div class="headerXdroite"></div>

<!-- Fin Header -->



<!-- Tableau de gauche -->



<div class="table_gauche">

<div class="Xgauche">

<div class="gauche">

<h3>Connexion:</h3>

<form method="post" action="valme/index.php">

<br /><label>Pseudo: <input type="text" name="pseudo" class="login_input" /></label>

<label>Password: <input type="password" name="pass" class="login_input" /></label>

<br /><input type="submit" value="login" />

</form>

</div>

</div>

</div>

<!-- Fin tableau de gauche -->



	<div class="table_center">

            contenu

	</div>

<!-- fin tableau du centre -->



<!-- tableau de droite -->

<div class="table_droite">

<div class="Xdroite">

<div class="droite">

</div>

</div>

</div>

<!-- Fin tableau de droite -->



<!-- Footer -->

<div class="footer"></div>



</div>

Petit screenshot du résultat :toilette:

[Image: badiv.png]

(J'ai volontairement enlever certaine partie des page pour plus de lisibilité dans le code)

Il va de soi que ce n'est pas normal, les colonne il y a des background qui ne ce prolonge pas a 100%, les div n'ont la bonne taille etc...

Je comprend plus rien... :cogne:

Si quelqu'un sais pourquoi sa s'affiche mal, je serais heureux de le savoir :heuuu:

Merci d'avance

RE: CSS et div ... - wild-D - 21-06-2009

si tu veux 3 colonnes en 100% (hauteur),largeur fixe; j'avais fait un design exemple pour globe: http://wild-diplomacy.com/jeuweb/globe/

p.s.
donne le code complet (pour du xhtml simplement la page en ligne c'est l'idéal). Parce que selon les navigateurs y a de gentilles et subtiles différences selon le mode xhtml (si tu mets ou pas la déclaration xml). On gagne rien à avoir que le bout dans le body.

RE: CSS et div ... - phenix - 21-06-2009

Citation :si tu veux 3 colonnes en 100% (hauteur),largeur fixe;

Oui :ninga:
Citation :p.s.
donne le code complet (pour du xhtml simplement la page en ligne c'est l'idéal). Parce que selon les navigateurs y a de gentilles et subtiles différences selon le mode xhtml (si tu mets ou pas la déclaration xml). On gagne rien à avoir que le bout dans le body.

Elle est pas en ligne, je te la met ici:



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





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

<head>

	<title>..::La Vallée des larmes::..</title>

	<meta name="description" content="La Vallée des Larmes, MMORPG gratuit ::Version LOKI:: Jeu par navigateur" />

	<meta name="keywords" content="Vallée, vallee, larmes, irae, mmorpg, MMORPG, navigateur, MMWBRPG, mmwbrpg, jeu, role, rôle, jeu de role, jeu de rôle, online, Larmes, larme, Irae, gratuit, jeu gratuit, JdR, pbem, jpem, monstre, trésor, sortilège, sort, armure, arme, aventure, simulation, asynchrone" />

	<meta name="robots" content="index" />

	<meta name="REVISIT-AFTER" content="7 days" />

	<meta name="author" content="Phenix" />



	<meta name="Copyright" content="Phenix" />

	<meta name="Publisher" content="Phenix" />

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

	<meta http-equiv="Content-Language" content="fr" />

	

	<link href="valme/design/vallee.css" rel="stylesheet" type="text/css" />



<!-- jQuery -->

<script type="text/javascript" src="valme/design/javascript/jquery.js"></script>



<!-- jQuery Alert -->

<script type="text/javascript" src="valme/design/javascript/jquery.alerts.js"></script>



<!-- ValmeQuery -->

<script type="text/javascript" src="valme/design/javascript/valmequery.js"></script>



<!-- valmetips -->

<script type="text/javascript" src="valme/design/javascript/jquery.valmetips.js"></script>



<!-- ValmeBox -->

<script type="text/javascript" src="valme/design/javascript/jquery.valmebox.js"></script>



<!-- Overlib à la sauce valme -->

<script type="text/javascript" src="valme/design/javascript/overvalme.js"></script>

</head>



<body>



<!-- Si le javascript n'est pas activé, on demande de l'activer -->

<noscript>Il est impossible de visualiser ce site sans le javascript.</noscript>



<!-- Div de l'infobulle -->

<div id="tips"></div>  

<!-- Div du popup -->

<div id="popup"></div>  





<div class="main_table">

<!-- Header -->

<div class="headerXgauche"></div>



<div class="rose">

	<!-- Lien de la rose -->



	<div class="acceuil">

		<a href="index.php">

			<img src="valme/design/image/acceuil.jpg" alt="acceuil" class="HoverFade" />

		</a>

	</div>

	<div class="forum">

		<a href="#">

			<img src="valme/design/image/forum.jpg" alt="forum" class="HoverFade" />

		</a>



	</div>

	<div class="tutoriel">

		<a href="tutoriel.php" class="Ajax">

			<img src="valme/design/image/tutoriel.jpg" alt="tutoriel" class="HoverFade" />

		</a>

	</div>

	<div class="background">

		<a href="backg.php" class="Ajax">

			<img src="valme/design/image/background.jpg" alt="background" class="HoverFade" />



		</a>

	</div>

	<!-- Fin des liens de la rose -->

</div>



<div class="ange">

	<img src="valme/design/image/ange.jpg" alt="La vallée des Larmes" class="HoverFade" />

</div>



<div class="tombe">

	<!-- Lien de la tombe -->

	<div class="lacharte">



		<a href="charte.php" class="Ajax">

			<img src="valme/design/image/lacharte.jpg" alt="la charte" class="HoverFade" />

		</a>

	</div>

	<div class="classement">

		<a href="classement.php" class="Ajax">

			<img src="valme/design/image/classement.jpg" alt="classement" class="HoverFade" />

		</a>

	</div>



	<div class="screenshot">

		<a href="screenshot.php" class="Ajax">

			<img src="valme/design/image/screenshot.jpg" alt="screenshot" class="HoverFade" />

		</a>

	</div>

	<!-- Fin des liens de la tombe -->

</div>

<div class="headerXdroite"></div>

<!-- Fin Header -->



<!-- Tableau de gauche -->



<div class="table_gauche">

<div class="Xgauche">

<div class="gauche">

<h3>Connexion:</h3>

<form method="post" action="valme/index.php">

<br /><label>Pseudo: <input type="text" name="pseudo" class="login_input" /></label>

<label>Password: <input type="password" name="pass" class="login_input" /></label>

<br /><input type="submit" value="login" />

</form>

</div>

</div>

</div>

<!-- Fin tableau de gauche -->



	<div class="table_center">

<br />

<div class="bouton"><a href="index.php?page=2"><img src="valme/design/suivant.gif" alt="suivant" /></a></div>				

		<div class="news">

			<div class="news_gauche">

			<div class="news_droite">

			<div class="news_haut">

			<div class="news_bas">

	

			<div class="news_content">

			<h2>Pertes</h2>



			<h5><i>Auteur: phenix. Ecrite le 24/04/2009</i></h5>

			Bonjour à tous,<br />

<br />

Voila, je dois vous dire un truc: je suis un gros boulet, j'ai perdu toutes les mise à jour des descriptions en mettant à jour mon système... Tout est à recommencer...<br />

<br />

Je vais faire au plus vite !<br />

<br />

Désolé,<br />

<br />

phenix

			<br />



			<br />

			

			</div>

	

			</div>

			</div>

			</div>

			</div>

		</div><br />				

		<div class="news">

			<div class="news_gauche">



			<div class="news_droite">

			<div class="news_haut">

			<div class="news_bas">

	

			<div class="news_content">

			<h2>Quelques modif</h2>

			<h5><i>Auteur: phenix. Ecrite le 16/04/2009</i></h5>

			Bonjour à tous,<br />



<br />

Voici quelques modification qui m'ont été demander:<br />

<br />

- Les nouvelles inscription bénéficie de l'effet "lvl 20 pour tous".<br />

- Les personnages niveau 20 ne gagne plus d'expérience.<br />

- Les personnages qui ce réincarne gagne 20 fragments psychiques.<br />

<br />

Voila, je remercie tout le monde pour sa participation a l'équilibrage, sa avance bien plus vite que prévu  <img src="../CB/smileys/clindoeil.gif" alt="Wink" /><br />

<br />

Phenix

			<br />

			<br />



			

			</div>

	

			</div>

			</div>

			</div>

			</div>

		</div><br />				

		<div class="news">

			<div class="news_gauche">

			<div class="news_droite">



			<div class="news_haut">

			<div class="news_bas">

	

			<div class="news_content">

			<h2>2 tuto</h2>

			<h5><i>Auteur: phenix. Ecrite le 13/04/2009</i></h5>

			Bonjour à tous,<br />

<br />

J'ai mit en ligne 2 tutoriels en plus:<br />



<br />

- Les sorts.<br />

- Les types de dégâts.<br />

<br />

Bon jeu à tous,<br />

<br />

Phenix

			<br />

			<br />

			

			</div>

	

			</div>



			</div>

			</div>

			</div>

		</div><br /><br />

<br />

Partenaire:

<br />

<a href="http://www.epic-war.net/" target="_blank"><img src="http://www.epic-war.net/test/epic.gif" alt="epic-war" /></a>

<br />

<br />

		</div>

<!-- fin tableau du centre -->



<!-- tableau de droite -->

<div class="table_droite">

<div class="Xdroite">

<div class="droite">

</div>

</div>

</div>

<!-- Fin tableau de droite -->



<!-- Footer -->

<div class="footer"></div>



</div>



</body>

</html>


J'ai un peu regarder ta page, mais j'ai besoin d'explication, je comprend pas grand chose :wow2:

Merci de ton attention Wink

RE: CSS et div ... - My Hotel - 21-06-2009

@Phenix, je suis une buse en CSS, donc aucune idée pour toi, par contre, j'aimerais bien savoir quel thème tu utilises pour firefox Smile

RE: CSS et div ... - phenix - 21-06-2009

Citation :@Phenix, je suis une buse en CSS, donc aucune idée pour toi, par contre, j'aimerais bien savoir quel thème tu utilises pour firefox 2

C'est le thème Dust du bureau Gnome (Ubuntu linux). C'est pas un thème firefox Smile.

RE: CSS et div ... - MdE - 21-06-2009

Tout d'abord, un petit truc m'étonne. Alors peut-être que je n'ai pas vu la subtilé mais tu as des colonnes de gauche et de droite en largeur fixe mais tu sépares le background de gauche et celui de droite. Comme la largeur est fixe, tu pourrais faire un seul backgroud et ça s'implifierai un peu déjà.

Puis il te faut un div pour englober les 3 colonnes comme ça, les width:100% prendront la taille de la colonne la plus grande et fait comme ça ça devrait aller.

Dis-moi si tu comprends pas.

RE: CSS et div ... - phenix - 21-06-2009

Citation :Tout d'abord, un petit truc m'étonne. Alors peut-être que je n'ai pas vu la subtilé mais tu as des colonnes de gauche et de droite en largeur fixe mais tu sépares le background de gauche et celui de droite. Comme la largeur est fixe, tu pourrais faire un seul backgroud et ça s'implifierai un peu déjà.

En effet, j'économiserais une div Smile. J'avais pas pensé.
Citation :Puis il te faut un div pour englober les 3 colonnes comme ça, les width:100% prendront la taille de la colonne la plus grande et fait comme ça ça devrait aller.

Ce n'est pas la largeur qui pose problème (même si sur le screen sa en a l'aire) mais la hauteur :heuuu:

RE: CSS et div ... - MdE - 21-06-2009

Ah mais j'ai bien compris que c t la hauteur, c'est vrai que j'ai fait une erreur en écrivant width:100%; je parlais des height ^^ c'est pour ça qu'il faut un div pour englober les 3 colonnes pour ne pas que la background de la colonne de gauche s'arrête où s'arrête le texte à l'intérieur. Il s'arrêtera tout en bas.

RE: CSS et div ... - wild-D - 21-06-2009

(21-06-2009, 01:24 PM)phenix a écrit : Ce n'est pas la largeur qui pose problème (même si sur le screen sa en a l'aire) mais la hauteur :heuuu:

c'est à cause de height:100% (faudrait retrouver le topic où on en causait; comment le faire avec des div float et non plus une table).
trouvé: la source du problème, déjà abordée:
http://www.jeuweb.org/board/-resolu-probleme-css-t-5557.html#pid69677

avec float (ben oui c'est généralement la solution retenue pour faire des colonne div) y a un soucis. les objets flotant sont pas systématiquement pris e compte pour le dimensionnement du conteneur... alors height :100% marche pas comme attendu Tongue

- donc soit faut faire mumuse avec javascript.
- soit utiliser la méthode clear (comme mon exemple);
- là 3e méthode abordée... une méthode de chacal (qui force normalement le navigateur à calculer le layout de ce que j'ai plus ou moins capté ce qui permet au height:100% d'être correctement interprété) en fixant width et overflow:auto; pour le conteneur parent.


- sinon une qui me semble avait pas été dite (parce que finalement ça revient à utiliser la bonne vielle méthode des tables, c'est display:table-cell).


---

pour le design du lien que je t'es fourni en exemple;
le principe est simple;

- t'as un div conteneur;

-3 divs "colonnes" (flaottant);

-et un 4e div qui est dans le conteneur; après les 3 colones; qui force le redimensionnement du conteneur avec un "clear:both".

et tu utilise le background du conteneur pour "dessiner" le décor des 3 colonne.

c'est un peu à l'arache comme explication; mais c'est le principe.

RE: CSS et div ... - phenix - 21-06-2009

Citation :et tu utilise le background du conteneur pour "dessiner" le décor des 3 colonne.

c'est un peu à l'arache comme explication; mais c'est le principe.

C'est le principe des colonnes factice non ?
Soit, j'ai mal comprit, soit c'est inappropriée puisque chacune de mes pages a une hauteur différente :mauvais:

Je regarde le sujet que tu ma donnée, seulement, avec display: table-cell.

Je comprend rien a la méthode "clear". Il y a un clear: left; sur ma div footer, mais que je le mette ou pas en change rien...

Merci de votre aide