Bonjour,

J'ai le CSS d'un site à faire comme travail de fin d'année dans le cadre de mes études d'infographie.

J'ai fini la feuille de style pour mes deux pages html.

J'ai cependant un gros problème, quand je teste mon site sur un écran avec un zoom différent du miens ou que je zoom sur mon écran certains éléments se déplacent n'importe où.

j'espère que l'un (e) d'entre vous pourra m'aider

Bonjour,

sans ton code on ne peut absolument pas t'aider… Merci de le poster, en utilisant le bouton </> ; ou mieux encore, de nous donner une page en ligne.

Voici mon code css, malheureusement, je ne peux pas le mettre en ligne car je ne sais pas faire de serveur.

/* hepl/css-twobytes
 *
 * css/styles.css
 */

/* GoogleFonts import */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,700,700italic,400italic|Amaranth:400,700,400italic);
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 header div{
	width:960px;
	margin: auto;
	text-align:left;
}
/*fin du reset*/

/*page 1 : index.html*/

.home h1{ /*logo twobytes*/
	padding-top:110px;
}

 nav h2{ /*Main navigation*/
	visibility: hidden;
}

.home header{ /*image de fond*/
	margin-top: 0;
	margin-bottom: 0;
	width:100%;
	height:980px;
	background-image: url(.././images/header-bcg.jpg);
	background-size:cover;
	background-repeat: no-repeat;
}

.home header:after { /*bannière bleue en bas du header*/
	content: "";
	background: url(.././images/horizontal-rule-bcg.png) repeat-x;
	display: block;
	height: 6px;
	position: relative;
	top:200px;
}

.inner ul { /*menu horizontal*/
	display: inline;
	list-style: none;
	text-align: right;
	font-size: 1em;
	position: relative;
	left: 500px;
	bottom: 90px;	
}

li { /*éléments du menu horizontal*/
	display: inline-block;
	padding: 0.25em 0.5em;
	font-family: Open Sans, Amaranth,Verdana;
	font-size: 1em;
	font-weight: bolder;
	text-transform: uppercase;	
}

li a { /*liens du menu horizontal*/
	color: white;
	text-decoration: none;
}

li a:hover, li a:focus, li a:active{ 
	border-top:5px solid rgb(74,202,255);
}

form legend{ /* I'm looking for...*/
	padding-top:200px;
	padding-bottom: 30px;	
	font-family: Amaranth,Open Sans, Verdana;
	font-size: 3.4em;
	font-style:italic;
	color: white;	
}

form .search-options{ /*options du formmulaire : Full time, part time, casual, freelance*/
	padding-top: 2.5em;
	font-family: Open Sans,Amaranth, Verdana;
	font-style: italic;
}

/*stylisation des cases à cocher : début*/
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked { /*cacher les cases à cocher de base*/
  position: absolute;
  left: -9999px;
}

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label { /*position des labels des cases à cocher*/
	color: white;
	position: relative; 
  	padding-left: 2em; 
}

[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before { /*création des nouvelles cases à cocher*/
  content: '';
  width: 15px; 
  height: 15px; 
  border: 1px outset white;
  background: white;
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px; 
  -o-border-radius: 3px; 
  -ms-border-radius: 3px; 
  border-radius: 3px; 
  position: absolute;
  left:0; 
  top: 2px;  
}

[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after { /* création de la "validation" des cases à cocher*/
  content: '✔';
  font-size: 14px;
  color: black;
  position: absolute;
  top: 2px; 
  left: 2px;
}

[type="checkbox"]:not(:checked) + label:after { /*checkbox no cochée est vide*/
  opacity: 0; /* coche invisible */
  transform: scale(0); /* mise à l'échelle à 0 */
}

[type="checkbox"]:checked + label:after { /*checkbox cochée contient un "V"*/
  opacity: 1; /* coche opaque */
  transform: scale(1); /* mise à l'échelle 1:1 */
}
/*stylisation des cases à cocher : fin*/

div.search-query label { /*cacher Job description*/
	visibility: hidden;
}

#options-part-time { /*cacher la 2e checkbox qui restait visible*/
	visibility: hidden;
	position:relative;
}

label[for="options-part-time"]{ /*mise en place du label*/
	position:relative;
	left:6.5em;
	bottom: 1.15em;
}

 #query{ /*barre de recherche  du formulaire*/
 	margin-top:45px;
	width:870px;
	height: 50px;
	border-style:outset;
	border-color: white;
	border-width: 3px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	border-radius: 2px;
	font-family: Open Sans,Amaranth Verdana;
	font-size: 1.125em;
	font-style: italic;
	font-weight: lighter;
	text-indent: 10px;
}

.search-submit button{ /*bouton Search*/
	width:140px;
	height: 58px;
	font-family: Open Sans,Amaranth, Verdana;
	font-size: 1.25em;
	font-style: italic;
	border-style:outset;
	border-color: rgb(74,202,255);
	border-width: 3px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	border-radius: 2px;
	background-color:rgb(74,202,255);
	color:white;
	position:relative;
	bottom: 6.6em;
	left:45.5em;
}

div .search-submit:after { /*icône de loupe*/
	content: "";
	background: url(.././images/search-icon.png) no-repeat;
	display: block;
	width:15px;
	height: 15px;
	position:relative;
	bottom:168px;
	left:925px;
}

section{ /*partie principale*/
	background-color:rgb(247,247,247);
	color:rgb(80,80,80);
}

.inner h2 span { /*We're leaders in*/
	visibility:visible;
	display: block;
	padding-top:97px;
	padding-bottom: 26px;
	font-family: Amaranth,Open Sans, Verdana;
	font-size: 1em;
	font-style: italic;
	text-align: center;
}

.inner h2 strong{ /*Creative Digital Recruitment*/
	visibility:visible;
	display: block;
	padding-bottom: 70px;
	font-family: Amaranth,Open Sans, Verdana;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
}

section p{ /*les paragraphes de la section*/
	padding-top: 3em;
	line-height: 25px;
	font-family: Open Sans,Amaranth, Verdana;
}

h2+p { /*premier paragraphe de la section*/
	display: inline-block;
	margin-right: 0.5em;
	margin-top: 4.6em;
	float: left;
	width: 300px;
	text-align: right;
	font-size: 1.125em;
	position: relative;
	left:23em;
	bottom:7em;
}

h2+p+p { /*second paragraphe de la section*/
	display: inline-block;
	margin-top: 4.6em;
	margin-left: 0.5em;
	float: right;
	width: 300px;
	text-align: left;
	font-size: 1.125em;
	position: relative;
	right: 23em;
	bottom: 7em;
}

.call-to{  /*call to action: Find out more about us*/
	padding-top: 190px;
	padding-bottom: 150px;
	text-align: center;
}

.call-to a{ /*stylisation du lien call to action: Find out more about us*/
	padding:20px 40px 20px 40px;
	border: 2.5px solid rgb(74,202,255);
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-o-border-radius: 7px;
	-ms-border-radius: 7px;
	border-radius: 7px;
	font-size: 0.93em;
	font-weight: bold;
	font-family: Open Sans,Amaranth, Verdana;
	text-decoration: none;
	text-transform: uppercase;
	color: rgb(74,202,255);
}

section:after { /*bannière bleue après la section*/
	content: "";
	background: url(.././images/horizontal-rule-bcg.png) repeat-x;
	display: block;
	width:100%;
	height: 6px;
}

aside{ 
	background-color: rgb(19,28,37);
}

aside form legend{ /*Subscribing*/
	visibility: hidden;
}

 #newsletter h2{ /*Subscribe to Our Job Seeker Mailing List*/
	visibility: visible;
	font-family: Amaranth,Open Sans, Verdana;
	font-size:1.125em;
	text-align: center;
	color: white;
	position: relative;
	top: 143px;
}

form .subscribe-email { /*formulaire*/
	position:relative;
	bottom:150px;
	text-align: center;
}

.subscribe-email label{ /*Your Email*/
	display: block;
	padding: 15px;
	font-family: Open Sans,Amaranth, Verdana;
	font-size: 0.875em;
	font-style: italic;
	color: white;
	position: relative;
	right: 130px;
	top:50px;
}

[type="email"]{ /*stylisation de l'input type email*/
	padding: 15px;
	border: 2px solid  rgb(74,202,255);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
	width:300px;
	font-style: italic;
	background-color:rgb(19,28,37);
	color:grey;
	position: relative;
	top:50px;		
}

/*tentative de remplacement du placeholder*/

/*.div input::placeholder{
 	color:rgb(19,28,37);
 }

.subscribe-email input::after{
	content:"me@company.com";
	color:red;
	position: absolute;
	top:20px;
}*/

.subscribe-submit button{ /*stylisation du bouton d'envoi subscribe (send)*/
	padding-left: 2em;
	width:117px;
	height: 50px;
	border: 3px solid rgb(74,202,255);
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	border-radius: 2px;
	font-size: 0.875em;
	font-family: Open Sans,Amaranth, Verdana;
	font-weight: bold;
	background-color:rgb(74,202,255);
	color:rgb(74,202,255);
	position: relative;
	left: 57.7em;
	bottom:10.7em;
}

.subscribe-submit button:before{ /*icône d'envoi*/
	content: "";
	background: url(.././images/send-icon.png);
	display: block;
	width:16px;
	height: 13px;
	position: relative;
	top:16px;
	right: 5px
}

.subscribe-submit button:after{ /*transformation du texte "Subscribe" en "Send"*/
	content: "Send";
	display: block;
	color:white;
	position: relative;
	bottom:20px;
	right: 1px
}

.home aside:before{ /*petite barre bleu sous "Creative Digital Recruitment"*/
	content: "";
	display: block;
	width: 138px;
	height: 5px;
	background-color:rgb(74,202,255);
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	-o-border-radius: 1px;
	-ms-border-radius: 1px;
	border-radius: 1px;
	position: relative;
	left: 695px;
	bottom: 400px;
}

aside:after { /*bannière bleue en bas du aside*/
	content: "";
	background: url(.././images/horizontal-rule-bcg.png) repeat-x;
	display: block;
	height: 6px;
}

footer{ /*bas de page*/
	margin: auto;
	padding: 52px;
	width:960px;
	text-align:left;	
}

.home footer:after { /*icône de mail*/
	content: "";
	background: url(.././images/mail-icon.png) no-repeat;
	display: block;
	width:21px;
	height: 17px;
	position: relative;
	bottom: 105px;
}

footer p{ /*paragraphes du bas de page*/
	font-family: Open Sans,Amaranth, Verdana;
	color:rgb(80,80,80);	
}

.footer-contact{ /*hello@twobytes.com.au*/
	text-decoration: none;
	font-size:0.875em;
	font-weight: bold;
	color:rgb(80,80,80);
	position: relative;
	left:30px;
}

.footer-copy{ /*Copyright 2014 Twobytes Consulting*/
	padding-top: 30px;
	font-size: 0.875em
}
.footer-copy a{ /*Terms and Policies*/
	text-decoration: none;
	font-weight: bold;	
	color:rgb(80,80,80);
}

/*page 2: about-us.html*/

article{ /*contenu principal*/
	margin: auto;
	width:960px;
	text-align:left;
	font-family: Open Sans,Amaranth, Verdana;
	color:rgb(80,80,80);
}

header{ /*image du header*/
	margin-top:-470px;
	width:100%;
	height:730px;
	background-image: url(.././images/header-bcg.jpg);
	background-size:cover;
	background-repeat: no-repeat;
}

h1{ /*repositionnement du logo Twobytes*/
	padding-top:590px;
}

header:after { /*bannière bleue après le header*/
	content: "";
	background: url(.././images/horizontal-rule-bcg.png) repeat-x;
	display: block;
	height: 6px;
	position: relative;
	top:20px;
}

article h2 /* about us... et Two Bytes Consulting, a Great Company*/{
	font-family: Amaranth,Open Sans, Verdana;
	padding-top:35px;		
}

span /*about us*/{
	display: block;
	font-size: 30px;
	font-style:italic;
	font-weight: normal;
	line-height: 60px;
}

[itemprop="legalName"] /*Two Bytes Consulting*/{
	display: inline;
	font-size: 1em;
	font-style: normal;
	font-weight:bold;
}

h2 /*, a Great Company*/{
	font-size: 2.81em;
	font-style: normal;
	font-weight:bold;
}

figure:before{ /*barre bleu avant l'image*/
	content: "";
	display: block;
	width: 138px;
	height: 5px;
	background-color:rgb(74,202,255);
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	-o-border-radius: 1px;
	-ms-border-radius: 1px;
	border-radius: 1px;
	position: relative;
	top:15px;
}

 figure img{ /*image*/
 	padding-top: 67px;
	width:320px;
	height: 216px;
}

figure figcaption{ /*légende de l'image : Yes, we like blurry-sepia images…*/
	padding: 5px 5px 5px 50px;
	font-weight: normal;
	font-style:italic;
	font-size: 14px;	
}

figure+p{ /*premier paragraphe*/
	margin: -20em 0.5em 0.5em 20em;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5em;
}

figure:after{ /*barre bleu verticale à gauche de citation*/
	content: "";
	display: block;
	width: 5px;
	height: 120px;
	background-color:rgb(74,202,255);
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	-o-border-radius: 1px;
	-ms-border-radius: 1px;
	border-radius: 1px;
	position: relative;
	left:22em;
	bottom:7.5em;
}

blockquote p:before{ /*Guillement gauche*/
	content: "\00201C"
}

blockquote p:after{ /*Guillement droit*/
	content: "\00201D ";
}

blockquote{ /*longue citation et auteur*/
	margin: 20px 5px 5px 380px;
	padding-top: 15px;
	font-family: Amaranth,Open Sans, Verdana;
	font-size: 24px;
	font-style: italic;
	font-weight: normal;
	line-height: 1.5em;	
}

cite{ /*auteur de citation:"Abraham Lincoln"*/
	padding-left:400px;
	font-family: Open Sans,Amaranth, Verdana;
	font-style:normal;
	font-size: 18px;
	font-weight: bold;	
}

blockquote+p:before{ /*petit point bleu avant "Abraham Lincoln"*/
	content: "";
	display: block;
	width:5px;
	height: 5px;
	background-color:rgb(74,202,255);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
	position: relative;
	left:420px;
	bottom:40px;
}

blockquote+p{ /*second paragraphe (le plus grand)*/
	margin: 20px 5px 5px 350px;
	line-height: 1.5em;
	font-size: 16px;
}

p strong{ /*ipsum primis*/
	font-weight: bold;
}

p em{ /*vestibulum*/
	font-style: italic;
}

table{ /*tableau*/
	margin: 20px 5px 5px 350px;
	width:619px;	
}

thead tr td,thead tr th{ /*bordure sous en-tête du tableau*/
	border-bottom: 5px solid rgb(74,202,255);
	padding-bottom: 20px;
}

caption{ /*légende du tableau : Our scoreboard for the last few years*/
	margin-top: 10px;
	padding:5px;
	font-size: 16px;
	font-weight: bold;
	font-style: italic;
	caption-side: bottom;
}

caption:after{ /*point après la légende du tableau*/
	content: "\00002E"
}

thead{ /*en-tête du tableau*/
	font-size: 16px;
	font-weight: bold;
}
 
 tbody tr:nth-child(2n+1) { /*effet zébré*/
	background-color: rgb(230,230,230);
}

th{ /*table header*/
	font-size: 16px;
	font-weight: bold;
}

td,th{ /*table data et table header*/
	padding:10px;	
	text-align: center;
}
 
table+p{ /*troisème et dernier paragraphe*/
	margin: 20px 5px 100px 350px;
	line-height: 1.5em;
}

main:after { /*bannière bleue après le main*/
	content: "";
	background: url(.././images/horizontal-rule-bcg.png) repeat-x;
	display: block;
	width: 100%;
	height: 6px;
}

footer:after { /*icône de mail*/
	content: "";
	background: url(.././images/mail-icon.png) no-repeat;
	display: block;
	width:21px;
	height: 17px;
	position: relative;
	bottom: 60px;
}

/*fin du code*/

Tu as énormément de position: relative avec left, top ou bottom. Ce n'est pas comme ça qu'on place les éléments : une page web ce n'est pas un diaporama

D'accord mais je les place comment alors? car les éléments auxquelles j'en ai mis ne se mettaient pas bien avec les margin padding ect ? :/

Est-ce que tu peux montrer ce que tu cherches à obtenir ? Un schéma, un griffonnage, ou autre.

Voici les deux pages

-
Edité par Shinkaii 6 juin 2018 à 16:55:24

Utilise les flexblox, plus simple et efficace :

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox

je vais essayer ça merci