1. #1
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2016
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : Sénégal

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : juillet 2016
    Messages : 55
    Points : 33
    Points
    33

    Par défaut Ajustement de la page web

    bonjour, j'ai un problème concernant l'ajustement automatique des éléments de ma page web. Autrement dit, une fois cette dernière réduite, les éléments se dispersent et se mélangent. en plein écran sa donne cela Nom : dev.PNG
Affichages : 44
Taille : 1,04 Mo une fois l'écran réduite Nom : dev2.PNG
Affichages : 40
Taille : 360,9 Ko tout est en désordre. merci de me proposer un solution.

  2. #2
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 373
    Points : 478
    Points
    478

    Par défaut

    Il faudrait peut être revoir la conception de la page en responsive ...
    Montre-nous un peu de code html et css pour voir.

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2016
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : Sénégal

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : juillet 2016
    Messages : 55
    Points : 33
    Points
    33

    Par défaut

    CODE HTML

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <!DOCTYPE html>
    <html>
          <head>
    	        <title> Acceuil de la boutique </title>
    			<link rel="stylesheet" href="style1.css"/>
    	  </head>
      <body>
    	     <header>
     
    		<div align="center"><marquee><img  src="boutique.png" alt="image"/><img src="indo.jpg" alt="image"/></marquee></div>
         <nav>
    		 <ul>
    		  <li> <a href="acceuil.html"> Acceuil de la boutique </a></li>
    		   <li> <a href="les produits de la boutique.html"> Les produits de la boutique </a></li>
    		    <li> <a href="commande.html">Passer une commande</a> </li>
    		    <li> <a href="enregistrement.html"> S'enregister maintenant </a></li>
    			 <li> <a href="contacts.html"> Nos contacts </a></li>
    			  <li> <a href="commentaire et suggestion.html">commentaires et suggestions</a> </li>
    			 </ul>
    	 </nav>
    		 <img align="left" src="image/1.jpg" alt="image"/>
    		 <img align="right" src="image/2.jpg" alt="image"/>
    		 <section><br/>
    	      <div align="center" ><img src="bienvenue.gif" alt="image gif"/></div><br/><br/>
    		 <div align="center"><h2>Nous vous souhaitons la bienvenue dans notre site de vente en ligne!!<br/><br/><u>PRESENTATION</u></h2><br/><h3>OBJECTIF DE CETTE APPLICATION:<br/><br/></h3><p>Vue l'avancée techonologique, vue que les gens n'ont plus le temps de faire une longue distance pour acheter des vêtements comme le dit un proverbe "<em>le temps c'est de l'argent</em>", il a été jugé necéssaire par notre entreprise de créer cette application web afin de combler vos besoins EN RESTANT CHEZ VOUS!!!</p><br/><br/><h3>COMMENT FAIRE UN ACHAT?:<br/><br/> </h3><p>C'EST SIMPLE,Il suffit de choisir les vêtements que vous voulez acheter dans la rubrique "les produits de la boutique" une large gamme de produit vous est présentée sur cette rubrique notamment des chemises des chausures des montres des sacs à main des maillots ainsi que d'autres produits,et de passer la commande dans la rubrique "passer une commande"</p><br/><br/>
    		 <h3>NB:</h3><br/><br/><p> la livraison se fera (dans le térritoire nationnal) par notre personnel et C'EST GRATUIT!!. Aussi, un service après vente a été mis en place pour la suivie des produits achetés. En cas d'insatisfaction sur le produit acheté,sur un delai de deux semaine à compter à partir du jour de l'achat, le client peut nous interpeler et il sera remboursé<br/>En cas de besoin, nos contacts sont disponibles dans la rublique <u>contacts</u><br/>Si vous voulez faire partie de nos clients fidéles(plus avantageux), il faudra s'enregister dans le rubrique "s'enregistrer maintenant". Pour l'amelioration de nos produits, vos commentaires et suggestions seront indispensables, vous pouvez les faire dans le rubrique "Commentaires et suggestions"</p></div>
    		 </section> 
    		 <footer>
    		  <div align="left">crée le 20/02/2016<br/> Avec l'aide financiére de Edouard latouffe</div>
    		 <div align="center">Propriètére: Mr Samba seck</div>
    		 <div align="right">Developpeur: Mamadou ndene diop</div>
    		 <div align="right">le contacter: 77 7693128 </div>
     
    		 </footer>
    		 </header>
     
      </body>
    </html>

    CODE CSS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    h1{
     text-align: center;
    }
    nav ul li {
       display: inline-block;
       width: 15%;
       }
    nav a{ 
       text-decoration: none;
       color: red;
       }
       nav  ul{
       width:100%;
       height:25px;
       background-color: black;
       padding-top: 1em ;
       border: 1em;
       }
    footer {
       height: 90px;
       background:black;
       color:red;
       clear:both;
       margin-top: 60%;
       }
    body{
     background-image: url("image/ndene.jpg");
     background-attachment: fixed;
     background-repeat: no-repeat;
    }
    h1,h2{
      color: black;
      text-shadow: 0px -1px 5px #FFF, 0px -2px 10px yellow, 0px -20px 20px red, 0px -30px 40px red;
    }
    p {
    font-size: 24px;
    }
    h3{
    text-decoration: overline;
    color: red;
    }
    h2 {
    font-size: 24px;
    color: red;
    }
    nav a:hover{
    color: white;
    border-bottom: 3px solid red;
    }
    nav li {
    margin-right: 15px;
    }

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 949
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 949
    Points : 25 532
    Points
    25 532

    Par défaut

    Bonjour,
    ... les éléments se dispersent et se mélangent ...
    il serait également bon que tu nous précises de quels éléments tu parles, les items du menu !?!

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2016
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : Sénégal

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : juillet 2016
    Messages : 55
    Points : 33
    Points
    33

    Par défaut

    Comme le montre la deuxième image, les elements de mon nav sont desorganisés une fois la page du navigateur réduite

  6. #6
    Membre éprouvé
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2015
    Messages
    549
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : novembre 2015
    Messages : 549
    Points : 1 152
    Points
    1 152

    Par défaut

    Hello

    Mmmh. Je vais essayer d'être le plus claire possible.

    1.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="commentaire et suggestion.html">
    ---> a éviter. Pas d'espace entre les différents noms de fichiers, au-delà du fait que ça peut provoquer des dis-fonctionnements, c'est avant tout une norme.
    2. Mais si je commence à parler de norme... Je vais te faire repartir à zéro. En effet, le problème qui se pose ici, est du responsive.

    J'ignore quelles sont tes connaissances par rapport au langages du web ainsi qu'au responsive, mais visiblement il manque quelques trucs...

    Autant te dire que tu vas avoir du boulot pour obtenir quelque chose de propre. Je te conseille donc de te renseigner sur Bootstrap, qui dispose d'un système de grille qui permet une responsivité relativement correcte. (correcte, tout le monde ne peut être satisfait par un CMS, je ne veux frustrer personne)

    Dans l'état actuel, et rendre ta page responsive avec du CSS "fait-main", ça me paraît un peu ambitieux.

    Bon courage, see yaa
    Un fait toujours plaisir et encourage à l'entraide. Un n'est pas à négliger, pensez aux autres !

    Anciennement magicarpe44, Leviathor incoming...

    Que la force soit avec Developpez.net

  7. #7
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2016
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : Sénégal

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : juillet 2016
    Messages : 55
    Points : 33
    Points
    33

    Par défaut

    Merci pour les suggestions, peutêtre qu'un underscor suffira pour supprimer les espaces. Bootstrap? Je connai mais superficiellement. Je ferai des recherches le consernant, par contre une autre suggestion sera la bienvenue

  8. #8
    Membre éprouvé
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2015
    Messages
    549
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : novembre 2015
    Messages : 549
    Points : 1 152
    Points
    1 152

    Par défaut

    Si tu veux d'autres suggestions regarde du côté des media-queries en CSS
    Un fait toujours plaisir et encourage à l'entraide. Un n'est pas à négliger, pensez aux autres !

    Anciennement magicarpe44, Leviathor incoming...

    Que la force soit avec Developpez.net

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 949
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 949
    Points : 25 532
    Points
    25 532

    Par défaut

    Il ne faut pas être aussi négatif, les modifications à apporter sont somme toute mineures pour rendre exploitable ton menu !

    Certaines choses sont à supprimer et d'autres à ajouter, je te mis ci dessous le CSS, commenté, avec les corrections à apporter
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    nav ul {
      width: 100%;
    /*  height: 25px;         /* à supprimer */
    /*  padding-top: 1em;     /* à supprimer */
      border: 1em;
      background-color: black;
     
      text-align: center;     /* à ajouter */
      line-height: 1.5em;     /* pour éclaircir le menu */
    }
    nav ul li {
    /*  display: inline-block; /* à modifier voir ci-après */
    /*  width: 15%;            /* à modifier voir ci-après  */
     
      display: table-cell;
      width: 1%;
    }
    nav li {
    /*  margin-right: 15px;    /* à supprimer */
    }
    La méthode de rendu via un display: table-cell a été approchée dans cette discussion...

  10. #10
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2016
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : Sénégal

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : juillet 2016
    Messages : 55
    Points : 33
    Points
    33

    Par défaut

    Nosmoking chapeau, je vous remercie. Merci a tout ce qui ont participé á ce forum, pour vos suggestions et proposition!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Ajuster des pages Web selon la taille de l'écran
    Par aminemsaken dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 24/02/2014, 14h46
  2. [JSP][WEB] recuperer le contenu d'une page web
    Par ypikahe dans le forum Servlets/JSP
    Réponses: 6
    Dernier message: 14/03/2008, 11h10
  3. [Réseau]Récupération de page Web
    Par n1c0las dans le forum IO
    Réponses: 4
    Dernier message: 27/03/2004, 19h15
  4. ouvrir une page Web en mode texte
    Par Halleck dans le forum Windows
    Réponses: 7
    Dernier message: 03/03/2004, 16h08
  5. Réponses: 3
    Dernier message: 28/10/2003, 15h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo