Ajustement de la page web

Version imprimable

03/11/2017, 19h38
wexndene

2 pièce(s) jointe(s)

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 Pièce jointe 324548 une fois l'écran réduite Pièce jointe 324549 :? tout est en désordre. merci de me proposer un solution.
04/11/2017, 08h11
JefReb

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

CODE HTML

Code:

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:

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;
}

07/11/2017, 10h42
NoSmoking

Bonjour,

Citation:

... 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 !?!
07/11/2017, 13h04
wexndene

Comme le montre la deuxième image, les elements de mon nav sont desorganisés une fois la page du navigateur réduite
07/11/2017, 13h20
JujuPomme

Hello

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

1.

Code:

<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
07/11/2017, 13h41
wexndene

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
07/11/2017, 14h31
JujuPomme

Si tu veux d'autres suggestions regarde du côté des media-queries en CSS

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:

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...

07/11/2017, 17h09
wexndene

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