Format de ma page

Fermé
tino_2065 Messages postés 24 Date d'inscription samedi 3 avril 2021 Statut Membre Dernière intervention 4 mars 2022 - 30 nov. 2021 à 18:17
GregoryAmbroise Messages postés 15 Date d'inscription mardi 30 novembre 2021 Statut Membre Dernière intervention 1 décembre 2021 - 30 nov. 2021 à 23:39
Bonjour, mes ainés je vous remercie pour la disposition que vous nous accordez Dieu vous bénisse.

Aujourd'hui j'ai encore une préoccupation.
Il s'agit de mes pages web.
En effet, lorsque je me connecte avec un ordinateur, l'affichage est propre mais avec un téléphone mobile c'est désagréable.
Aidez-moi à faire en sorte que l'affichage s'adapte à tous les les appareils.
Voici l'une des pages en bas:
<!DOCTYPE>
<HTML>
<HEAD><DEMANDE DE CASIER JUDICIAIRE<TITLE></TITLE>
<script language="JavaScript">
</script>
<meta charset="utf-8"/>
<h1 class="box-logo box-title">
<a href="https://monsiteweb.com/">www.monsiteweb.com</a>
</h1>
<link rel="stylesheet" type="text/css" href="stylecasier.css"/>
</HEAD>
<BODY>
<marquee ><FONT size=5><FONT COLOR="red">IMPORTANT:</FONT> Il vous est demandé de nous faire parvenir votre extrait d'acte de naissance(<FONT COLOR="orange">en format PDF</FONT>), la pièce CNI de l'un des parents (<FONT COLOR="orange">en format PDF</FONT>) également au numéro whatsapp indiqué à la page d'acceuil. Merci!</marquee>
</FONT>
<?php
require('config1.php');

if (isset( $_REQUEST['Nom'],
 $_REQUEST['prenoms'],
 $_REQUEST['date_de_naissance'],
 $_REQUEST['Lieu_de_naissance'],
 $_REQUEST['Lieu_de_residence'],
 $_REQUEST['SEXE'],
 $_REQUEST['tel_Portal'],
 $_REQUEST['email'],
 $_REQUEST['Nombre_de_copie'],
 
 $_REQUEST['NOM_ET_PRENOMS_DU_PERE'],
 $_REQUEST['date_de_naissance_du_pere'],
 $_REQUEST['LIEU_DE_NAISSANCE_DU_PERE'], 
 $_REQUEST['Fonction_du_pere'], 
 
 $_REQUEST['NOM_ET_PRENOMS_DE_LA_MERE'],
 $_REQUEST['date_de_naissance_de_la_mere'],  
 $_REQUEST['Lieu_de_naissance_de_la_mere'],
 $_REQUEST['Fontion_de_la_mere'],
 $_REQUEST['lieu_etab'],

 $_REQUEST['Ville_de_reception'])){
 
 // récupérer le nom d'utilisateur et supprimer les antislashes ajoutés par le formulaire
  $Nom = stripslashes($_REQUEST['Nom']);
  $Nom = mysqli_real_escape_string($conn, $Nom);
 // récupérer l'email et supprimer les antislashes ajoutés par le formulaire
  $prenoms = stripslashes($_REQUEST['prenoms']);
  $prenoms = mysqli_real_escape_string($conn, $prenoms);
 
 // récupérer le mot de passe et supprimer les antislashes ajoutés par le formulaire
  $date_de_naissance = stripslashes($_REQUEST['date_de_naissance']);
  $date_de_naissance = mysqli_real_escape_string($conn, $date_de_naissance);
  //
  $Lieu_de_naissance = stripslashes($_REQUEST['Lieu_de_naissance']);
  $Lieu_de_naissance = mysqli_real_escape_string($conn, $Lieu_de_naissance);
  //
  $Lieu_de_residence = stripslashes($_REQUEST['Lieu_de_residence']);
  $Lieu_de_residence = mysqli_real_escape_string($conn, $Lieu_de_residence);
  //
  $SEXE = stripslashes($_REQUEST['SEXE']);
  $SEXE = mysqli_real_escape_string($conn, $SEXE);
  //
   $tel_Portal = stripslashes($_REQUEST['tel_Portal']);
  $tel_Portal = mysqli_real_escape_string($conn, $tel_Portal);
  //
   $email = stripslashes($_REQUEST['email']);
  $email = mysqli_real_escape_string($conn, $email);
   //
   $Nombre_de_copie = stripslashes($_REQUEST['Nombre_de_copie']);
  $Nombre_de_copie = mysqli_real_escape_string($conn, $Nombre_de_copie);
  //
  $NOM_ET_PRENOMS_DU_PERE = stripslashes($_REQUEST['NOM_ET_PRENOMS_DU_PERE']);
  $NOM_ET_PRENOMS_DU_PERE = mysqli_real_escape_string($conn, $NOM_ET_PRENOMS_DU_PERE);
  //
  $date_de_naissance_du_pere = stripslashes($_REQUEST['date_de_naissance_du_pere']);
  $date_de_naissance_du_pere = mysqli_real_escape_string($conn, $date_de_naissance_du_pere);
  //
  
  $LIEU_DE_NAISSANCE_DU_PERE = stripslashes($_REQUEST['LIEU_DE_NAISSANCE_DU_PERE']);
  $LIEU_DE_NAISSANCE_DU_PERE = mysqli_real_escape_string($conn, $LIEU_DE_NAISSANCE_DU_PERE);
  //
  $Fonction_du_pere = stripslashes($_REQUEST['Fonction_du_pere']);
  $Fonction_du_pere = mysqli_real_escape_string($conn, $Fonction_du_pere);
 
  //
  $NOM_ET_PRENOMS_DE_LA_MERE = stripslashes($_REQUEST['NOM_ET_PRENOMS_DE_LA_MERE']);
  $NOM_ET_PRENOMS_DE_LA_MERE = mysqli_real_escape_string($conn, $NOM_ET_PRENOMS_DE_LA_MERE);
  //
  $date_de_naissance_de_la_mere = stripslashes($_REQUEST['date_de_naissance_de_la_mere']);
  $date_de_naissance_de_la_mere = mysqli_real_escape_string($conn, $date_de_naissance_de_la_mere);
  //
  $Lieu_de_naissance_de_la_mere = stripslashes($_REQUEST['Lieu_de_naissance_de_la_mere']);
  $Lieu_de_naissance_de_la_mere = mysqli_real_escape_string($conn, $Lieu_de_naissance_de_la_mere);
  //
  $Fontion_de_la_mere= stripslashes($_REQUEST['Fontion_de_la_mere']);
  $Fontion_de_la_mere = mysqli_real_escape_string($conn, $Fontion_de_la_mere);
  //
  $lieu_etab= stripslashes($_REQUEST['lieu_etab']);
  $lieu_etab = mysqli_real_escape_string($conn, $lieu_etab);
 
  //
  //
     $Ville_de_reception= stripslashes($_REQUEST['Ville_de_reception']);
  $Ville_de_reception= mysqli_real_escape_string($conn, $Ville_de_reception);
 
    $query = "INSERT into `casier` (Nom, prenoms, date_de_naissance, Lieu_de_naissance,

	Lieu_de_residence, SEXE, tel_Portal,

	email, Nombre_de_copie, NOM_ET_PRENOMS_DU_PERE, date_de_naissance_du_pere, LIEU_DE_NAISSANCE_DU_PERE,
	
	Fonction_du_pere, NOM_ET_PRENOMS_DE_LA_MERE, date_de_naissance_de_la_mere, Lieu_de_naissance_de_la_mere, Fontion_de_la_mere, lieu_etab, Ville_de_reception)
	
              VALUES ('$Nom', '$prenoms', '$date_de_naissance', '$Lieu_de_naissance', '$Lieu_de_residence', '$SEXE', '$tel_Portal', '$email', '$Nombre_de_copie', 
			  '$NOM_ET_PRENOMS_DU_PERE', '$date_de_naissance_du_pere', '$LIEU_DE_NAISSANCE_DU_PERE',
	'$Fonction_du_pere', '$NOM_ET_PRENOMS_DE_LA_MERE', '$date_de_naissance_de_la_mere', '$Lieu_de_naissance_de_la_mere', '$Fontion_de_la_mere','$lieu_etab', '$Ville_de_reception')";
	  
  // Exécuter la requête sur la base de donnéesemail
    $res = mysqli_query($conn, $query);
    if($res){
       echo "<div class='sucess'>
          <h3><FONT SIZE=8>VOTRE DEMANDE A BIEN ETE ENVOYEE.</FONT></h3>
		 <BR></BR><FONT SIZE=5>		 
VEUILLEZ DONC PAYER LES FRAIS DE DOSSIER AU NUMERO SUIVANT: +225 0758164099
MERCI!<BR></BR> NB: C'EST APRES AVOIR RECU LES FRAIS QUE NOUS ENTAMERONS L'ETABLISSEMENT DE VORE DOSSIER</FONT>
             <DIV align=center><FONT SIZE=6><p><a href='index.php'>Retour  à la paged'acceuil</a></p></FONT></DIV>
			 		<BR></BR><BR></BR>
       </div>";
    }

	
}else{
?>

<form  method="post" action="" enctype="multipart/form-data">

<FONT COLOR="#FF0000">
<B><FONT SIZE=5><U><DIV align=center>DEMANDE DE CASIER JUDICIAIRE</DIV></U></FONT></FONT></BR>
<BR></BR>
<FONT SIZE=5><U><DIV align=right></U><A HREF="index.php">Retour à la page d'acceuil</A></DIV></FONT>
<h1>Informations concernant le bénéficiaire</h1>
<p>
<fieldset id="coordonnees">
<label>NOM</label><input type="text" name="Nom" placeholder="ex:AMALAMAN" required maxlength="12" pattern="^[A-Za-z]+$"/>
<BR></BR>
<label>PRENOMS</label>
<input type="text" name="prenoms" size=30 placeholder="ex: Jean-Faustin" required maxlength="30" />
<label>DATE DE NAISSANCE</label><input type="date" name="date_de_naissance" required /> <BR/>
<BR></BR>
<label> LIEU DE NAISSANCE</label><input type="text" name="Lieu_de_naissance" placeholder="ex:DAOUKRO" required maxlength="20" />
<BR></BR>
<label>LIEU DE RESIDENCE</label><input type="text" name="Lieu_de_residence" placeholder="ex: ABIDJAN" maxlength="15"/>
<BR></BR>
SEXE 
 <input type="radio" name="SEXE" value="M"/>Masculin
 <input type="radio" name="SEXE" value="F"/>Féminin
<B></BR>
<B></BR>
<label>NUMERO DE TELEPHONE</label><input type="text" name="tel_Portal" placeholder="ex: 0710101010" required pattern="^[0-9]+$" maxlength="10"/>
<B></BR>
<B></BR>
<label>COURIEL</label><input type="email" name="email" size=40 placeholder="ex: jean@gmail.com" pattern="^[A-Za-z]+@{1}[A-Za-z]+\.{1}[A-Za-z]{2,}$"/>
<label for="Villes">
NOMBRE DE COPIE
</label>
		<select name="Nombre_de_copie">
		<optgroup>  <option value="#">...</option>
		<option value="01"> 01 (5.500 FCFA)</option>
			<option value="02">02 (8.500 FCFA)</option>
				<option value="03">03 (11.500 FCFA)</option>
					<option value="04">04 (14.500 FCFA)</option>
						<option value="05">05 (17.500 FCFA)</option>
							<option value="06">06       (20.500 FCFA)</option>
								<option value="07">07 (23.500 FCFA)</option>
									<option value="08">08 (27.500 FCFA)</option>
										<option value="09">09 (30.500 FCFA)</option>
											<option value="10">10 (33.500 FCFA)</option>
    </select></optgroup>    
</fieldset>
</p>
<h2>Informations concernant le père du bénéficiaire</h2>
<p>
<fieldset id="coordonnees">
<label>NOM ET PRENOMS DU PERE</label><input type="text" name="NOM_ET_PRENOMS_DU_PERE" size=40 placeholder="ex: KOUAKOU KOUAME PAUL" required  maxlength="35"/>
<BR></BR>
<label>DATE DE NAISSANCE DU PERE</label><input type="date" name="date_de_naissance_du_pere" required /><BR/>
<B></BR>
<label>LIEU DE NAISSANCE DU PERE</label><input type="text" name="LIEU_DE_NAISSANCE_DU_PERE" placeholder="ex:DAOUKRO" required maxlength="15"/>
<B></BR>
<B></BR>
FONTION DU PERE: <input type="text" name="Fonction_du_pere" size=20   placeholder="ex:POLICIER" required pattern="^[A-Za-z]+$" maxlength="10" />
<B></BR>
</fieldset>
</p>
<B></BR>
<h3>Informations concernant la mère du bénéficiaire</h3>
<p>
<fieldset id="coordonnees">
<label>NOM ET PRENOMS DE LA MERE</label><input type="text" name="NOM_ET_PRENOMS_DE_LA_MERE" size=40 placeholder="ex: KOUAKOU AHOU MARTHE" required maxlength="35" />
<B></BR>
<B></BR>
<label>DATE DE NAISSANCE DE LA MERE</label><input type="date" name="date_de_naissance_de_la_mere" required />
<B></BR>
<B></BR>
LIEU DE NAISSANCE DE LA MERE: <input type="text" name="Lieu_de_naissance_de_la_mere" size=20 placeholder="ex:DAOUKRO"  maxlength="15"/>
<B></BR>
<B></BR>
FONTION DE LA MERE: <input type="text" name="Fontion_de_la_mere" size=20 placeholder="ex:POLICIERE" required pattern="^[A-Za-z]+$" maxlength="15" />
<B></BR>
</fieldset>
</p>
<B></BR>
<p>
<fieldset id="coordonnees">

<B></BR><B></BR><B></BR><B></BR<label for="Villes">
LIEU_D'ETABLISSEMENT DU CASIER JUDICIAIRE
</label>

		<select name="lieu_etab">
		<optgroup> <option value="#">...</option>
		<option value="Abidjan-Plateau"> Abidjan-Plateau</option>
			<option value="’Abidjan-Yopougon">Abidjan-Yopougon</option>
				<option value="Abidjan-Abobo">Abidjan-Abobo</option>
					<option value="Bouaké">Bouaké</option>
						<option value="Daloa">Daloa</option>
							<option value="Man">Man</option>
								<option value="Korhogo">Korhogo</option>
									<option value="Abengourou">Abengourou</option>
										<option value="Bouaflé">Bouaflé </option>
											<option value="Gagnoa">Gagnoa</option>
                                              <option value="San-Pédro">San-Pédro</option>	
<option value="Agboville">Agboville</option>	
<option value="Adzopé">Adzopé</option>	
<option value="Lakota">Lakota</option>	
<option value="Aboisso">Aboisso</option>	
<option value="Grand-Bassam">Grand-Bassam</option>
<option value="Dabou">Dabou</option>	
<option value="Tiassalé">Tiassalé</option>	
<option value="Bondoukou">Bondoukou</option>	
<option value="Bouna">Bouna</option>	
<option value="Béoumi">Béoumi</option>	
<option value="Dabakala">Dabakala</option>	
<option value="Katiola">Katiola</option>	
<option value="M'Bahiakro">M'Bahiakro</option>	
<option value="Tiébissou">Tiébissou</option>	
<option value="Bocanda">Bocanda</option>
<option value="Bongouanou">Bongouanou</option>	
<option value="Tomodi">Toumodi</option>	
<option value="Yamoussoukro">Yamoussoukro</option>	
<option value="Boundiali">Boundiali</option>	
<option value="Ferkessédougou">Ferkessédougou</option>	
<option value="Tengrela">Tengrela</option>	
<option value="Issia">Odienné</option>	
<option value="Sinfra">Sinfra</option>	
<option value="Zuénoula">Zuénoula</option>	
<option value="Oumé">Oumé</option>	
<option value="Sassandra">Sassandra</option>	
<option value="Soubré">Soubré</option>	
<option value="Tabou">Tabou</option>	
<option value="Biankouma">Biankouma</option>	
<option value="Danané">Danané</option>	
<option value="Guiglo">Guiglo</option>	
<option value="Mankono">Mankono</option>	
<option value="Touba">Touba</option>											  
  </select> </optgroup> 
</p>

<DIV align=center><label for="Villes">
Où  voulez-vous recevoir votre dossier?
</label>
<select name="Ville_de_reception">
 <optgroup label="Abidjan">
  <option value="#">...</option>
 <option value="Abobo">Abobo</option>
 <option value="Adjamé">Adjamé</option>
   <option value="Cocody">Cocody</option>
   <option value="Yopougon">Yopougon</option>
 </optgroup>
 <optgroup label="Bongouanou">
 <option value="Agnikro">Agnikro</option>
 <option value="Baoulékro">Baoulékro</option>
  <option value="Dioulakro">Dioulakro</option>
 </optgroup>
 <optgroup label="Daoukro">
  <option value="Baoulékro">Baoulékro</option>
    <option value="Chicago">Chicago</option>
   <option value="Dioulakro">Dioulakro</option>
     <option value="Gagou">Gagou</option>
	 </optgroup>
 <optgroup label="Arrah">
 </optgroup>
 <optgroup label="M'batto">
 </optgroup>
 <optgroup label="Kotobi">
 </DIV>
 </select></optgroup>
</fieldset>
<FONT SIZE=10><DIV align=center><input type="submit" value="ENVOYER" name="submit"></DIV></FONT>
</form>
<?php } ?>				
</BODY>
</HTML>



Configuration: Android / Chrome 80.0.3987.132
A voir également:

1 réponse

GregoryAmbroise Messages postés 15 Date d'inscription mardi 30 novembre 2021 Statut Membre Dernière intervention 1 décembre 2021
30 nov. 2021 à 23:39
Bonjour,

Tu dois mettre en place des CSS qui précisent les styles de tes élements et dimensionés tes DIV.
Le CSS permettra de créer un point de rupture d'alignement de bloc ou de taille de police en fonction de la largeur d'un ecran (en pixel).

Par exemple, affichage 2 colonnes sur Desktop mais une colonne sur Mobile avec tes 2 colonnes desktop qui viendront s'empiler sur mobile.

Regarde du coté des "Grid CSS" ou 'CSS Grid Layout" sur Google pour trouver une bibliothèque toute prête (bootstrap est tres connu mais un peu gros, enfin tout depend de tes besoins). A l'extreme des choses comme 'simplegrid' en .io sont hyper leger. (il existe plein d'alternatives)
0