Partage
  • Partager sur Facebook
  • Partager sur Twitter

adapter sa page web avec la taille de l'écran

TheMister7301
    11 mars 2018 à 20:32:39

    Bonjour, j'écrit sur ce site car j'ai un problème au niveau de mon site car quand je passe d'un écran à l'autre tout se que j'ai modifier sur un écran se déplace sur l autre se que je veux dire par la ses que j'ai beau mettre des dimensions pour que sur un écran sa rend super bien sur l autre tout sera décaler et cela ne fais pas très beau es que vous pourriez m aider a régler se problème .
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      11 mars 2018 à 21:04:51

      Salut ,

      Pour commencer si tu nous montrais ton code on pourrait déjà t'aider .

      Ce sera une perte de temps en moins pour toi comme pour nous .

      • Partager sur Facebook
      • Partager sur Twitter
      oyefort
        11 mars 2018 à 21:09:27

        Bonjour,

        En CSS on utilise les Media Queries qui sont des propriétés destinées à optimiser l'affichage en fonction de l'affichage utilisateur. On parle alors de responsive design

        Un chapitre du cours explique très bien comment les employer:

        https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries

        -
        Edité par oyefort 11 mars 2018 à 21:21:48

        • Partager sur Facebook
        • Partager sur Twitter
        TheMister7301
          11 mars 2018 à 22:24:29

          CODE: HTML
          <html>
              <head>
              <title></title>
              <meta charset="utf-8">
              <link rel="stylesheet" type="text/css" href="styles.css">
              <script type="text/javascript" src="js/heure.js"></script>
              </head>
              <body class="b-cont">
              <nav class="Menu">
                  <ul>
              <li class="menu-acceuil">
              <a href="index.html"> <p> Accueil </p> </a>
              </li>
              <li class="menu-boutique">
                  <a href="boutique.html"> <p> Les Commandes </p> </a>
              </li>
              <li class="menu-contact">
              <a href="contact.html"> <p> Contactez-nous </p> </a>
              </li>
              </ul>
              <div id="horloge"></div>
              </nav>
              <div id="Contactez-nous">
                  <div id="titre-Contact">
                 <p>Vous pouvez nous rejoindre à partir des informations données ci-dessous.</p>
                  </div>
                  <div id="Contact-appel">
                      <div id="Contact-appel1">
                          <img src="img/cell.png">
                     <p> Appelez-nous </p>
                      </div>
                      <div id="Contact-appel2">
                     <p> Mobile: </p>
                     <p> Mobile: </p>
                     <p> Semaine: </p>
                     <p> Fin de semaine: </p>
                      </div>
                  </div>
                  <div id="Contact-mail">
                 <div id="Contact-mail1">
                     <img src="img/mail.png">
                     <p> Envoyez-nous par mail </p>
                 </div>
                 <div id="Contact-mail2">
                 <p> Mail:  </p>
                 </div>
                  </div>
              </div>
                  <div class="bas">
                  <div id="copyrighttext">
                          Copyright ©, !
                      </div>
                      <div id="creation">
                     Creation: TheMister730
                      </div>
                  </div>
              </body>
          </html>
          CODE: CSS
          /*Page*/

body{
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100%;
	font-family: 'Source code pro', Calibri, serif;
	margin: 0%;
	padding: 0%;
	max-width: 4000px;
	max-height: 4000px;
}
.bas{
	background-color: black;
	margin-top: 0.55%;
}
#copyrighttext{
	font-size: 21px;
	color: white;	
}
#creation{
	font-size: 20px;
	color: blue;
}
/*Navigation*/

nav{
	width: 100%;
	background-color: #424558;
	position: sticky;
	top: 0;
}
nav ul{
	margin: 0px;
	padding: 0px;
}
nav ul::after{
	content: "";
	display: block;
	clear: both;
}
nav ul li{
	float: left;
}
nav ul li{
	float: left;
	position: relative;
}
nav li{
	list-style-type: none;
}
nav a{
	display: inline-block;
	text-decoration: none;
}
nav ul li a{
	padding: 20px 30px;
	color: #FFF;
}
nav li:hover .submenu{
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0px;
	z-index: 100000;
}
nav ul li:hover a{
	padding: 15px 30px 20px 30px;
}
.submenu{
	display: none;
}
.submenu li{
	border-bottom: 1px solid #CCC;
}

.submenu li a{
	padding: 15px 30px;
	font-size: 13px;
	color: #222538;
	width: 270px;
}
.menu-acceuil:hover{
	border-top: 5px solid #e44d26;
	background-color: rgba(228, 77, 38, 0.15);
}
.menu-contact:hover{
	border-top: 5px solid #0070bb;
	background-color: rgba(000, 112, 192, 0.15);
}
.menu-boutique:hover{
	border-top: 5px solid #f1dc4f;
	background-color: rgba(241, 211, 79, 0.15);
}
.menu-actu:hover{
	border-top: 6px solid #BBB;
	background-color: rgba(220, 220, 220, 0.15);
}
.menu-acceuil .submenu{
	background-color: rgb(230, 100, 40);
}
.menu-contact .submenu{
	background-color: rgb(000, 160, 240);
}
.menu-boutique .submenu{
	background-color: rgb(251, 216, 99);
}
.submenu li:hover a{
	color: #EEE;
	font-weight: bold;
}
.menu-acceuil .submenu li:hover{
	background-color: rgb(210, 77, 60);
}
.menu-contact .sebmenu li:hover{
	background-color: rgb(000, 115, 200);
}
.menu-boutique .submenu li:hover{
	background-color: rgb(200, 165, 75);
}
.t-sub{
	font-size: 17px;
	color: white;
}
.t-sub:hover{
	font-size: 17px;
	color: black;
}

/*Contact*/

.b-cont{
	background-color: rgb(179, 182, 183);
    width: 100%;
	background-size: 100%;
	font-family: 'Source code pro', Calibri, serif;
	margin: 0%;
	padding: 0%;
}
#titre-Contact p{
	font-size: 30px;
	font-family: Blackletter,fantasy;
	font-style: bold;
	margin-left: -58.5%;
}
#Contact-appel1 p{
	margin-top: -10.3%;
	margin-left: 18%;
	font-size: 30px;
}
#Contact-appel2 p{
	font-family: fantasy;
	font-size: 25px;
	font-weight: bold;
	margin-right: 10%;
}
#Contact-mail1 p{
	margin-top: -10.3%;
	margin-left: 18%;
	font-size: 30px;
}
#Contact-mail2 p{
	font-size: 25px;
	font-weight: bold;
	margin-right: 10%;
	margin-top: 30%;
	font-family: fantasy;
}
#Contact-appel1 img{
	width: 14.5%;
	height: 7%;
	margin-top: 4%;
}
#Contact-mail1 img{
	width: 14.5%;
	height: 7%;
	margin-top: 4%;
}
#Contactez-nous{
	margin-top: 12%;
	margin-left: 48%;
}
#Contact-appel{
	margin-left: -50%;
}
#Contact-appel1{
	display: inline-block;
	border-style: solid;
	border-width: 0px;
	width: 31.7%;
	background-image: url(img/back-contact1.png);
}
#Contact-appel2{
	margin-top: -0.6%;
	border-width: 5px;
	border-style: solid;
	border-color: white;
	width: 30.9%;
	height: 33.32%;
	background-color: rgb(236, 240, 241);
}
#Contact-mail{
	margin-top: -44%;
	margin-left: 1%;
}
#Contact-mail1{
    display: inline-block;
	border-style: solid;
	border-width: 0px;
	width: 48%;
	background-image: url(img/back-contact1.png);
}
#Contact-mail2{
	margin-top: -0.6%;
	border-width: 5px;
	border-style: solid;
	border-color: white;
	width: 46.7%;
	height: 33%;
	background-color: rgb(236, 240, 241);
}

/*Horloge*/

#horloge{
	margin-left: 95%;
	margin-top: -2.43%;
	font-size: 30px;
}

/*Diaporama*/

#diapo{
	margin: 0 auto;
	width: 960px;
	height: 500px;
	border: 5px solid #333;
	background-image: url(img/image1.jpg);
	background-repeat: no-repeat;

	-webkit-animation-name: diapo;
	-webkit-animation-duration: 9s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;

	-moz-animation-name: diapo;
	-moz-animation-duration: 9s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction;

	animation-name: diapo;
	animation-duration: 9s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
@-webkit-keyframes diapo{
	0%{background-image: url(img/image1.jpg);}
	33%{background-image: url(img/image2.jpg);}
	66%{background-image: url(img/.jpg);}
	99%{background-image: url(img/.jpg);}
}
@-moz-keyframes diapo{
	0%{background-image: url(img/image1.jpg);}
	33%{background-image: url(img/image2.jpg);}
	66%{background-image: url(img/image3.jpg);}
	99%{background-image: url(img/image4.jpg);}
}
@keyframes diapo{
	0%{background-image: url(img/image1.jpg);}
	33%{background-image: url(img/image2.jpg);}
	66%{background-image: url(img/image3.jpg);}
	99%{background-image: url(img/image4.jpg);}
}
          • Partager sur Facebook
          • Partager sur Twitter

          adapter sa page web avec la taille de l'écran

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown