Partage

Marge blanche grandit lorsque la fenêtre diminue

Une marge qui évolue en fonction de la taille de la fenêtre

10 septembre 2019 à 19:14:47

Bonjour,

désireux d'avoir un site propre avec un écran petit ou grand, je teste mon site avec une fenêtre de petite taille sur mon ordinateur.

Un phénomène apparaît que je n'arrive pas à comprendre : lorsque la fenêtre est "normale" (plus large que 900 px), la mise en page est ok. Lorsque je diminue fortement la largeur de la fenêtre, une marge blanche apparaît en bas de page. Sa hauteur est inversement proportionnelle à la largeur de la fenêtre : plus je réduis la fenêtre, plus la marge augmente!

Voici un code test qui présente ce défaut :

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="TestStyle.css" />
		<!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
		<link rel="shortcut icon" href="logo.ico">
		<title>THOMAS Gabriel - Portfolio Projets</title>
		<meta name="Description" content="Bonjour" />
	</head>
    
    <body>
        <section class="Projets">

			<section class="ProjetConteneur">
			    <div class="ProjetBandeau">
			        <a href="Projets/Littaye/VueGlobale.jpg"><img src="Projets/Littaye/VueGlobale.jpg" /></a>
			    </div>
			    <div class="ProjetTitreDescriptionConteneur">
			        <div class="MargesGauche"></div>
			        <div class="ProjetTitre">
			            <h1>Titre du Projet</h1>
			        </div>
			    </div>
			    <div class="ProjetTitreDescriptionConteneur">
			        <div class="MargesGauche2"></div>
			        <div class="ProjetDescription">
			            <p><strong>Programme :</strong> test</p>
			            <p><strong>Maître d'Ouvrage :</strong> test</p>
			            <p><strong>Surface</strong> : test</p>
			            <p><strong>Mission</strong> : test</p>
			        </div>
			    </div>

			    <div class="ProjetTitreDescriptionConteneur">
			        <div class="MargesGauche"></div>
			        <div class="ProjetSousTitre">
			            <p><strong>///////////</strong></p>
			            <h2>Sous Titre Test</h2>
			        </div>
			    </div>
			    <a href="Projets/Littaye/LocalisationLittaye.jpg"><img class="Grand" src="Projets/Littaye/LocalisationLittaye.jpg" /></a>
			    <img src="Projets/Littaye/Situation.jpg" class="MargesTop Moyen"/>
			</section>
		</section>
	</body>
</html>

et le CSS

html, body{
    background-color: #EEEEEE;
    text-align : center;
    margin: 0;
    padding: 0;
    color: #393E46;
    font-family: Roboto, SansSerif;
    font-size : 1em;
}

.Projets{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.ProjetConteneur{
    width: 100%;
    max-width: 900px;
    background-color: white;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ProjetBandeau{
    width: 100%;
    max-width: 900px;
}

.ProjetBandeau a img{
    width: 100%;
}

.ProjetTitreDescriptionConteneur{
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
}

.MargesGauche{
    width: 100%;
    max-width: 50px;
    height: 1px;
}

.ProjetTitre{
    width: 90%;
    max-width: 400px;
    margin-top: 70px;
    border-left: 1px solid #393E46;
    background-color: #393E46;
    margin-bottom: 50px;
}

.ProjetDescription{
    width: 100%;
    max-width: 350px;
    text-align: left;
}

.ProjetSousTitre{
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 500px;
    margin-top: 150px;
    margin-bottom: 25px;
}

.ProjetSousTitre p{
    width: 100%;
    max-width: 71px;
    height: 17px;
    text-decoration: none;
    color: white;
    background-color: #393E46;
    margin-right: 10px;
}

.Grand{
    width: 100%;
    max-width: 900px;
}

.MargesTop{
    margin-top: 50px;
}

-
Edité par barback 11 septembre 2019 à 11:02:17

supersurviveur

10 septembre 2019 à 20:43:45

Même problème mon site sur ordinateur n'as aucune marge mais il y en a une sur téléphone.

ThibaudRoussel

11 septembre 2019 à 10:26:42

Bonjour,

Je m'excuse mais je ne pourrais pas lire 1000 ligne de css. Pour ton problème plusieurs solutions soit tu redefinis la taille de cette marge avec un mediaQuery soit tu remplaces le height qui était en px ou % ou autre.. en vw. Celui-ci va adapter la hauteur en fonction de la largeur de la page pour avoir une hauteur plus ou moins pareil visuelement que ce soit sur un 15" ou un portable

A+

barback

11 septembre 2019 à 11:01:32

Bonjour,

merci de ta réponse! Le problème est que cette marge est inexistante avec une largeur de 900px, et apparaît avec une largeur faible (par exemple, 400px). J'ai essayé de définir cette marge par 0 ou 1 pixel, mais rien n'y fait...

Voici un CSS raccourci qui simule ce problème (peut être que cela vient du max-width?)

html, body{
    background-color: #EEEEEE;
    text-align : center;
    margin: 0;
    padding: 0;
    color: #393E46;
    font-family: Roboto, SansSerif;
    font-size : 1em;
}

.Projets{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.ProjetConteneur{
    width: 100%;
    max-width: 900px;
    background-color: white;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ProjetBandeau{
    width: 100%;
    max-width: 900px;
}

.ProjetBandeau a img{
    width: 100%;
}

.ProjetTitreDescriptionConteneur{
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
}

.MargesGauche{
    width: 100%;
    max-width: 50px;
    height: 1px;
}

.ProjetTitre{
    width: 90%;
    max-width: 400px;
    margin-top: 70px;
    border-left: 1px solid #393E46;
    background-color: #393E46;
    margin-bottom: 50px;
}

.ProjetDescription{
    width: 100%;
    max-width: 350px;
    text-align: left;
}

.ProjetSousTitre{
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 500px;
    margin-top: 150px;
    margin-bottom: 25px;
}

.ProjetSousTitre p{
    width: 100%;
    max-width: 71px;
    height: 17px;
    text-decoration: none;
    color: white;
    background-color: #393E46;
    margin-right: 10px;
}

.Grand{
    width: 100%;
    max-width: 900px;
}

.MargesTop{
    margin-top: 50px;
}

ThibaudRoussel

11 septembre 2019 à 11:52:31

Hello

Je veux bien que tu redonnes tout ton code dans ton premier post histoire que je puisse inspecter de mon coté

barback

11 septembre 2019 à 13:35:41

ça marche, j'ai édité mon premier post : il y a le HTML et le CSS "court".

Voici le CSS "long".

Par contre, dans le CSS court, le défaut que je décris est déjà présent, cela signifie que l'erreur se trouve déjà dedans!

/* Déclarations ------------------------------- */

@font-face {
	font-family: Roboto;
	src: url(Roboto-Regular.ttf);
}

@font-face {
	font-family: RobotoBold;
	src: url(Roboto-Bold.ttf);
}

@font-face {
	font-family: RobotoThin;
	src: url(Roboto-Thin.ttf);
	font-weight: 200;
}

@font-face {
    font-family: Quattrocento;
    src: url(Quattrocento-Regular.ttf);
}

/* HTML, Body --------------------------------- */

html, body{
    background-color: #EEEEEE;
    text-align : center;
    margin: 0;
    padding: 0;
    color: #393E46;
    font-family: Roboto, SansSerif;
    font-size : 1em;
}

/* Header ------------------------------------*/

header{
    top: 0;
    background-color: white;
    width: 100%;
    border-top: 5px solid #393E46;
    border-bottom: 1px solid #393E46;
    display: flex;
    justify-content : center;
}

header nav{
    width: 100%;
    max-width: 900px;
    height: 100px;
    display: flex;
    justify-content : space-between;
}

.AccueilMenu{
    width: 40%;
    max-width: 150px;
    height: 100px;
    border-right: 1px solid #393E46;
    font-size: 1.5em;
    font-family: RobotoBold;
}

.AccueilMenu a:hover{
    background-color: #222831;
    color: #EEEEEE;
}

.AccueilMenu a{
    text-decoration: none;
    color: #393E46;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.NavigationMenu{
    width: 60%;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.NavigationMenu a{
    text-decoration: none;
    color: #393E46;
    margin-right: 10px;
    margin-left: 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    max-width: 130px;
}

.NavigationMenu a:hover{
    color: #00ADB5;
}

/*  Présentation --------------------------------*/

.Presentation{
    padding-top: 100px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
}

.Presentation .ContenuPresentation{
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}

.Presentation h1{
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: Quattrocento, sans-serif;
    font-weight: 500;
    font-size: 3em;
    color: #222831;
}

.Presentation h1 strong{
    font-family: Quattrocento;
    margin-left: 20px;
}

.Presentation img{
    width: 10px;
    height: 60px;
    margin-top: 20px;
}

.PresentationLignes{
    width: 90%;
    max-width: 380px;
    display: flex;
    justify-content: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.PresentationLignesTab{
    font-family: RobotoThin;
    width: 90%;
    max-width: 290px;
    margin-top: 1px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
} 
/*

.PresentationLignesTab2{
    font-family: RobotoThin;
    width: 90%;
    max-width: 260px;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

*/

.PresentationLignesTab3{
    width: 90%;
    max-width: 200px;
    margin-top: 8px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.PresentationLignesTab4{
    width: 100%;
    max-width: 150px;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.PresentationLignesTab .ArchiUrba{
    width: 100px;
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: 1.3em;
}

.PresentationLignesTab2 .ArchiUrba{
    width: 100px;
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: 1.3em;
}

.PresentationLignesTab p{
    width: 75px;
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: 1.3em;
    font-family: RobotoThin;
}

.PresentationLignesTab2 p{
    width: 75px;
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: 1.3em;
    font-family: RobotoThin;
}

.PresentationLignesTab3 a{
    width: 100%;
    text-decoration: none;
}

.PresentationLignesTab3 p, .PresentationLignesTab4 p{
    width: 100%;
    font-size: 1em;
    margin-top: 1px;
    margin-bottom: 1px;
    font-family: Roboto;
    color: #818489;
}

/*  Invitation au Scroll Animation ------------------------------*/

.arrow{
    display: flex;
    flex-direction: column;
    align-items : center;
    margin-top: 30px;
    margin-bottom: 5px;
}
.arrow span{
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 3px solid #393e46;
    border-right: 3px solid #393e46;
    transform: rotate(45deg);
    margin: -2px;
    animation: animate 4s infinite;
}

/*
.arrow span:nth-child(2){
    animation-delay: -0.4s;
}
.arrow span:nth-child(3){
    animation-delay: -0.8s;
}

*/

@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-10px,-10px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(10px,10px);
    }
}

/*  Présentation des Ateliers --------------------------------*/

.PresentationAteliers{
    margin-top: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #393e46;
    width: 100%;
}

.PresentationAteliers .ContenuPresentationAteliers{
    width: 100%; /* Portable */
    max-width: 900px; /* Ordi */
    display: flex;
    align-items : center;
    justify-content: space-around;
    flex-wrap: wrap;
    z-index: 2;
}

.ContenuPresentationAtelierBouton{
    margin: 10px;
}

/*

.PresentationAteliersTitre{
    width: 100%;
    max-width: 900px;
    display: flex;
    justify-content: center;
}

.PresentationAteliersTitre p{
    color: #EEEEEE;
    font-family: Roboto;
    font-size: 2em;
}



.PresentationAteliers .ContenuPresentationAteliers h2, .PresentationAteliers .ContenuPresentationAteliers p{
    font-family: RobotoThin;
    font-size: 1em;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #EEEEEE;
}

.TitreContenuAteliersGras{
    width: 300px;
    border-top: 3px solid #393E46;
    margin-top: 2px;
    border-bottom: 3px solid #393E46;
    margin-bottom: 2px;
}

.TitreContenuAteliersMoyen{
    width: 300px;
    border-top: 2px solid #393E46;
    margin-top: 2px;
    border-bottom: 2px solid #393E46;
    margin-bottom: 2px;
}

.TitreContenuAteliersFin{
    width: 100%;
    max-width: 300px;
    border-top: 1px solid #393E46;
    margin-top: 2px;
    border-bottom: 1px solid #393E46;
    margin-bottom: 2px;
}

.TitreAtelier{
    margin-top: 30px;
    margin-bottom: 80px;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.TitreAtelier a{
    width: 100%;
    margin-top: 50px;
    max-width: 250px;
    text-decoration: underline;
    color: black;
    text-transform: uppercase;
    font-size: 1.1em;
}
*/

/*  Animation boutons navigation --------------*/

.ContenuPresentationAtelierBouton a {
        /*Button Text Style*/
        font-family: Roboto, sans-serif;
        font-size: inherit;
        text-align: center;
        letter-spacing: 3px;
        text-transform: uppercase;
        text-decoration:none;
        /*Button Color & Border*/
        border: 2px solid #EEEEEE ;
        color: #EEEEEE;
        background: #393e46;
        outline: none;
        /*Position, Display, Size*/
        position: relative;
        display: inline-block;
        padding: 15px 10px 14px;
        cursor: pointer;
        width: auto;
}

.ContenuPresentationAtelierBouton a:after {
        /*Make a:after be as big as button*/
        position: absolute;
        width: 100%;
        height: 100%;
        /*Give a:after Border & Background color*/
        border: 2px solid #222831;
        background-color: #222831;
        /*Decide Location of a:after..this gives a  bottom right shadow*/
        left: 4px;
        top: 4px;
        /*Place a:after behind button*/
        z-index: -1;
        content: '';
        /*Animation/Transition Speed*/
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        
}

.ContenuPresentationAtelierBouton a:hover {
        top:2px;
        left:2px;
}

.ContenuPresentationAtelierBouton a:hover:after {
        top: -2px;
        left: -2px;
}

/*  Présentation des Ateliers --------------------------------*/

.PresentationAteliersDetaille, .PresentationActuDetaillee, .PresentationService{
    margin-top: 20px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    width: 100%;
}

.ContenuPresentationAteliersDetaille{
    width: 100%; /* Portable */
    max-width: 900px; /* Ordi */
    z-index: 2;
    margin-bottom: 20px;
}

.DescriptionArchi, .DescriptionActu{
    margin-top: 50px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.DescriptionUrba, .DescriptionService{
    margin-top: 50px;
    width: 100%;
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-around;
}

.DescriptionArchi a, .DescriptionUrba a, .DescriptionActu a{
    width: 100%;
    max-width: 600px;
}

.DescriptionArchi a img, .DescriptionUrba a img, .DescriptionActu a img{
    width: 100%;
    max-width: 600px;
    margin-top: 1px;
}

.TexteArchitecture, .TexteUrbanisme, .TexteService{
    width: 100%;
    max-width: 250px;
}

.TexteArchitecture a{
    width: 100%;
    max-width: 250px;
    text-decoration: none;
    text-align: left;
}

.TexteUrbanisme a{
    width: 100%;
    max-width: 250px;
    text-decoration: none;
    text-align: right;
}

.TexteService a{
    width: 100%;
    max-width: 250px;
    text-decoration: none;
    text-align: left;
}

.TexteArchitecture h3, .TexteUrbanisme h3, .TexteService h3{
    margin-top: 1px;
    color: #393E46;
    font-family: RobotoThin, sans-serif;
    font-size: 1.7em;
    margin-bottom: 1px;
}

.TexteArchitecture h3 strong, .TexteUrbanisme h3 strong, .TexteService h3 strong{
    margin-top: 1px;
    color: #393E46;
    font-family: RobotoBold, sans-serif;
    font-size: 0.9em;
}

.TexteArchitecture p, .TexteUrbanisme p, .TexteService p{
    text-align: justify;
    color: #393E46;
}

.PresentationService{
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    width: 100%;
}

.ContenuPresentationService{
    width: 100%; /* Portable */
    max-width: 900px; /* Ordi */
    z-index: 2;
}

/*  Actu --------------------------------*/

.ActuConteneur{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #393E46;
    margin-top: 25px;
    margin-bottom: 20px;
    padding: 10px;
}

.ActuPresentation{
    width: 100%;
    max-width: 600px;
    margin-top: 30px;
    margin-bottom: 30px;
    border: 2px solid #EEEEEE;
}

.ActuTitre{
    color: white;
    font-size: 50px;
    font-family: RobotoThin;
    padding: 0px;
    margin: 0px;
    border-bottom: 2px solid #EEEEEE;
}

.ActuTri{
    color: white;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #EEEEEE;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.ActuTitre a{
    text-decoration: none;
    color: white;
}

.ActuTri form{
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
}

.ActuTri p{
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
}

.ActuTri select, option{
    background-color: #222831;
    color: #EEEEEE;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    padding: 10px;
    font-size: 1em;
    font-family: Roboto;
    cursor: pointer;
}

.ActuTri input{
    background-color: #222831;
    color: #EEEEEE;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    padding: 10px;
    font-family: Roboto;
    font-size: 1em;
    cursor: pointer;
}

/*  Article d'actualité --------------------------------*/

.ArticleConteneur{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.ArticleActu{
    background-color: white;
    width: 100%;
    max-width: 600px;
    margin-top: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #222831;
    border-top: 3px solid #222831;
    display: flex;
    flex-direction: column;
}

.ArticleTitre{
    background-color: white;
    width: 100%;
    max-width: 400px;
    margin-top: 20px;
    border-left: 1px solid #393E46;
    background-color: #393E46;
}

.ArticleTitre h1{
    color: #EEEEEE;
    font-family: RobotoThin;
    text-align: left;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 3px;
    margin-bottom: 3px;
}

.ArticleDate{
    font-size: 0.8em;
    text-decoration: underline;
    text-align: left;
    margin-left: 10px;
    margin-bottom: 0px;
}

.ArticleCorps{
    width: 100%;
    max-width: 500px;
    padding-right: 10px;
    padding-left: 10px;
    text-align: justify;
}

.ArticleCorps p{
    margin-top: 30px;
    margin-bottom: 30px;
}

.ArticleCorps img{
    width: 100%;
    max-width: 100%;
    height: auto;
}

.ArticleMotClef{
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-wrap: wrap;
    align-items : center;
}

.ArticleMotClef p{
    font-style: italic;
    color: black;
    font-size: 0.8em;
}

.ArticleMotClef a{
    text-decoration: underline;
    font-style: italic;
    color: black;
    font-size: 0.8em;
    margin-left: 10px;
}

.ArticlePage{
    width: 100%;
    max-width: 400px;
}

.ArticlePage a{
    text-decoration: underline;
    color: black;
    margin-left: 20px;
}

/* Projet  ----------------------------------- */

.Projets{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.ProjetNavigation{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-family: Roboto;
    width: 90%;
    max-width: 900px;
}

.ProjetNavigation a{
    text-decoration: none;
}

.ProjetNavigation a p{
    color: black;
    margin-top: 5px;
}

.ProjetNumero{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 90%;
    max-width: 900px;
    margin-top: 10px;
}

.ProjetNumeroTraitFin{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    max-width: 900px;/*
    border-top: 1px solid #393e46;*/
    border-bottom: 1px solid #393e46;
}

.ProjetNumeroTraitGras{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 900px;/*
    border-top: 3px solid #393e46;*/
    border-bottom: 2px solid #393e46;
    margin-bottom: 2px;
}

.ProjetNumero h2{
    font-family: Roboto, sans-serif;
    font-weight: 200;
    font-size: 2em;
    margin-bottom: 5px;
}

.ProjetConteneur{
    width: 100%;
    max-width: 900px;
    background-color: white;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.PetitTexte, .MoyenTexte, .GrandTexte{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.PetitTexte a, .MoyenTexte a, .GrandTexte a{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.PetitTexte p, .MoyenTexte p, .GrandTexte p{
    width: 90%;
    max-width: 500px;
    color: #393E46;
}

.PetitTexte a p, .MoyenTexte a p, .GrandTexte a p{
    text-decoration: underline;
}

.PetitTexte a .nonSouligne, .MoyenTexte a .nonSouligne, .GrandTexte a .nonSouligne{
    text-decoration: none;
}

.PetitTexte p{
    font-size: 0.6em;
}

.MoyenTexte p{
    font-size: 0.8em;
}

.GrandTexte p{
    font-size: 1em;
}

.ProjetBandeau{
    width: 100%;
    max-width: 900px;
}

.ProjetBandeau a img{
    width: 100%;
}

.ProjetTitreDescriptionConteneur{
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
}

.ProjetTitre{
    width: 90%;
    max-width: 400px;
    margin-top: 70px;
    border-left: 1px solid #393E46;
    background-color: #393E46;
    margin-bottom: 50px;
}

.ProjetTitre h1{
    color: #EEEEEE;
    font-family: Roboto;
    font-size: 2em;
    text-align: left;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 3px;
    margin-bottom: 3px;
}

.TitreSousPartie{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 70px; 
    width: 100%;  
}

.TitreSousPartie h2{
    width: 90%;
    color: #EEEEEE;
    padding: 5px;
    margin: 3px;
    font-size:  1.2em;
    font-family: RobotoThin, Sans-serif;
}

.FondBleu{
    background-color: #393E46;
    width: 90%;
    max-width: 400px;
    padding: 3px;
}

.TraitBlanc{
    border: 1px solid #EEEEEE;
    width: 99%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.TitreSousPartie h2{
    width: 300px;
}

.ProjetDescription{
    width: 100%;
    max-width: 350px;
    text-align: left;
}

.ProjetDescription p{
    margin-top: 0px;
    margin-bottom: 0px;
    border-top: 1px solid #393E46;
}

.ProjetSousTitre{
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 500px;
    margin-top: 150px;
    margin-bottom: 25px;
}

.ProjetSousTitre p{
    width: 100%;
    max-width: 71px;
    height: 17px;
    text-decoration: none;
    color: white;
    background-color: #393E46;
    margin-right: 10px;
}

.ProjetSousTitre h2{
    font-family: RobotoThin;
    text-decoration: underline;
    font-size: 1em;
}

.ConceptAligne{
    display: flex;
    flex-wrap: wrap;
}

.ConceptColonne, .ConceptColonnePetit{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ConceptColonnePetit img{
    width: 100%;
    max-width: 250px;
}

.TresPetit{
    width: 100%;
    max-width: 350px;
}


.Petit{
    width: 100%;
    max-width: 500px;
}

.Moyen{
    width: 100%;
    max-width: 750px;
}

.Grand{
    width: 100%;
    max-width: 900px;
}

.MargesTop{
    margin-top: 50px;
}

.MargesTopGrandes{
    margin-top: 100px;
}

.MargesGauche{
    width: 100%;
    max-width: 50px;
    height: 1px;
}

.MargesGauche2{
    width: 100%;
    max-width: 100px;
    height: 1px;
}


/* Projet Suivant ------------------------------------- */

.ProjetSuivant{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.ProjetSuivant .ProjetSuivantTraitGras{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    border-top: 3px solid #393E46;
    border-bottom: 3px solid #393E46;
}

.ProjetSuivant .ProjetSuivantTraitFin{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    border-top: 1px solid #393E46;
    border-bottom: 1px solid #393E46;
    margin-top: 2px;
    margin-bottom: 2px;
}

.ProjetSuivant .ProjetSuivantTraitGras .ProjetSuivantTraitFin a{
    text-decoration: none;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    border-top: 3px solid #393E46;
    border-bottom: 3px solid #393E46;
    font-family: RobotoBold;
    font-size: 1em;
}

.ProjetSuivant  .ProjetSuivantTraitGras .ProjetSuivantTraitFin a .ProjetSuivantAnnonce{
    font-style: normal;
    color: #393E46;
}

.ProjetSuivant  .ProjetSuivantTraitGras .ProjetSuivantTraitFin a .ProjetSuivantTitre{
    font-family: Roboto;
    text-decoration: underline;
    font-style: italic;
    color: #393E46;
    font-size: 1.3em;
}

/* Bouton Partage ------------------------------------- */

.Partage{
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 50px;
    padding-left: 50px;
}

.sharebox {
    position: relative;
    display: inline-block;
    padding: 0.6rem 0.8rem;
    padding-left: 2rem;
    width: 50%;
    max-width: 60px;

    background-color: #EEEEEE;

    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Rum Raisin', sans-serif;
    font-weight: bold;
    font-size: 0.8rem;
    color: #363636;
    
}

.sharebox > .fb-icon {
    position: absolute;
    display: block;
    height: 0.9rem;
    width: 0.9rem;
    bottom: 0.8rem;
    left: 0.8rem;

    background-image: url(fb-icon.svg);
    
    /*  background-image: url(../icons/fb-icon.svg); */
    background-size: 1rem 1rem;
    background-repeat: no-repeat;
}

/* Footer --------------------------------------------*/

footer{
    background-color: #393E46;
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.FooterConteneur{
    width: 100%;
    max-width: 900px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap-reverse;
}

.Coordonnees{
    width: 100%;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    color: #EEEEEE;
}

.Coordonnees p{
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
    margin-bottom: 1px;
}

.Contact{
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Contact .LienContact{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    color: #EEEEEE;
    border: 2px solid #EEEEEE;
    padding: 15px;
    margin-bottom: 35px;
    width: 100%;
    max-width: 200px;
}

.Contact .LienMentionLeg{
    display: flex;
    justify-content: flex-end;
    color: #EEEEEE;
    margin-top: 10px;
    margin-bottom: 1px;
}

.Contact p{
    color: #EEEEEE;
}


/*  En Construction ----------------------------- */

ThibaudRoussel

11 septembre 2019 à 13:52:32

Je n'ai pas ce problème est-ce dû au fait que je n'ai pas tout le html ?

As-tu uiliser l'inspecteur d'élément pour regarder quel est le bloc qui grossit ? si tu vois que c'est une div avec une class tu sauras d'où vient le problème.

barback

11 septembre 2019 à 15:04:04

Je ne sais pas si ça peu t'aider, mais voici des impr écran montrant le défaut avec le fichier test... Je pense que c'est la réduction de l'image qui cause ce défaut, mais je ne sais pas expliquer pourquoi.

La marge en question s'introduit entre l'image et le bas de la section "ProjetConteneur".

J'ai bien essayé de mettre les marges et les padding de "Projets", "ProjetConteneur" et même du body à 1px, ou 1%, mais rien n'y fait, le défaut que je montre ci dessous continue à s'afficher.

ThibaudRoussel

11 septembre 2019 à 15:25:13

As-tu le même problème sur chrome ? Mais pour pallier à mon problème il faudrait envoyer tout le html est-ce possible ?

barback

11 septembre 2019 à 16:03:00

[EDIT] : Le problème ne semble pas s'opérer sous Chrome, ni sous Opéra. J'ai testé une autre page de projet ou le problème arrivait rapidement.

Sous chrome, la fenêtre ne se réduit pas assez, ça bloque à la largeur de ma première capture d'écran à peu près... Alors je ne sais pas si le problème existe ou pas! J'ai téléchargé opéra pour tester et... Lui aussi bloque à la même largeur que Chrome. [edit : le problème semble n'être que sous IE]

Voici les codes complets :

1 / HTML et PHP : La page principale avec les includes

<?php
    // On démarre la session
    session_start();

    // Vérification de la variable récupérée GET['np']
    if(isset($_GET['np']) AND $_GET['np']>0 AND $_GET['np']<10){ 
        $numero_article = $_GET['np'];
    }
    else{
        $numero_article = 1;
    }

?>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="Style.css" />
		<!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
		<link rel="shortcut icon" href="http://www.gabrielthomas.fr/logo.ico">
		<title>THOMAS Gabriel - Portfolio Projets</title>
		<meta name="description" content="Bienvenue sur le Portfolio d'architecture de Gabriel THOMAS, formé à l'ENSAPVS. J'afficherai mes créations et réalisations en mettant le site à jour régulièrement." />
	</head>
    
    <body>
        
        <header>
            <?php include("Menu.php"); ?>
        </header>

        <!-- navigation de projet -->
        
        <section class="Projets">
            <div class="ProjetNumero">
                    <div class="ProjetNumeroTraitFin">
                        <div class="ProjetNumeroTraitGras">
                            <h2>Projet n°<?php echo htmlspecialchars($numero_article); ?></h2>
                        </div>
                    </div>
            </div>
            <div class="ProjetNavigation">
                <?php 
                for ($n=1; $n <= 8; $n++){?>
                    <a href="architecture.php?np=<?php echo htmlspecialchars($n); ?>" ><p><?php if($n == $numero_article){ ?><strong><i><?php }?><?php echo htmlspecialchars($n); ?><?php if($n == $numero_article){ ?></strong></i><?php }?></p></a><?php
                } ?>
            </div>
        </section>

        <!-- corps de projet -->
        
        <section class="Projets">
            <?php include("Projets/Projet" . $numero_article . ".php");
            $numero_article ++;
            if($numero_article>8){
                $numero_article = 1;
            }
            ?>
        </section>

        <?php
        // Connection à la table des titres des projets
        try
            {
                $bdd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
            }
            catch(Exception $e)
            {
                die('Erreur : '.$e->getMessage());
            }

        //Récupération du titre correspondant au projet suivant

        $reponse = $bdd->query("SELECT Titre_Projet FROM projets WHERE id=" . $numero_article);
        while ($donnees = $reponse->fetch()){
            $titre = htmlspecialchars($donnees['Titre_Projet']);
        }

        $reponse->closeCursor();

        ?>
        
        
        <section class="ProjetSuivant">
            <div class="ProjetSuivantTraitGras">
                <div class="ProjetSuivantTraitFin">
                    <a href="architecture.php?np=<?php echo htmlspecialchars($numero_article); ?>" ><p class="ProjetSuivantAnnonce" >Projet Suivant</p><p class="ProjetSuivantTitre" >"<?php echo $titre; ?>"</p></a>
                </div>
            </div>
        </section>

        <footer>
            <?php include("Footer.php"); ?>
        </footer>
        
    </body>
    
</html>

2/ HTML et PHP un exemple d'un include d'un projet

<section class="ProjetConteneur">
    <div class="ProjetBandeau">
        <a href="Projets/Littaye/VueGlobale.jpg"><img src="Projets/Littaye/VueGlobale.jpg" /></a>
    </div>
    <div class="ProjetTitreDescriptionConteneur">
        <div class="MargesGauche"></div>
        <div class="ProjetTitre">
            <h1>Rénovation d'une maison du 17e siècle</h1>
        </div>
    </div>
    <div class="ProjetTitreDescriptionConteneur">
        <div class="MargesGauche2"></div>
        <div class="ProjetDescription">
            <p><strong>Programme :</strong> Maison Individuelle</p>
            <p><strong>Maître d'Ouvrage :</strong> Particuliers</p>
            <p><strong>Surface</strong> : 400 m²</p>
            <p><strong>Mission</strong> : Entière (Esquisse, Suivi de Chantier)</p>
        </div>
    </div>
    <div class="ProjetTitreDescriptionConteneur">
        <div class="MargesGauche"></div>
        <div class="ProjetSousTitre">
            <p><strong>///////////</strong></p>
            <h2>Grignan, au coeur de la Drôme provençale</h2>
        </div>
    </div>
    <img src="Projets/Littaye/Localisation.jpg" class="Petit" />
    
    <div class="ProjetTitreDescriptionConteneur">
        <div class="MargesGauche"></div>
        <div class="ProjetSousTitre">
            <p><strong>///////////</strong></p>
            <h2>La commune se développe autour d'un château classé aux Monuments Historiques</h2>
        </div>
    </div>
    <a href="Projets/Littaye/LocalisationLittaye.jpg"><img class="Grand" src="Projets/Littaye/LocalisationLittaye.jpg" /></a>
    <img src="Projets/Littaye/Situation.jpg" class="MargesTop Moyen"/>
    
    <div class="ProjetTitreDescriptionConteneur">
        <div class="MargesGauche"></div>
        <div class="ProjetSousTitre">
            <p><strong>///////////</strong></p>
            <h2>Intervenir au pied des contreforts de la Collégiale St Sauveur</h2>
        </div>
    </div>
    <a href="Projets/Littaye/LocalisationPreciseLittaye.jpg"><img class="Petit" src="Projets/Littaye/LocalisationPreciseLittaye.jpg" /></a>
    <a href="Projets/Littaye/Masse.pdf"><img class="MargesTop Moyen" src="Projets/Littaye/Masse.jpg" /></a>
    
    <div class="ProjetTitreDescriptionConteneur">
        <div class="MargesGauche"></div>
        <div class="ProjetSousTitre">
            <p><strong>///////////</strong></p>
            <h2>Apporter de la fluidité dans un espace décloisonné</h2>
        </div>
    </div>
    <a href="Projets/Littaye/EspaceEclate.jpg"><img class="Grand" src="Projets/Littaye/EspaceEclate.jpg" /></a>
    <div class="MoyenTexte Grand">
        <p>La circulation, la salle à manger et le séjour sont traités dans un seul espace. L'existant est cependant utilisé afin de caractériser ces différents fonctions : le traitement du plafond est plus rustique dans la salle à manger, une retombée de poutre marque la transition entre les deux pièces.</p>
    </div>
    <a href="Projets/Littaye/RDC.pdf" ><img src="Projets/Littaye/RDC.jpg" class="MargesTop Moyen" /></a>
    <div class="PetitTexte Grand">
        <p><i>Cliquer sur le plan pour avoir plus de détails</i></p>
    </div>
    <div class="MoyenTexte Grand">
        <p>L'espace a été décloisonné et tous les niveaux de sols ont été hamonisés afin de former et hiérarchiser deux volumes, l'un délimitant la cuisine et l'autre accueillant la salle à manger et le séjour. Les murs porteurs (enduits à la chaux) et les encadrements de portes et de fenêtres en pierre de taille sont ainsi mis en valeur.</p>
    </div>
    
    <div class="ProjetTitreDescriptionConteneur">
        <div class="MargesGauche"></div>
        <div class="ProjetSousTitre">
            <p><strong>///////////</strong></p>
            <h2>Accompagner la transition extérieur/intérieur</h2>
        </div>
    </div>
    <a href="Projets/Littaye/Ventelles.png"><img class="MargesTop Grand" src="Projets/Littaye/Ventelles.png" /></a>
    <div class="MoyenTexte Grand">
        <p>Les ventelles délimitent un espace d'entrée et assurent une semi-transparence sur le séjour afin de ne pas fermer la perspective.</p>
    </div>
    <a href="Projets/Littaye/RDC.pdf" ><img src="Projets/Littaye/RDCEntree.jpg" class="MargesTop Moyen" /></a>
    <div class="MoyenTexte Grand">
        <p>Le décloisonnement de l'entrée permet un gain de place conséquant. Cependant, un volume est déterminé avec l'implantation des sanitaires, permettant de ne pas ouvrir directement dans le salon : un espace d'entrée est créé (en bleu sur le plan).</p>
    </div>
    <a href="Projets/Littaye/RDC.pdf" ><img src="Projets/Littaye/RDCVue.jpg" class="MargesTop Moyen" /></a>
    <div class="MoyenTexte Grand">
        <p>Des ventelles verticales masquent la porte des sanitaires depuis les pièces de vie mais laisse le regard passer depuis l'entrée vers le salon.</p>
    </div>
        <p class="MargesTop">Espace d'entrée : non cloisonné mais protégé</p>
    <a href="Projets/Littaye/Travertin.pdf" ><img src="Projets/Littaye/Travertin.jpg" class="Petit" /></a>
    <div class="MoyenTexte Grand">
        <p>L'éclairage par le sol est aligné avec la cloison formée par les ventelles. Ce dernier est traité comme un joint accompagnant la disposition de l'opus du travertin : un trou au milieu d'une dalle de carrelage aurait été moins esthétique.</p>
    </div>
     
    <div class="ProjetTitreDescriptionConteneur">
        <div class="MargesGauche"></div>   
        <div class="ProjetSousTitre">
            <p><strong>///////////</strong></p>
            <h2>Développer les niveaux autour de l'escalier en vis</h2>
        </div>
    </div>
    <a href="Projets/Littaye/EscalierVis1.jpg"><img class="Petit" src="Projets/Littaye/EscalierVis1.jpg" /></a>
    <div class="MoyenTexte Grand">
        <p>Avec ce type de distribution verticale, les pièces desservies ont chacune une hauteur qui leur est propre.</p>
    </div>
    <a href="Projets/Littaye/EscalierVis2.jpg"><img class="MargesTop Moyen" src="Projets/Littaye/EscalierVis2.jpg" /></a>
    <div class="MoyenTexte Grand">
        <p>L'escalier a du être examiné par un tailleur de pierre afin de consolider les fissures existantes.</p>
    </div>
    <a href="Projets/Littaye/Coupe.pdf"><img src="Projets/Littaye/Coupe_leger.jpg" class="Moyen" /></a>

    <div class="ProjetTitreDescriptionConteneur">
        <div class="MargesGauche"></div>
        <div class="ProjetSousTitre">
            <p><strong>///////////</strong></p>
            <h2>Remplacer le plancher du RDC et intégrer un chauffage au sol</h2>
        </div>
    </div>
    <a href="Projets/Littaye/ChauffageSol.jpg"><img class="Petit" src="Projets/Littaye/ChauffageSol.jpg" /></a>
    <div class="MoyenTexte Grand">
        <p>La structure de l'escalier, anciennement en brique, a été utilisée pour intégrer la partie technique qui sera masquée par une porte dérobée.</p>
    </div>
    <a href="Projets/Littaye/CoupeDetail.pdf"><img src="Projets/Littaye/CoupeDetail.jpg" class="MargesTop Grand" /></a>
    <div class="MoyenTexte Grand">
        <p>Les planchers des autres étages sont restés d'origine : structure bois avec dalles en pierre.</p>
    </div>
    
    <div class="ProjetTitreDescriptionConteneur">
        <div class="MargesGauche"></div>
        <div class="ProjetSousTitre">
            <p><strong>///////////</strong></p>
            <h2>Réutiliser l'existant</h2>
        </div>
    </div>
    <a href="Projets/Littaye/ChambreBas.jpg"><img class="Grand" src="Projets/Littaye/ChambreBas.jpg" /></a>
    <div class="MoyenTexte Grand">
        <p>Au R-1, une chambre a été aménagée en réutilisant les dalles de pierres d'autres pièces.</p>
    </div>
    <a href="Projets/Littaye/NicheCuisine.jpg"><img class="MargesTop Grand" src="Projets/Littaye/NicheCuisine.jpg" /></a>
    <div class="MoyenTexte Grand">
        <p>Les anciens conduits de cheminée ont été transformés en niches.</p>
    </div>
    
</section>

3/ L'unique CSS

/* Déclarations ------------------------------- */

@font-face {
	font-family: Roboto;
	src: url(Roboto-Regular.ttf);
}

@font-face {
	font-family: RobotoBold;
	src: url(Roboto-Bold.ttf);
}

@font-face {
	font-family: RobotoThin;
	src: url(Roboto-Thin.ttf);
	font-weight: 200;
}

@font-face {
    font-family: Quattrocento;
    src: url(Quattrocento-Regular.ttf);
}

/* HTML, Body --------------------------------- */

html, body{
    background-color: #EEEEEE;
    text-align : center;
    margin: 0;
    padding: 0;
    color: #393E46;
    font-family: Roboto, SansSerif;
    font-size : 1em;
}

/* Header ------------------------------------*/

header{
    top: 0;
    background-color: white;
    width: 100%;
    border-top: 5px solid #393E46;
    border-bottom: 1px solid #393E46;
    display: flex;
    justify-content : center;
}

header nav{
    width: 100%;
    max-width: 900px;
    height: 100px;
    display: flex;
    justify-content : space-between;
}

.AccueilMenu{
    width: 40%;
    max-width: 150px;
    height: 100px;
    border-right: 1px solid #393E46;
    font-size: 1.5em;
    font-family: RobotoBold;
}

.AccueilMenu a:hover{
    background-color: #222831;
    color: #EEEEEE;
}

.AccueilMenu a{
    text-decoration: none;
    color: #393E46;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.NavigationMenu{
    width: 60%;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.NavigationMenu a{
    text-decoration: none;
    color: #393E46;
    margin-right: 10px;
    margin-left: 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    max-width: 130px;
}

.NavigationMenu a:hover{
    color: #00ADB5;
}

/*  Présentation --------------------------------*/

.Presentation{
    padding-top: 100px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
}

.Presentation .ContenuPresentation{
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}

.Presentation h1{
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: Quattrocento, sans-serif;
    font-weight: 500;
    font-size: 3em;
    color: #222831;
}

.Presentation h1 strong{
    font-family: Quattrocento;
    margin-left: 20px;
}

.Presentation img{
    width: 10px;
    height: 60px;
    margin-top: 20px;
}

.PresentationLignes{
    width: 90%;
    max-width: 380px;
    display: flex;
    justify-content: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.PresentationLignesTab{
    font-family: RobotoThin;
    width: 90%;
    max-width: 290px;
    margin-top: 1px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
} 
/*

.PresentationLignesTab2{
    font-family: RobotoThin;
    width: 90%;
    max-width: 260px;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

*/

.PresentationLignesTab3{
    width: 90%;
    max-width: 200px;
    margin-top: 8px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.PresentationLignesTab4{
    width: 100%;
    max-width: 150px;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.PresentationLignesTab .ArchiUrba{
    width: 100px;
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: 1.3em;
}

.PresentationLignesTab2 .ArchiUrba{
    width: 100px;
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: 1.3em;
}

.PresentationLignesTab p{
    width: 75px;
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: 1.3em;
    font-family: RobotoThin;
}

.PresentationLignesTab2 p{
    width: 75px;
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: 1.3em;
    font-family: RobotoThin;
}

.PresentationLignesTab3 a{
    width: 100%;
    text-decoration: none;
}

.PresentationLignesTab3 p, .PresentationLignesTab4 p{
    width: 100%;
    font-size: 1em;
    margin-top: 1px;
    margin-bottom: 1px;
    font-family: Roboto;
    color: #818489;
}

/*  Invitation au Scroll Animation ------------------------------*/

.arrow{
    display: flex;
    flex-direction: column;
    align-items : center;
    margin-top: 30px;
    margin-bottom: 5px;
}
.arrow span{
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 3px solid #393e46;
    border-right: 3px solid #393e46;
    transform: rotate(45deg);
    margin: -2px;
    animation: animate 4s infinite;
}

/*
.arrow span:nth-child(2){
    animation-delay: -0.4s;
}
.arrow span:nth-child(3){
    animation-delay: -0.8s;
}

*/

@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-10px,-10px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(10px,10px);
    }
}

/*  Présentation des Ateliers --------------------------------*/

.PresentationAteliers{
    margin-top: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #393e46;
    width: 100%;
}

.PresentationAteliers .ContenuPresentationAteliers{
    width: 100%; /* Portable */
    max-width: 900px; /* Ordi */
    display: flex;
    align-items : center;
    justify-content: space-around;
    flex-wrap: wrap;
    z-index: 2;
}

.ContenuPresentationAtelierBouton{
    margin: 10px;
}

/*

.PresentationAteliersTitre{
    width: 100%;
    max-width: 900px;
    display: flex;
    justify-content: center;
}

.PresentationAteliersTitre p{
    color: #EEEEEE;
    font-family: Roboto;
    font-size: 2em;
}



.PresentationAteliers .ContenuPresentationAteliers h2, .PresentationAteliers .ContenuPresentationAteliers p{
    font-family: RobotoThin;
    font-size: 1em;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #EEEEEE;
}

.TitreContenuAteliersGras{
    width: 300px;
    border-top: 3px solid #393E46;
    margin-top: 2px;
    border-bottom: 3px solid #393E46;
    margin-bottom: 2px;
}

.TitreContenuAteliersMoyen{
    width: 300px;
    border-top: 2px solid #393E46;
    margin-top: 2px;
    border-bottom: 2px solid #393E46;
    margin-bottom: 2px;
}

.TitreContenuAteliersFin{
    width: 100%;
    max-width: 300px;
    border-top: 1px solid #393E46;
    margin-top: 2px;
    border-bottom: 1px solid #393E46;
    margin-bottom: 2px;
}

.TitreAtelier{
    margin-top: 30px;
    margin-bottom: 80px;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.TitreAtelier a{
    width: 100%;
    margin-top: 50px;
    max-width: 250px;
    text-decoration: underline;
    color: black;
    text-transform: uppercase;
    font-size: 1.1em;
}
*/

/*  Animation boutons navigation --------------*/

.ContenuPresentationAtelierBouton a {
        /*Button Text Style*/
        font-family: Roboto, sans-serif;
        font-size: inherit;
        text-align: center;
        letter-spacing: 3px;
        text-transform: uppercase;
        text-decoration:none;
        /*Button Color & Border*/
        border: 2px solid #EEEEEE ;
        color: #EEEEEE;
        background: #393e46;
        outline: none;
        /*Position, Display, Size*/
        position: relative;
        display: inline-block;
        padding: 15px 10px 14px;
        cursor: pointer;
        width: auto;
}

.ContenuPresentationAtelierBouton a:after {
        /*Make a:after be as big as button*/
        position: absolute;
        width: 100%;
        height: 100%;
        /*Give a:after Border & Background color*/
        border: 2px solid #222831;
        background-color: #222831;
        /*Decide Location of a:after..this gives a  bottom right shadow*/
        left: 4px;
        top: 4px;
        /*Place a:after behind button*/
        z-index: -1;
        content: '';
        /*Animation/Transition Speed*/
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        
}

.ContenuPresentationAtelierBouton a:hover {
        top:2px;
        left:2px;
}

.ContenuPresentationAtelierBouton a:hover:after {
        top: -2px;
        left: -2px;
}

/*  Présentation des Ateliers --------------------------------*/

.PresentationAteliersDetaille, .PresentationActuDetaillee, .PresentationService{
    margin-top: 20px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    width: 100%;
}

.ContenuPresentationAteliersDetaille{
    width: 100%; /* Portable */
    max-width: 900px; /* Ordi */
    z-index: 2;
    margin-bottom: 20px;
}

.DescriptionArchi, .DescriptionActu{
    margin-top: 50px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.DescriptionUrba, .DescriptionService{
    margin-top: 50px;
    width: 100%;
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-around;
}

.DescriptionArchi a, .DescriptionUrba a, .DescriptionActu a{
    width: 100%;
    max-width: 600px;
}

.DescriptionArchi a img, .DescriptionUrba a img, .DescriptionActu a img{
    width: 100%;
    max-width: 600px;
    margin-top: 1px;
}

.TexteArchitecture, .TexteUrbanisme, .TexteService{
    width: 250px;
}

.TexteArchitecture a{
    width: 100%;
    max-width: 250px;
    text-decoration: none;
    text-align: left;
}

.TexteUrbanisme a{
    width: 100%;
    max-width: 250px;
    text-decoration: none;
    text-align: right;
}

.TexteService a{
    width: 100%;
    max-width: 250px;
    text-decoration: none;
    text-align: left;
}

.TexteArchitecture h3, .TexteUrbanisme h3, .TexteService h3{
    margin-top: 1px;
    color: #393E46;
    font-family: RobotoThin, sans-serif;
    font-size: 1.7em;
    margin-bottom: 1px;
}

.TexteArchitecture h3 strong, .TexteUrbanisme h3 strong, .TexteService h3 strong{
    margin-top: 1px;
    color: #393E46;
    font-family: RobotoBold, sans-serif;
    font-size: 0.9em;
}

.TexteArchitecture p, .TexteUrbanisme p, .TexteService p{
    text-align: justify;
    color: #393E46;
}

@media screen and (max-width: 900px) {

    .TexteArchitecture, .TexteUrbanisme, .TexteService{
        width: 90%;
        max-width: 600px;
    }   

    .TexteArchitecture a, .TexteUrbanisme a, .TexteService a{
        text-align: center;
    }

}

.PresentationService{
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    width: 100%;
}

.ContenuPresentationService{
    width: 100%; /* Portable */
    max-width: 900px; /* Ordi */
    z-index: 2;
}

/*  Actu --------------------------------*/

.ActuConteneur{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #393E46;
    margin-top: 25px;
    margin-bottom: 20px;
    padding: 10px;
}

.ActuPresentation{
    width: 100%;
    max-width: 600px;
    margin-top: 30px;
    margin-bottom: 30px;
    border: 2px solid #EEEEEE;
}

.ActuTitre{
    color: white;
    font-size: 50px;
    font-family: RobotoThin;
    padding: 0px;
    margin: 0px;
    border-bottom: 2px solid #EEEEEE;
}

.ActuTri{
    color: white;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #EEEEEE;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.ActuTitre a{
    text-decoration: none;
    color: white;
}

.ActuTri form{
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
}

.ActuTri p{
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
}

.ActuTri select, option{
    background-color: #222831;
    color: #EEEEEE;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    padding: 10px;
    font-size: 1em;
    font-family: Roboto;
    cursor: pointer;
}

.ActuTri input{
    background-color: #222831;
    color: #EEEEEE;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    padding: 10px;
    font-family: Roboto;
    font-size: 1em;
    cursor: pointer;
}

/*  Article d'actualité --------------------------------*/

.ArticleConteneur{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.ArticleActu{
    background-color: white;
    width: 100%;
    max-width: 600px;
    margin-top: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #222831;
    border-top: 3px solid #222831;
    display: flex;
    flex-direction: column;
}

.ArticleTitre{
    background-color: white;
    width: 100%;
    max-width: 400px;
    margin-top: 20px;
    border-left: 1px solid #393E46;
    background-color: #393E46;
}

.ArticleTitre h1{
    color: #EEEEEE;
    font-family: RobotoThin;
    text-align: left;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 3px;
    margin-bottom: 3px;
}

.ArticleDate{
    font-size: 0.8em;
    text-decoration: underline;
    text-align: left;
    margin-left: 10px;
    margin-bottom: 0px;
}

.ArticleCorps{
    width: 100%;
    max-width: 500px;
    padding-right: 10px;
    padding-left: 10px;
    text-align: justify;
}

.ArticleCorps p{
    margin-top: 30px;
    margin-bottom: 30px;
}

.ArticleCorps img{
    width: 100%;
    max-width: 100%;
    height: auto;
}

.ArticleMotClef{
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-wrap: wrap;
    align-items : center;
}

.ArticleMotClef p{
    font-style: italic;
    color: black;
    font-size: 0.8em;
}

.ArticleMotClef a{
    text-decoration: underline;
    font-style: italic;
    color: black;
    font-size: 0.8em;
    margin-left: 10px;
}

.ArticlePage{
    width: 100%;
    max-width: 400px;
}

.ArticlePage a{
    text-decoration: underline;
    color: black;
    margin-left: 20px;
}

/* Projet  ----------------------------------- */

.Projets{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.ProjetNavigation{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-family: Roboto;
    width: 90%;
    max-width: 900px;
}

.ProjetNavigation a{
    text-decoration: none;
}

.ProjetNavigation a p{
    color: black;
    margin-top: 5px;
}

.ProjetNumero{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 90%;
    max-width: 900px;
    margin-top: 10px;
}

.ProjetNumeroTraitFin{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    max-width: 900px;/*
    border-top: 1px solid #393e46;*/
    border-bottom: 1px solid #393e46;
}

.ProjetNumeroTraitGras{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 900px;/*
    border-top: 3px solid #393e46;*/
    border-bottom: 2px solid #393e46;
    margin-bottom: 2px;
}

.ProjetNumero h2{
    font-family: Roboto, sans-serif;
    font-weight: 200;
    font-size: 2em;
    margin-bottom: 5px;
}

.ProjetConteneur{
    width: 100%;
    max-width: 900px;
    background-color: white;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.PetitTexte, .MoyenTexte, .GrandTexte{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.PetitTexte a, .MoyenTexte a, .GrandTexte a{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.PetitTexte p, .MoyenTexte p, .GrandTexte p{
    width: 90%;
    max-width: 500px;
    color: #393E46;
}

.PetitTexte a p, .MoyenTexte a p, .GrandTexte a p{
    text-decoration: underline;
}

.PetitTexte a .nonSouligne, .MoyenTexte a .nonSouligne, .GrandTexte a .nonSouligne{
    text-decoration: none;
}

.PetitTexte p{
    font-size: 0.6em;
}

.MoyenTexte p{
    font-size: 0.8em;
}

.GrandTexte p{
    font-size: 1em;
}

.ProjetBandeau{
    width: 100%;
    max-width: 900px;
}

.ProjetBandeau a img{
    width: 100%;
}

.ProjetTitreDescriptionConteneur{
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
}

.ProjetTitre{
    width: 90%;
    max-width: 400px;
    margin-top: 70px;
    border-left: 1px solid #393E46;
    background-color: #393E46;
    margin-bottom: 50px;
}

.ProjetTitre h1{
    color: #EEEEEE;
    font-family: Roboto;
    font-size: 2em;
    text-align: left;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 3px;
    margin-bottom: 3px;
}

.TitreSousPartie{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 70px; 
    width: 100%;  
}

.TitreSousPartie h2{
    width: 90%;
    color: #EEEEEE;
    padding: 5px;
    margin: 3px;
    font-size:  1.2em;
    font-family: RobotoThin, Sans-serif;
}

.FondBleu{
    background-color: #393E46;
    width: 90%;
    max-width: 400px;
    padding: 3px;
}

.TraitBlanc{
    border: 1px solid #EEEEEE;
    width: 99%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.TitreSousPartie h2{
    width: 300px;
}

.ProjetDescription{
    width: 100%;
    max-width: 350px;
    text-align: left;
}

.ProjetDescription p{
    margin-top: 0px;
    margin-bottom: 0px;
    border-top: 1px solid #393E46;
}

.ProjetSousTitre{
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 500px;
    margin-top: 150px;
    margin-bottom: 25px;
}

.ProjetSousTitre p{
    width: 100%;
    max-width: 71px;
    height: 17px;
    text-decoration: none;
    color: white;
    background-color: #393E46;
    margin-right: 10px;
}

.ProjetSousTitre h2{
    font-family: RobotoThin;
    text-decoration: underline;
    font-size: 1em;
}

.ConceptAligne{
    display: flex;
    flex-wrap: wrap;
}

.ConceptColonne, .ConceptColonnePetit{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ConceptColonnePetit img{
    width: 100%;
    max-width: 250px;
}

.TresPetit{
    width: 100%;
    max-width: 350px;
}


.Petit{
    width: 100%;
    max-width: 500px;
}

.Moyen{
    width: 100%;
    max-width: 750px;
}

.Grand{
    width: 100%;
    max-width: 900px;
}

.MargesTop{
    margin-top: 50px;
}

.MargesTopGrandes{
    margin-top: 100px;
}

.MargesGauche{
    width: 100%;
    max-width: 50px;
    height: 1px;
}

.MargesGauche2{
    width: 100%;
    max-width: 100px;
    height: 1px;
}


/* Projet Suivant ------------------------------------- */

.ProjetSuivant{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.ProjetSuivant .ProjetSuivantTraitGras{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    border-top: 3px solid #393E46;
    border-bottom: 3px solid #393E46;
}

.ProjetSuivant .ProjetSuivantTraitFin{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    border-top: 1px solid #393E46;
    border-bottom: 1px solid #393E46;
    margin-top: 2px;
    margin-bottom: 2px;
}

.ProjetSuivant .ProjetSuivantTraitGras .ProjetSuivantTraitFin a{
    text-decoration: none;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    border-top: 3px solid #393E46;
    border-bottom: 3px solid #393E46;
    font-family: RobotoBold;
    font-size: 1em;
}

.ProjetSuivant  .ProjetSuivantTraitGras .ProjetSuivantTraitFin a .ProjetSuivantAnnonce{
    font-style: normal;
    color: #393E46;
}

.ProjetSuivant  .ProjetSuivantTraitGras .ProjetSuivantTraitFin a .ProjetSuivantTitre{
    font-family: Roboto;
    text-decoration: underline;
    font-style: italic;
    color: #393E46;
    font-size: 1.3em;
}

/* Bouton Partage ------------------------------------- */

.Partage{
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 50px;
    padding-left: 50px;
}

.sharebox {
    position: relative;
    display: inline-block;
    padding: 0.6rem 0.8rem;
    padding-left: 2rem;
    width: 50%;
    max-width: 60px;

    background-color: #EEEEEE;

    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Rum Raisin', sans-serif;
    font-weight: bold;
    font-size: 0.8rem;
    color: #363636;
    
}

.sharebox > .fb-icon {
    position: absolute;
    display: block;
    height: 0.9rem;
    width: 0.9rem;
    bottom: 0.8rem;
    left: 0.8rem;

    background-image: url(fb-icon.svg);
    
    /*  background-image: url(../icons/fb-icon.svg); */
    background-size: 1rem 1rem;
    background-repeat: no-repeat;
}

/* Footer --------------------------------------------*/

footer{
    background-color: #393E46;
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.FooterConteneur{
    width: 100%;
    max-width: 900px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap-reverse;
}

.Coordonnees{
    width: 100%;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    color: #EEEEEE;
}

.Coordonnees p{
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
    margin-bottom: 1px;
}

.Contact{
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Contact .LienContact{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    color: #EEEEEE;
    border: 2px solid #EEEEEE;
    padding: 15px;
    margin-bottom: 35px;
    width: 100%;
    max-width: 200px;
}

.Contact .LienMentionLeg{
    display: flex;
    justify-content: flex-end;
    color: #EEEEEE;
    margin-top: 10px;
    margin-bottom: 1px;
    font-size: 0.8em;
}

.Contact p{
    color: #EEEEEE;
}


/*  Formulaire de contact ----------------------------- */

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

.PageContact button {
  overflow: visible;
}

.PageContact button, .PageContact select {
  text-transform: none;
}

.PageContact button, .PageContact input, .PageContact select, .PageContact textarea {
  color: #393E46;
  font: inherit;
  margin: 0;
}

.PageContact input {
  line-height: normal;
}

.PageContact textarea {
  overflow: auto;
}

#container {
  border: solid 3px #393E46;
  max-width: 600px;
  margin: 60px auto;
  position: relative;
}

.PageContact form {
  padding: 37.5px;
  margin: 50px 0;
}

.PageContact h1 {
  color: #393E46;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 7px;
  text-align: center;
  text-transform: uppercase;
}

.underline {
  border-bottom: solid 2px #393E46;
  margin: -0.512em auto;
  width: 80px;
}

.icon_wrapper {
  margin: 50px auto 0;
  width: 100%;
}

.icon {
  display: block;
  fill: #393E46;
  height: 50px;
  margin: 0 auto;
  width: 50px;
}

.email {
    float: right;
    width: 45%;
}

.PageContact input[type='text'], [type='email'], .PageContact select, .PageContact textarea {
    background: none;
  border: none;
    border-bottom: solid 2px #393E46;
    color: #393E46;
    font-size: 1.000em;
  font-weight: 400;
  letter-spacing: 1px;
    margin: 0em 0 1.875em 0;
    padding: 0 0 0.875em 0;
  text-transform: uppercase;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.PageContact input[type='text']:focus, [type='email']:focus, .PageContact textarea:focus {
    outline: none;
    padding: 0 0 0.875em 0;
}

.message {
    float: none;
}

.name {
    float: left;
    width: 100%;
}

.PageContact select {
  background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-32.png') no-repeat right;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.PageContact select::-ms-expand {
  display: none;
}

.subject {
  width: 100%;
}

.telephone {
  width: 100%;
}

.PageContact textarea {
    line-height: 150%;
    height: 150px;
    resize: none;
  width: 100%;
}

::-webkit-input-placeholder {
    color: #393E46;
}

:-moz-placeholder { 
    color: #393E46;
    opacity: 1;
}

::-moz-placeholder {
    color: #393E46;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #393E46;
}

#form_button {
  background: none;
  border: solid 2px #393E46;
  color: #393E46;
  cursor: pointer;
  display: inline-block;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 0.875em;
  font-weight: bold;
  outline: none;
  padding: 20px 35px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#form_button:hover {
  background: #474544;
  color: #F2F3EB;
}

@media screen and (max-width: 768px) {
  #container {
    margin: 20px auto;
    width: 95%;
  }
}

@media screen and (max-width: 480px) {
  .PageContact h1 {
    font-size: 26px;
  }
  
  .underline {
    width: 68px;
  }
  
  #form_button {
    padding: 15px 25px;
  }
}

@media screen and (max-width: 420px) {
  .PageContact h1 {
    font-size: 18px;
  }
  
  .icon {
    height: 35px;
    width: 35px;
  }
  
  .underline {
    width: 53px;
  }
  
  .PageContact input[type='text'], [type='email'], .PageContact select, .PageContact textarea {
    font-size: 0.875em;
  }
}


/* En Construction -----------------------------------*/

-
Edité par barback 11 septembre 2019 à 16:10:55

ThibaudRoussel

11 septembre 2019 à 16:23:37

Tu peux essayer de mettre sur ta class .margesTop un margin-top en vw du genre 3vw.

barback

11 septembre 2019 à 16:29:48

Je reprécise si jamais tu n'as pas vu l'edit de mon précédent message : le problème n’apparaît pas sous Chrome ni sous Opera.

J'ai remplacé le margin-top de .margesTop avec 3vw, mais le problème apparaît de la même manière sous IE...

ThibaudRoussel

12 septembre 2019 à 9:49:35

Oui j'ai bien vu ton message je parlais pour ton problème de IE. Je n'ai pas testé mais regarde sur ce lien si cela resoud ton problème.

https://stackoverflow.com/questions/2991623/how-do-i-make-background-size-work-in-ie

Genroa

12 septembre 2019 à 12:17:43

Merci de fournir un codepen ou un jsfiddle de reproduction du problème, ça nous évitera de nous manger quelques centaines de lignes de CSS intestables à moins de créer un projet soi-même.

/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\

barback

13 septembre 2019 à 11:41:13

Bonjour,

voici un jsfiddle qui reproduit le défaut sous navigateur IE : https://jsfiddle.net/1hck4Lba/

[edit] le problème est mis en images avec des prises d'écrans dans mon message du 11 septembre à 15h04

-
Edité par barback 13 septembre 2019 à 11:43:16