Bonjour,
j'ai un problème avec la mise en forme d'input.
en fait, j'ai une page connexion sur laquelle j'ai appliqué la mise en forme css que je souhaite.
et j'ai une 2ème page sur laquelle j'ai également des input mais je ne souhaite pas appliquer la même mise en forme css mais je n'arrive pas à cibler les input de cette page en particulier.
j'ai tenté de faire des class et des id dans mes input pour les cibler en css mais çà ne fonctionne pas
d'avance merci pour votre aide
page connexion :
page 2 :
css :
Modifié par Dje22 (18 Nov 2017 - 16:09)
j'ai un problème avec la mise en forme d'input.
en fait, j'ai une page connexion sur laquelle j'ai appliqué la mise en forme css que je souhaite.
et j'ai une 2ème page sur laquelle j'ai également des input mais je ne souhaite pas appliquer la même mise en forme css mais je n'arrive pas à cibler les input de cette page en particulier.
j'ai tenté de faire des class et des id dans mes input pour les cibler en css mais çà ne fonctionne pas
d'avance merci pour votre aide
page connexion :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Connexion</title>
</head>
<body>
<!-- En-tête -->
<span><img src="images/logo_mereva.jpg" alt="Logo Mereva" /></span>
<!-- Le corps -->
<div id="connexion">
<form id="form_connexion" action="index.php" method="post">
<p>
<input type="text" name="nom" value="" placeholder=" Nom utilisateur" size="30" maxlength="10"/></br>
</p>
<p>
<input type="password" name="mot_de_passe" value="" placeholder=" Mot de passe" size="30"/></br>
</p>
<p>
<input type="submit" value="Connexion"/>
Mot de passe oublié ?
</p>
</form>
</div>
</body>
</html>page 2 :
<?php
// On démarre la session AVANT d'écrire du code HTML
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Mereva</title>
</head>
<body>
<!--début du bloc page-->
<div id="page">
<!-- En-tête -->
<div class="element_page">
<?php include("entete.php"); ?>
</div>
<!-- Le corps -->
<div class="element_page">
<div id="corps">
<?php include("menus.php"); ?>
<!--Tableau avec le contenu de la table GBD_DAT-->
<div id='element_tableau'>
<div id="tableau">
<?php
//*******************************************************************
//affichage page par page tutoriel Ymox sur le site Zeste de Savoir
//https://zestedesavoir.com/tutoriels/351/paginer-avec-php-et-mysql/
//*******************************************************************
//*Connexion à la base de données
//*OpenCLassroom "Concevez votre site web avec php et MySql"
try
{
// On se connecte à MySQL
$bdd = new PDO('mysql:host=localhost;dbname=dms;charset=utf8', 'root', '', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
}
catch(Exception $e)
{
// En cas d'erreur, on affiche un message et on arrête tout
die('Erreur : '.$e->getMessage());
}
$limite = 10;
$page = (!empty($_GET['page']) ? $_GET['page'] : 1);
$debut = ($page - 1) * $limite;
// Partie "Requête"
/* On calcule donc le numéro du premier enregistrement ; SQL_CALC_FOUND_ROWS compte le nombre d'enregistrements*/
/*sans tenir compte du critère limit*/
$sql = 'SELECT SQL_CALC_FOUND_ROWS * FROM `gbd_dat1` LIMIT :limite OFFSET :debut';
$query = ($sql);
/* On prépare la requête à son exécution. Les marqueurs seront identifiés */
$query = $bdd->prepare($query);
/* On lie ici une valeur à la requête, soit remplacer de manière sûre un marqueur par sa valeur, nécessaire pour que la requête fonctionne. */
$query->bindValue(
'limite', // Le marqueur est nommé « limite »
$limite, // Il doit prendre la valeur de la variable $limite
PDO::PARAM_INT // Cette valeur est de type entier
);
$query->bindValue(
'debut', // Le marqueur est nommé « début »
$debut, // Il doit prendre la valeur de la variable $debut
PDO::PARAM_INT // Cette valeur est de type entier
);
/* Maintenant qu'on a lié la valeur à la requête, on peut l'exécuter pour en récupérer le résultat */
$resultSet = $query->execute();
/* Ici on récupère le nombre d'éléments total. Comme c'est une requête, il ne
* faut pas oublier qu'on ne récupère pas directement le nombre.
* De plus, comme la requête ne contient aucune donnée client pour fonctionner,
* on peut l'exécuter ainsi directement */
$resultFoundRows = $bdd->query('SELECT found_rows()');
/* On doit extraire le nombre du jeu de résultat */
$nombredElementsTotal = $resultFoundRows->fetchColumn();
// début du tableau
echo '<table>'."\n";
// première ligne on affiche les titres prénom et surnom dans 2 colonnes
echo '<tr class="class01">';
echo '<td class="ID">#ID</td>';
echo '<td class="Patient">Patient</td>';
echo '<td class="Fiche">Fiche</td>';
echo '<td class="Question">Question</td>';
echo '<td class="Description">Description</td>';
echo '<td class="Details">Details</td>';
echo '<td class="Correction">Corrections</td>';
echo '<td class="NR">NR</td>';
echo '<td class="Commentaires">Commentaires</td>';
echo '</tr>';
echo '</table>'."\n";
// Partie "Boucle"
// lecture et affichage des résultats sur 2 colonnes, 1 résultat par ligne.
while($element= $query -> fetch())
{
?>
<form id="insertion" name="insertion" action="dms_modification3.php" method="POST">
<input type="hidden" name="limit" value="<?php echo($limite) ;?>">
<table>
<tr class="class02">
<td class="ID"><input type="text" name="id[]" value="<?php echo $element['id'] ;?>"></td>
<td class="Patient"><input type="text" name="pat[]" value="<?php echo $element['pat'] ;?>"></td>
<td class="Fiche"><input type="text" name="fic[]" value="<?php echo $element['fic'] ;?>"></td>
<td class="Question"><input type="text" name="que[]" value="<?php echo $element['que'] ;?>"></td>
<td class="Description"><input type="text" name="des[]" value="<?php echo $element['des'] ;?>"></td>
<td class="Details"><input type="text" name="det[]" value="<?php echo $element['det'] ;?>"></td>
<td class="Corrections"><input type="text" name="cor[]" value="<?php echo $element['cor'] ;?>"></td>
<td class="NR"><input type="number" name="non_rec[]" value="<?php echo $element['non_rec'] ;?>"></td>
<td class="Commentaires"><input type="text" name="com[]" value="<?php echo $element['com'] ;?>"></td>
</tr>
<?php
}//fin while
?>
</table>
</form>
<!--fin du bloc tableau-->
</div>
<?php
$query->closeCursor();
?>
<!--fin du bloc element_tableau-->
</div>
<div>
<input type="submit" value="modifier">
</div>
<!--fin du bloc corps-->
</div>
<!--fin du bloc element_page correspondant au CORPS-->
</div>
<div class="element_page">
<!--// Partie "Filtres"-->
<div id='filtres'>
<form action="demande_de_corrections_page_filtres.php" method="get">
<select onselect="this.form.submit()" name="patient" id="patient">
<?php
$sql="SELECT DISTINCT pat, fic FROM gbd_dat1 ORDER BY pat";
$result = $bdd->query($sql);
while ($donnees = $result->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $element['pat'];?>"><?php echo $donnees['pat'];?></option>
<?php
}
?>
</select>
<select onselect="this.form.submit()" name="fiche" id="fiche">
<?php
$sql="SELECT DISTINCT pat, fic FROM gbd_dat1 ORDER BY pat";
$result = $bdd->query($sql);
while ($donnees = $result->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $donnees['fic'];?>"><?php echo $donnees['fic'];?></option>
<?php
}
?>
</select>
<input type="submit" value="Valider" />
</form>
</div>
<!--// Partie "Liens"-->
<div id='liens'>
<?php
/* On calcule le nombre de pages */
$nombreDePages = ceil($nombredElementsTotal / $limite);
/* Si on est sur la première page, on n'a pas besoin d'afficher de lien
* vers la précédente. On va donc l'afficher que si on est sur une autre
* page que la première */
if ($page > 1):
?><a href="?page=<?php echo $page - 1; ?>">Précédente</a> - <?php
endif;
/* On va effectuer une boucle autant de fois que l'on a de pages */
for ($i = 1; $i <= $nombreDePages; $i++):
?><a href="?page=<?php echo $i; ?>"><?php echo $i; ?></a> <?php
endfor;
/* Avec le nombre total de pages, on peut aussi masquer le lien
* vers la page suivante quand on est sur la dernière */
if ($page < $nombreDePages):
?>- <a href="?page=<?php echo $page + 1; ?>">Suivante</a><?php
endif;
?>
</div>
</div>
<!-- Le pied de page -->
<div class="element_page">
<div id="pied_de_page"/>
<?php include("pied_de_page.php"); ?>
</div>
</div>
<!--fin du bloc page-->
</div>
</body>
</html>
css :
html
{
height:100%;
width:100%;
display:flex;
}
#page
{
display: flex;
flex-direction: column;
flex: 1;
justify-content: space-between;
}
/*gestion du bug firefox*/
/*il faut mettre une position absolue au bloc parent body pour pouvoir utiliser le justify-content sur le bloc page*/
body
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
flex-direction: column;
font-size: 10px;
font-family: "Century Gothic","Impact", "Arial Black","Arial", "Verdana", "sans-serif";
}
a:link
{
text-decoration:none;
color: black;
}
a:hover
{
text-decoration:none;
color: orange;
}
a:visited
{
text-decoration:none;
color: black;
}
/********************************************************************************************************/
/*Mise en forme de la page de connexion*/
/*MISE EN FORME A AJOUTER : ajouter texte de remplissage dans les champs INPUT*/
#connexion
{
display: flex;
justify-content: center;
align-items: center;
height: 500px;
margin : auto;
}
select
{
width: 60px;
font-family: "Century Gothic","Impact", "Arial Black","Arial", "Verdana", "sans-serif";
font-size: 10px;
}
#filtres input[type=submit]
{
background-color: orange;
color: white;
height : 22px;
}
#filtres
{
padding-left: 220px;
}
input
{
border-radius: 5px;
font-family: "Century Gothic","Impact", "Arial Black","Arial", "Verdana", "sans-serif";
font-size: 10px;
}
input[type=text], input[type=password]
{
width: 190px;
height: 22px;
}
input[type=submit]
{
background-color: orange;
color: white;
height: 30px;
}
/********************************************************************************************************/
/**************************************************************************************/
/*mise en forme du menu de la page index*/
#separateur
{
background: url('images/barre_degrade.png') repeat-x bottom;
}
#entete
{
display: flex;
/*justify-content: flex-end; /*Problème pour aligner le logo à gauche*/
justify-content: space-between; /*Problème pour aligner le logo à gauche*/
}
#utilisateur
{
display: flex;
}
li
{
list-style:none; /*enlever le point de la balise li*/
}
#menu_accueil
{
display : flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 10px;
}
/**************************************************************************************/
#menu
{
margin-left: 10px;
margin-right: 20px;
}
#filtres
{
font-size: 10px;
}
/**************************************************************************************/
/*mise en forme du tableau page "demande de corrections*/
table
{
border-collapse: collapse;
}
td, th /* Mettre une bordure sur les td ET les th */
{
border: 2px solid white;
height: 20px;
}
.ID, .NR
{
width: 30px;
text-align: center;
}
.Patient, .Fiche, .Question
{
width: 60px;
text-align: center;
}
.Description
{
width: 150px;
text-align: center;
}
.Details, .Correction
{
width: 100px;
text-align: center;
}
.Commentaires
{
width: 200px;
text-align: center;
}
.class01
{
background-color: RGB(255,192,0);
border: 3px solid white;
text-align: center;
font-weight: bold;
}
.class02
{
background-color: RGB(255,232,203);
}
/**************************************************************************************/
#corps
{
display : flex;
}
#element_tableau
{
display: flex;
flex-direction: column;
justify-content: space-between;
}
/************************************************************************************/
/*couleur de fond de chacun des blocs pour mieux faire la mise en forme*/
#entete
{
min-height: 100px;
}
#logo
{
}
#photo_utilisateur
{
}
#information_utilisateur
{
}
#corps
{
min-height: 400px;
}
#pied_de_page
{
min-height: 40px;
}
#connexion
{
min-height: 80px;
}
#tableau
{
}
#liens
{
text-align: center;
}
#filtres
{
display: flex;
}
/************************************************************************************/
Modifié par Dje22 (18 Nov 2017 - 16:09)