Et oui sujet souvent débattu Smiley smile
utilise flex, flex-direction et 100vh
<!DOCTYPE html>
<html lang="fr">
<head>
	<title>sans titre</title>
	<meta charset="utf-8" />
	<style>
		* { margin: 0 0.3rem; padding: 0 1rem; }
		body { margin:0; padding: 0; color: #fff; font-family: Sans-Serif; font-size: 150%; }
		.container { height: 100vh; display: flex; flex-direction: column; }
		.wrapper { flex-grow: 1; }

		html {background: #444; }
		.container { background: wheat; }
		.wrapper { background: burlywood; }
		.header { background: firebrick; }
		.content { background : green; }
		.footer { background: #888; }
	</style>
</head><body>
	<div class="container">
		<div class="wrapper">
			<header class="header">
				Sur ta tête
			</header>
			<main class="content">
				Parler pour ne rien dire
			</main>
		</div>
		<footer class="footer">
			c'est le pied
		</footer>
	</div>
</body></html>

Pas de majuscules dans les class, stp.
Modifié par bazooka07 (22 May 2018 - 01:10)
bonjour a tous , quand je tape n'importe quelle lettre par exemple la lettre "b" , ça m'envoie sur une autre page et ça m'affiche la lettre que j'ai tapé , et ça ne m'affiche pas ma requête , je voudrais que quand je tape une plaque dans "IDimmatriculation", par exemple "BG-930-YC" ça m'affiche les autres caractéristique de la voiture mais hélas je ne sais pas comment m'y prendre ; quelqu'un pourrait m'aider a résoudre mon problème svp en espérant avoir était assez clair avec vous ^^ upload/1526935745-70312-mabase.png

ca c'est mon index

 
<html>
<form method="POST" action="resultat.php"> 
Rechercher un mot : <input type="text" name="recherche">
<input type="SUBMIT" value="Search!"> 



</form>
</html> 



ça c'est ma page résultat

<?php

if(isset($_POST['recherche'])){

$imma=$_POST['recherche'];

}
$bdHote         ='localhost';
$bdNom          ='auto shop';           
$bdUtilisateur  ='root';
$bdMotDePasse   ='';



$bdConnexion=@mysql_connect($bdHote,$bdUtilisateur,$bdMotDePasse) or die ("Erreur de connexion a $bdHote pour l'utilisateur $bdUtilisateur");

mysql_select_db($bdNom,$bdConnexion) or die ("Erreur de la selection de la base $bdNom");

$requete= "SELECT NomModele, NomMarque, AnneeModele, NbPorte, NbCh
           FROM immatriculation";
		   
		   $tableRequete= mysql_query($requete);
		   
		   
			   
			   if(empty($_POST['recherche']))
			   {
				   echo '<p> Attention, vous avez oublié de remplir les champs suivants : </p><ul>';
				   header('rechercher.html');
				   
			   }
			   else
			   {
				   echo $imma;
				  
			   }
			   
		  
		   

		   ?>



en haut c'est ma base de donnée
Modifié par loicc97460 (21 May 2018 - 22:50)
Bonsoir,
Ce sujet a souvent été abordé... Je l'utilise , avec succès, pour fixer le footer au pied de la page ou au pied du viewport selon la longueur du contenu.
Là j'ai voulu modifier un peu rajoutant un container global

<body  class="page mode-static" id="top">
	<div class="container">
		<div class="wrapper">
			<header class="SiteHeader">
			</header>
			<main class="SiteContent">
			</main>
		</div>
		<footer class="SiteFooter">
		</footer>
	</div>
</body>

Le container prend bien la hauteur totale du viewport mais le wrapper ne ne fait pas alors que son parent (container) a bien une hauteur définie (100%).
J'ai essayé aussi avec min-height: calc ( 100% - 5rem ) (5 rem étant la hauteur du footer en-dehors du wrapper.

html, 
body {
	height: 100%;
	margin: 0;
	padding: 0;
}
.container {
	min-height :100%;
	margin: 0 1rem;
	border: solid 1px sienna;
}
.wrapper {
	min-height :100%;
	margin: 1rem;
	border: solid 1px blue;
}
.SiteHeader {
	height :8rem;
	margin: 1rem;
	border: solid 1px orange;
}
.SiteContent {
	min-height :10rem;
	margin: 1rem;
	border: solid 1px orange;
}
.SiteFooter {
	height :5rem;
	margin: 0 1rem ;
	border: solid 1px orange;
	background-color: lightgray;
}

Cordialement
Bonsoir,

J'ai un widget autocomplete jquery ui qui fonctionne correctement, c'est à dire qu'il récupère bien une ou plusieurs values des suggestions dans le dit input autocomplete (séparée par une virgule) et push le label, ici l'ID correspondant, dans un input hidden (id également separée par des virgules.
Ci-dessous le code correspondant.

Code PHP :

echo "<form action=\"ecrire-message.php\" method=\"post\">";
          echo "<label for=\"multi_autocomplete\"> Ajouter des destinataires:</label>";
          echo "<input type='text' id='multi_autocomplete'>";
          echo "<input type='text' id='selectuser_ids'>";
echo "</form>";



    <script>
    $( function() {
     // initialisation
     $( "#multi_autocomplete" ).autocomplete({
        source: function( request, response ) {
          var searchText = extractLast(request.term);
          $.ajax({      
             url: "traitement-destinataire-ui-autocomplete.php",
             type: 'post',
             dataType: "json",
             data: {
               search: searchText
             },
             success: function( data ) {
               response( data );
             }
           });
        },
    
        select: function( event, ui ) {
            var terms = split( $('#multi_autocomplete').val() );
            terms.pop();
            terms.push( ui.item.label );
            terms.push( "" );

            $('#multi_autocomplete').val(terms.join( ", " ));
            terms = split( $('#selectuser_ids').val() );
            terms.pop();
            terms.push( ui.item.value );
            terms.push( "" );
            $('#selectuser_ids').val(terms.join( ", " ));
            return false;
         }
     });
   });
    function split( val ) {
       return val.split( /,\s*/ );
    }

    function extractLast( term ) {
       return split( term ).pop();
    }
   </script>


Ce qui donne ca pour mieux saisir :
upload/1526931734-69769-autocompl.jpg

Je n'ai pas mis le traitement Json, je ne crois pas que cela soit utile.

J'en viens à la difficulté que je rencontre.

Si l'utilisateur supprime un des noms pour finalement ne pas envoyer de message à cette personne, dans le hidden, l'ID reste en place et donc c'est le bazar pour une insertion en BDD....

Je ne sais pas vers où partir.

Faut il envisager une fonction qui nettoie tout si les keys de suppression sont utilisées ? (ca me semble violent... )

Comment dans ce cas cibler les éléments situés entre les bonnes séparations de virgule?

Quelqu'un a t il déjà rencontré ce besoin ?

Merci et bonne soirée,
http://www.apglsf.com/
Bonjour, j'ai terminé ce site sous Wordpress. Dans le thème choisi, il n'y avait qu'un seul menu, j'ai alors ajouter celui dans la barre bleu en haut. Le menu fonctionne très bien, mais je suis incapable de le rendre responsive. Présentement, il n'apparait plus.
Je vous donne le code ici, mais c'est un menu WordPress.


#menutopnav ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	/*padding:0 5px 0 5px;*/
	text-align:right;
	position:relative;
}

#menutopnav ul a
{
	display:block;
	color:white;
	text-decoration:none;
	top: 53px;
	padding-right:10px;
	padding-left:10px;
}

#menutopnav ul li
{
	position:relative;
	float:left;
	margin:0;
	padding-right:10px;
	padding-left:10px;
}

#menutopnav ul li.current-menu-item
{
	background:#16587a;
	padding-right:10px;
	padding-left:10px;
	position:relative;
}

#menutopnav ul li:hover
{
	background:#147aad;
	/*padding-left:15px;*/
	padding-right:10px;
	padding-left:10px;
}

#menutopnav ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#a0cee5;
	padding:0;
	text-align:left;
}

#menutopnav ul ul li
{
	float:none;
	width:250px;
	text-align:left;
	padding-left:15px;
}

#menutopnav ul ul a
{
	line-height:120%;
	text-align:left;
	color:#0D3C55;
	padding-left:15px;
}

#menutopnav ul ul a:hover
{

	color:white;
	padding-left:15px;
}

#menutopnav ul ul ul
{
	top:0;
	left:100%;
}

#menutopnav ul li:hover > ul
{
	display:block
}

.menu-top-container .menu-item-has-children > a {
    margin-right: 0px!important;
}

/****/

/**** RESPONSIVE TOP */

/*Responsive Styles*/
@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    ul#menu-top {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    #menu-top li#menu-item {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul#menu-top li#menu-item, li#menu-item a {
        width: 100%;
    }
	
	.show-menu {
        display:block;
    }
}


/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #19c589;
    text-align: center;
    padding: 10px 0;
    display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}



                    	<nav id="menutopnav">

<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
					
							<?php wp_nav_menu( array( 'theme_location' => 'top' ) ); ?>
    					</nav>



Merci pour votre aide
Bonjour,

j'ai réalisé un site, très minimaliste, avec grid. La galerie d'images est en flexbox. Le site est en construction, il ne sera actif que dans plusieurs mois. Le squelette est en place mais le contenu n'est en aucun cas finalisé. Les liens du menu sont inactifs, excepté celui "moins de 50 euros", situé sur la gauche du menu déroulant. Les noms des images ne sont pas les bons, et les prix sont aléatoires. Je ne ne propose pas ce site ici pour évaluation (je n'empêche personne de le faire...), mais pour parler de grid. Provisoirement, le site est chez un hébergeur gratuit (noindex, nofollow) :

barakiss.free.fr

Je débute avec grid et j'ai encore de nombreuses zones d'ombre, malgré l'abondante documentation déjà disponible. Et je constate qu'on ne parle pas beaucoup de grid sur le forum.

Mes problèmes non résolus :

Avec la commande "grid-template-rows", je n'arrive pas à répartir l'espace sur les faibles résolutions. En mode 320x480, le texte de "main" se résume à une ligne, avec un ascenseur. Normalement, avec la commande "grid-auto-rows: minmax(40px, auto);", on devrait voir s'allonger la cellule suivant son contenu, mais ça ne fonctionne pas. Et dans ces basses résolutions, si je passe en mode paysage, plus rien ne s'affiche, mis à part le titre et les menus! Mais si j'enlève le 100% mis sur html en début du fichier css, tout devient normal de ce côté (mais d'autres problèmes apparaissent ailleurs, bien sûr).

Il serait souhaitable que l'on puisse définir l'espace entre les cellules individuellement (commande "grid-row-gap"). Hélas, cette commande est globale.

Sur un iPad mini, le footer ne se place pas en bas de la page. Il ne s'en rapproche que quand le texte de "main" devient plus grand. J'ai l'impression que iPad mini ne reconnaît pas grid.

Et aussi, pourquoi devoir rajouter tous ces margin, padding et autres width avec grid pour que tout se positionne correctement ? Est-ce normal ?

En tous cas, et c'est un peu décevant, en matière de "responsive", ce site n'arrive pas à la cheville de celui que j'avais fait il y a quelques mois avec les css de positionnement. Et je ne l'ai testé pour le moment qu'avec un iPad mini et Firefox 52 en mode adaptatif.

Il me semble que grid est l'avenir, et parler ici de nos expériences serait souhaitable.

Merci de vos retours.

(Je ne donne pas le code, mon message est déjà assez long, mais je peux le faire dans une autre post).
Modifié par Bongota (20 May 2018 - 19:35)
@Zelena,
Il y a des gens qui mettent plusieurs boutons submit dans un formulaire et ils s'en dépatouillent en mettant un nom aux boutons. Pas top, je te l'accorde.

Mais le plus grave, c'est aucun filtrage des entrées, même pas pour savoir si elles sont vides.
Miam, Miam, les injections SQL !!!
https://fr.wikipedia.org/wiki/Injection_SQL

Apprendre à écrire correctement une requête SQL :
https://sqlpro.developpez.com/cours/sqlaz/dml/

Et après les tester à la main avec PhpMyAdmin
https://www.phpmyadmin.net/
https://openclassrooms.com/courses/concevez-votre-site-web-avec-php-et-mysql/phpmyadmin-5

J'ai mis un lien en français au cas où.
Bonjour.
$_POST["submit"]... Qu'est-ce que ça peut bien être...
Je ne fréquente plus trop le HTML, ni le PHP d'ailleurs mais les inputs de type submit sont des boutons, vous n'entrez pas de valeur...
Bon, admettons.
Le truc, dans le débogage, c'est d'arriver à circonscrire le (ou les) problèmes.
À chaque étape, il faut être sûr qu'il fasse ce que vous attendez qu'il fasse.
Dans le cas de conditions (les 'if'), il faut s'assurer que la condition est remplie quand on le souhaite.
Smiley smile
Bonjour,
Je reprends mon post que j'avais mis dans la catégorie css, car c'est sans doute plus un problème de script.
J'ai fait une sticky navbar suivant le scroll (cf W3C).
Pas de problème cela fonctionne si le code css rajouté par le script n'est pas dans un fichier externe.
Le fichier js :

window.onscroll = function() {myStickyNavBar()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myStickyNavBar() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
} 

Le fichier css qui fonctionne si dans le head de la page :

<style>
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
.sticky + .content {
  padding-top: 60px;
}
</style>
<head>

Ce qui ne fonctionne pas:

<link rel="stylesheet" href="css/sticky-navbar.css"> 
</head>

Dans sticky-navbar.css

.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
.sticky + .content {
  padding-top: 60px;
}
body { color: green; } /* pour tester si le lien s'effectuait bien avec la feuille de style: ce qui est le cas */


Cordialement
Bonjour à tous,
Merci pour le message d'accueil.
Je souhaite connaître le nom de la fonction JavaScript qui permet à un développeur de pouvoir proposer aux visiteurs de son site d'avoir la possibilité d'enregistrer un raccourci du site sur le téléphone. Voir la capture d'un site qui me l'a proposé en me rendant dessus.
Merci d'avance. upload/1526802441-71058-img20180520084510.jpg
Bonjour/bonsoir j'ai un problème avec ma requête impossible d'inserez les données du formulaire vers la bdd Smiley ohwell

<?php
$bdd=mysqli_connect("localhost","root","","bdd");

// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>

<?php

if (isset($_POST["submit"])) {
    // Le formulaire a été soumis : récupération des informations
$lastname = $_POST['lastname'];
$firstname = $_POST['firstname'];
$country = $_POST['country'];
$subject = $_POST['subject'];
}

$req = mysqli_query($bdd,"INSERT INTO 'contact'
   'firstname', 'lastname', 'country', 'subject'
VALUES
   '.$firstname.', '.$lastname.', '.$country.' '.$subject.'");


if ($req) {
  echo "<p style='color:green;'>Requête reçu avec succès !</p>";
}

else {
	echo "<p style='color:red;'>Requête échouée. Reesayez</p>";
}

mysqli_close($bdd);
?>


      <form method="post" action="/action_page.php">
        <label for="fname"><?php echo TXT_fname; ?></label>
        <input type="text" id="fname" name="firstname" placeholder="<?php echo TXT_lname_placeholder; ?>">
        <label for="lname"><?php echo TXT_lname; ?></label>
        <input type="text" id="lname" name="lastname" placeholder="<?php echo TXT_fname_placeholder; ?>">
        <label for="country"><?php echo TXT_Country; ?></label>
        <select id="country" name="country">
          <option value="france">France</option>
        </select>
        <label for="subject"><?php echo TXT_Subject; ?></label>
        <textarea id="subject" name="subject" placeholder="<?php echo TXT_subject_placeholder; ?>" style="height:170px"></textarea>
        <input type="submit" name="submit" value="Submit">
      </form>


Je vous remercie de votre aide ! Smiley smile
Bonjour,

Pour info :

1) J'ai renouvelé le Comodo DV à 60 euros par mois chez OVH.
Le site est planté pendant une heure, ce qui n'est pas indiqué dans la doc OVH, mais ensuite cela marche correctement, heureusement.

2) J'ai prix un Let's OVH gratuit sur un autre site.

3) J'ai appelé les spécialistes.
En EV, le nom qui s'affiche dans la barre d'URL est forcément le nom de la société sur le Kbis.
Si l'on ajoute un nom commercial et que l'on fait les démarches pour le faire figurer sur le Kbis, le nom commercial peut figurer à la suite du nom de société.

Par exemple, si j'ai une société Machin qui possède le site truc.com et que truc.com figure comme nom commercial sur le Kbis.

Machin (truc.com) https://www.truc.com/index.html

Pas bien sympa...
S'il faut créer une société par nom de site c'est lourd...

4) Y a-t-il intérêt à maintenir un accès http en plus de https ?
Si non je suppose que le mieux est de faire une redirection http vers https par le htaccess ?
bonjour

j'ai ceci
var data=[ {
"loc": [44.875336, 39.377747], "name": "unnom", "style": "rouge"
}
,
{
"loc": [40.304665, 44.555054], "name:"autrenom", "style": "vert"
},
etc.......];

et ce script http://labs.easyblog.it/maps/leaflet-search/examples/custom-source-data.html
qui par exemple qd je cherche "autrenom" va savoir l'associer à la valeur loc [40.304665, 44.555054]
je voudrais pouvoir lui associer en plus la valeur de "style" qui lui est associe, dans mon exemple "vert"
des idees?

comment recuperer "vert" quand on a "autrenom"
merci
Bonjour,
J'ai fait une sticky navbar suivant le scroll (cf W3C).
Pas de problème cela fonctionne si le code css rajouté par le script n'est pas dans un fichier externe.
Le fichier js :

window.onscroll = function() {myStickyNavBar()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myStickyNavBar() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
} 

Le fichier css qui fonctionne si dans le head de la page :

<style>
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
.sticky + .content {
  padding-top: 60px;
}
</style>
<head>

Ce qui ne fonctionne pas:

<link rel="stylesheet" href="css/sticky-navbar.css"> 
</head>

Dans sticky-navbar.css

.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
.sticky + .content {
  padding-top: 60px;
}
body { color: green; } /* pour tester si le lien s'effectuait bien avec la feuille de style: ce qui est le cas */

Modifié par cpalo (19 May 2018 - 13:20)
25 Dernières réponses