Bonjour,
Voila je rencontre un petit problème avec mon code. En effet je n'ai aucun soucis d'affichage sur Firefox et Chrome mais dès que j'ouvre mon site sur les fameux et magnifiques IE et Edge je me retrouve avec un "scroll-right", une espèce de large qui fait dépasser mon site en largeur. Je sais pas si je m'exprime clairement donc je vous laisse le lien vers mon site pour que vous puissiez l'ouvrir directement via IE ou Edge.
http://cv.chaffy.net
Une image si vous ne voyez pas de quoi je parle :
https://cv.chaffy.net/img/Capture_CV_IE.PNG
Merci à tous ceux qui passeront un peu de temps pour m'aider. (Je vous assure que j'ai fais mes recherches sur le net avant de venir vous embêtter, et je n'ai trouvé aucun problème similaire et résolu commme le miens.)
Ce que je veux
Donc j'aimerai juste faire disparaitre cette marge.
Ce que je fais
Vous pouvez accèder à mon html directement sur le site.
Ci-dessous mon CSS complet si cela peut vous aider.
@font-face {
font-family: 'open_sanslight';
src: url('font/OpenSans-Light-webfont.eot') format('eot'),
url('font/OpenSans-Light-webfont.woff') format('woff'),
url('font/OpenSans-Light-webfont.ttf') format('truetype'),
url('font/OpenSans-Light-webfont.svg') format('svg');
}
/*CSS charging effect */
@-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
.text-focus-in {
-webkit-animation: text-focus-in 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
.tracking-in-expand {
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.slide-in-left {
-webkit-animation: slide-in-left 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.scale-in-center {
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes bounce-bottom {
0% {
-webkit-transform: translateY(45px);
transform: translateY(45px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 1;
}
24% {
opacity: 1;
}
40% {
-webkit-transform: translateY(24px);
transform: translateY(24px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
65% {
-webkit-transform: translateY(12px);
transform: translateY(12px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
82% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
93% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
25%,
55%,
75%,
87% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
}
@keyframes bounce-bottom {
0% {
-webkit-transform: translateY(45px);
transform: translateY(45px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 1;
}
24% {
opacity: 1;
}
40% {
-webkit-transform: translateY(24px);
transform: translateY(24px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
65% {
-webkit-transform: translateY(12px);
transform: translateY(12px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
82% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
93% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
25%,
55%,
75%,
87% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
}
.bounce-bottom {
-webkit-animation: bounce-bottom 0.9s both;
animation: bounce-bottom 0.9s both;
}
/*All css design */
html
{
font-family: 'open_sanslight', Arial, serif;
scroll-behavior: smooth;
margin: 0;
padding: 0;
}
body
{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100%;
margin: 0;
padding: 0;
}
nav
{
background-color: #394FB2;
height: 100%;
width: 6%;
position: fixed;
top: 0;
left: 0;
box-shadow: 1px 1px 12px #555;
}
#navigation
{
width: 100%;
list-style: none;
margin: 0;
padding: 0;
margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
z-index: 5;
}
#navigation a
{
background: transparent;
height: 40px;
display: block;
text-align: center;
color: #fff;
padding-top: 1em;
padding-bottom: 0;
font-size: 0.5em;
text-transform: uppercase;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
#navigation a:hover
{
background: #4E63C7;
color: #fff;
}
a
{
text-decoration: none;
}
section
{
width: 94%;
position: relative;
float: right;
display: block;
}
footer
{
width:94%;
position: relative;
float: right;
text-align: center;
border-top: 1px solid #D6D6D6;
}
#slider .fond
{
background-image: url("../img/fondcv.jpg");
background-size: cover;
background-repeat: no-repeat;
text-align: center;
position: relative;
opacity: 0.5;
margin: 0;
padding: 0;
width: 100%;
height: 300px;
filter: blur(2px);
-webkit-filter: blur(2px);
}
#slider .texton
{
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
h1
{
color: #394FB2;
font-weight: bold;
text-transform: uppercase;
font-size: 4em;
}
h3
{
font-weight: lighter;
text-transform: uppercase;
font-size: 2em;
letter-spacing: 2px;
color: #222222;
}
h2
{
color: #394FB2;
font-size: 2em;
font-weight: bold;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.navfoot
{
position: relative;
text-align: center;
}
.btn
{
background-color: #394FB2;
border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.btn-default
{
background-color: transparent;
color: #394FB2;
border: 2px solid #394FB2;
}
.btn-default:hover
{
background-color: #394FB2;
color: #D6D6D6;
}
.btn-simple
{
border: 2px solid #D6D6D6;
background-color: #D6D6D6;
color: white;
}
.btn-simple:hover
{
background-color: transparent;
color: #D6D6D6;
border: 2px solid #D6D6D6;
}
.center
{
text-align: center;
}
.centermid
{
vertical-align: middle;
}
.circle
{
background: #394FB2;
padding: 5px;
width: 25px;
height: 25px;
border-radius: 50%;
margin-left: -1.5em;
vertical-align: middle;
text-align: center;
float: left;
color: white;
margin-top: 1.6em;
line-height: 25px;
}
.sidebarcontent h2
{
margin-top: 20px;
font-weight: bold;
}
ul
{
list-style-type:none;
}
.puce::before
{
content: "●";
list-style-type:none;
color: #394FB2;
display: inline-block;
width: 1em;
margin-left: -1.7em;
font-size: 25px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 3; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 50%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.wrap
{
position: relative;
display: flex;
flex-wrap: wrap;
}
/* première colonne */
.content, .content:before
{
width:80%;
flex: 2;
}
.content
{
float:right;
padding: 0;
color: #6d7072;
}
.content:before
{
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 0;
background: #fff;
}
/* deuxième colonne */
.sidebar, .sidebar:before
{
width: 20%;
flex: 1;
}
.sidebar
{
float: left;
padding: 0;
color: black;
background-color: #D6D6D6;
}
.sidebar:before
{
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
background-color: #D6D6D6;
left: 60%;
}
.sidebarcontent
{
margin: 30px;
}
.sidebar p i
{
color: #394FB2;
font-size: 20px;
display: inline-block;
width: 15px;
height: 15px;
text-align: center;
margin-right: 5px;
}
.graph .col
{
margin-right: 7%;
padding: 0px;
width: 8%;
display: inline-block;
background-color: #394FB2;
vertical-align: bottom;
}
.graph .eighty
{
height: 80%;
}
.graph .sixty
{
height: 60%;
}
.graph .fourty
{
height: 40%;
}
.graph .thirty
{
height: 30%;
}
.graph
{
width: 70%;
height: 300px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
display: inline-block;
}
.graph .separator
{
width: 40px;
height: 100%;
display: inline-block;
vertical-align: bottom;
text-align: right;
margin-right: 15px;
}
.graph .separator p
{
margin-bottom: 34px;
margin-top: 0px;
}
.navinfos a
{
color: #494953;
}
.navinfos a:hover
{
text-decoration: underline;
}
p, .sidebar a, .sidebar .puce
{
color: #494953;
font-size: 25px;
word-wrap: break-word;
}
.separator p
{
font-size: 20px;
}
.lifeline
{
height: auto;
width: 70%;
border-left: 10px solid #D6D6D6;
margin: 0 auto;
text-align: left;
padding-bottom: 1px;
}
.school
{
height: auto;
}
.school h4
{
padding-top: 1.4em;
margin-left: 1em;
font-size: 1.3em;
color: #494953;
margin-bottom: 0;
}
#formation, #skills, #jobs, #projects, #contact
{
margin-top: 40px;
margin-bottom: 40px;
}
.school .blue
{
color: #394FB2;
margin-left: 1em;
font-size: 1.1em;
text-transform: uppercase;
margin-top: 0.7em;
margin-bottom: 0;
}
.school p
{
color: #494953;
margin-left: 1em;
font-size: 1.1em;
margin-top: 0.7em;
margin-bottom: 10px;
}
.col i
{
color: white;
font-size: 2em;
}
.ugraph
{
width: 70%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
display: inline-block;
}
.ucol
{
padding: 0px;
width: 15%;
height: 50px;
display: inline-block;
vertical-align: top;
text-align: center;
float: center;
}
.ucol p
{
font-size: medium;
transform: rotate(-45deg);
margin-top: 31px;
float: bottom;
padding: auto;
text-align: right;
overflow-wrap: normal;
margin-right: 30px;
}
.imgcontainer {
position: relative;
width: 45%;
display: inline-block;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(57, 79, 178, 0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.imgcontainer:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.container
{
position: relative;
width: 70%;
margin: 0 auto;
}
/* Style the form */
#regForm {
background-color: #ffffff;
margin: 0 auto;
padding: 0px;
width: 70%;
min-width: 300px;
}
/* Style the input fields */
input {
padding: 10px;
width: 100%;
font-size: 17px;
border: 1px solid #D6D6D6;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
/* Mark the active step: */
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #394FB2;
}
textarea
{
color: #494953;
font-size: 17px;
padding: 10px;
width: 100%;
font-family: 'open_sanslight', Arial, serif;
border: 1px solid #D6D6D6;
}
hr
{
border: 0px solid white;
}
/* The alert message box */
.alert {
padding: 20px;
width: 500px;
background-color: #f44336; /* Red */
color: white;
position: fixed;
bottom: 5px;
z-index: 6;
left: 50%;
margin-left: -250px;
text-align: center;
}
.alertok {
padding: 20px;
width: 500px;
background-color: #33cc33; /* Green */
color: white;
position: fixed;
bottom: 5px;
z-index: 6;
left: 50%;
margin-left: -250px;
text-align: center;
}
/* The close button */
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
/* When moving the mouse over the close button */
.closebtn:hover {
color: black;
}
2 réponses
Salut,
Merci pour ta réponse ! Lorsque j'ai lu ta réponse ça ma paru tellement logique, mon coeur battait le temps que je lance mon logiciel et que je change cette ligne mais malheureusement ce n'est pas ça :(