Codage

Signaler
Messages postés
5
Date d'inscription
mardi 20 novembre 2018
Statut
Membre
Dernière intervention
8 février 2020
-
kymer_officiel
Messages postés
5
Date d'inscription
mardi 20 novembre 2018
Statut
Membre
Dernière intervention
8 février 2020
-
bonsoir,
j'ai un problème avec mon code.
je suis entrain de crée un site web, c'est un devoir, et j'ai rencontrer un problème.
j'ai insérer dans toutes mes pages un sommaire en menue burger, et dans une de mes page il y a le jeu "morpion" et il est coller a mon menu, et je n'arrive pas a le défaire. pourriez-vous m'aider s'il vous plait.

cordialement kymer
A voir également:

4 réponses

Messages postés
13760
Date d'inscription
dimanche 10 janvier 2016
Statut
Modérateur
Dernière intervention
16 février 2020
2 760
Messages postés
27576
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 février 2020
2 111
Bonjour,

Donc tu veux espacer ton morpion du menu ?
As tu essayé de mettre du MARGIN ou du PADDING ?
Ce sont des propriétés CSS qui te permettront de positionner tes éléments.

Quoi qu'il en soit, sans voir ton code.. IMPOSSIBLE pour nous de t'aider d'avantage.

NB: Pour poster ton code sur le forum, tu devras utiliser les BALISES DE CODE.
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

.

Messages postés
5
Date d'inscription
mardi 20 novembre 2018
Statut
Membre
Dernière intervention
8 février 2020

Oui excuse moi :

#blue{
  background: #141419;
  color: #141419;
  font-family: 'Ubuntu';
  margin-left: auto;
}
#game_map{
  border: 1px solid #FFFFFF;
  clear: both;
  float: left;
  position: absolute;
  left: 40%;
  top: 30%;
  margin-bottom: 150px;
}
#game_map .cell{
  cursor: pointer;
  float: left;
  border: 1px solid #FFFFFF;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 32px;
  text-align: center;
} 
.clear{
  clear: both;
  line-height: 0px;
}
#game_map .player1_cell{
  color: #FFFFFF;
}
#game_map .player2_cell{
  color: #FFFFFF;
}
#game_map .hover{
  background: #FFFFFF;
}
#game_map .win{
  background:#FFFFFF;
}
#player_mark, #player_name{
  padding: 0px 3px;
}
.end_game{
  display: none;
}
#winner_name{
  color: #17BF63;
}
h1
{
  position: absolute;
  color: #FFFFFF;
  left: 43%;
  top: 2%;
}
h2
{
  position: absolute;
  color: #FFFFFF;
  left: 42%;
  top: 15%;

}

table {

  position: absolute;
  color: #FFFFFF;
  left: 5%;
  top: 10%;
  border: 1px dashed #141419;
  width: 20%;
  height: 10%;
  font-size: 18px;
}

th,td 
{
text-align: center;
}

h3
{
  position: absolute;
  color: #FFFFFF;
  top: 2%;
  left: 8%;
  font-size: 22px;
}
td{
  color: #17BF63;
}

#winner
{
  position: absolute;
  left: 33%;
  top: 41%;
  font-size: 42px;
  background: #dedede;
  border: 1px dashed #17BF63;
  padding: 10px;


}


#ask_restart
{
  position: absolute;
  left: 45%;
  top: 84%;
  text-decoration: none;
  font-size: 32px;
  color: green;
  font-weight: bold;
}


 @media (min-width: 1280px) {
  #game_map{
    position: absolute;
  left: 34%;
  top: 25%;
  }
  #ask_restart{
    position: absolute;
    left: 45%;
    top: 91%;
  }

 }
 a
 {
  text-decoration: none;
  color:#A7D47D;
  font-weight: bold;
 }






 

.sf-arrows .sf-with-ul:after {
  content: "\f107";
  position: absolute;
  right: 15px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
}

.sf-arrows ul .sf-with-ul:after {
  content: "\f105";
}

/* Nav Meu Container */
#nav-menu-container {
  float: right;
  margin: 0;
}

@media (max-width: 768px) {
  #nav-menu-container {
    display: none;
  }
}

/* Nav Meu Styling */
.nav-menu a {
  padding: 0 8px 10px 8px;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  outline: none;
}

.nav-menu > li {
  margin-left: 10px;
}

.nav-menu ul {
  margin: 4px 0 0 0;
  padding: 10px;
  box-shadow: 0px 0px 30px ;
 
  background: #fff;
}

.nav-menu ul li {
  transition: 0.3s;
}

.nav-menu ul li a {
  padding: 10px;
  color: #333;
  transition: 0.3s;
  display: block;
  font-size: 13px;
  text-transform: none;
}

.nav-menu ul li:hover > a {
  color: #17BF63;
}

.nav-menu ul ul {
  margin: 0;
}

/* Mobile Nav Toggle */
#mobile-nav-toggle {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  margin: 20px 20px 0 0;
  border: 0;
  background: none;
  font-size: 24px;
  display: none;
  transition: all 0.4s;
  outline: none;
  cursor: pointer;
}





#wrap {
  font-family: sans-serif;
  font-size: 21px;
  line-height: 1.6;
  margin: 0;
  display: flex;
  color: #f00;
  transition: transform .4s cubic-bezier(.25, .1, .25, 1);
}

#wrap{
  transform: translate3d(-335px, 0, 0);
}


label {
  height: 0px;
  text-align: right;
  display: block;
  margin-right: -30px;
}


a,
label {
  color: white;
  text-decoration: none;
  display: block;
}

.header {
  background: #f00;
  width: 360px;
  padding: 0 20px;
  display:inline-block;
  vertical-align:top;
}

.nav {
  padding: 25px;
}

.main {
  padding: 25px;
  flex: 1;
  display:inline-block;
}

p {
  max-width: 590px;
  color:#306;
}

#menu{
  display:none;
}
#menu:checked ~ #wrap{
  transform: translate3d(0, 0, 0);
}

label>span{
  display:none;
}
#menu:checked ~ #wrap label>span{
  display:block;
  font-size:48px;
  line-height:48px;
}

#menu:checked ~ #wrap label>svg{
  display:none;
  
  #searchbar     {position:relative; width:1040px; height:auto;}
.formulaire                     {display:inline-block;}
.formulaire .champ           {width:600px; height:35px;}
.formulaire .bouton           { background-image: url(images/searchbar_button.png);background-repeat: no-repeat;width: 35px;height: 35px;padding: 0; }


<!DOCTYPE html>
<html>
<head>
	<title>Jeu du morpion</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="stylemorpion.css" type="text/css" />
	<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body id="blue">
	<input type="checkbox" id="menu" name="menu">
	<div id="wrap">
	  <header class="header">
		<nav class="nav">
		  <label for="menu">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="34px" height="27px" viewBox="0 0 34 27" enable-background="new 0 0 34 27" xml:space="preserve">
	<rect fill="#FFFFFF" width="34" height="4"/>
	<rect y="11" fill="#FFFFFF" width="34" height="4"/>
	<rect y="23" fill="#FFFFFF" width="34" height="4"/>
	</svg>
			<span>×</span>
		  
		  </label>
	  
		  <h1><a href="#">Ciné fou</a></h1>
		  <a href="#"><a href="">L'accueille</a></a>
		  <a href="#">Les Films</a>
		  <a href="#">les Jeux</a>
		  <a href="#">L'agenda</a>
		  
		  <div id="searchbar">
					<form action="" class="formulaire">
					 <input class="champ" type="text" value="Search...)"/>
						<input class="bouton" type="button" value=" " />
					   
					</form>
					</div>
		  
		</nav>
	  </header>
	  <main class="main">

</body>
<body>
	<h1>Jeu du morpion</h1>

	<div id="game_map">
	</div>
	<h3>Parties gagnées</h3>
	<table>
		<tr>
			<th></th>
			<th>Joueur X</th>
			<th>Joueur O </th>
		</tr>
		<tr>
			<th></th>
			<td id="player1_wins">0</td>
			<td id="player2_wins">0</td>
		</tr>
	<h3 id="winner" class="end_game">
		 le gagnant est: <span id="winner_name"></span>
	</h3>
	<div id="ask_restart" class="end_game">
		 <a href="#" id="restart_game">Recommencer</a>
	</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!--please open in a 1280x800 res at least-->
 
 <script  src="morpion.js"></script>
</body>
</html>


Voila mon code, je ne n'est pas mis le js, je ne jugez pas utile de le mettre
En tout cas mercis de m'aider
Cordialement kymer
jordane45
Messages postés
27576
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 février 2020
2 111
Déjà, sans regarder le reste...
</body>
<body>

Non.. ça ce n'est pas possible !
Tu ne dois avoir qu'UN SEUL body dans ta page

Ensuite il semble que tu aies un certain nombre de balises html non fermées...
Ou se trouve le
</table> 
?
Ou se trouve la balise de fin de ta balise
<main class="main">
Messages postés
5
Date d'inscription
mardi 20 novembre 2018
Statut
Membre
Dernière intervention
8 février 2020

Ha.......
J'avais mis deux "body" afin de pouvoir mieux mi retrouver, mais si vous dites que cela ne vas pas je vais le modifier de suite.
La balise "table", je ne savais pas qu'il manquer cette partie, c'est un ami qui me la transmit.
Enfin, pour le "main", on ami m'avait dit qu'il n'y avait pas besoin de mettre la fin.

Je vais donc faire de se pas les modification nécessaires et voir si cela a régler mon problème, je vous recontacte si nécessaire

Cordialement kymer