Bonjour

Voilà, j'ai fini les cours sur HTML5 et CSS3 et j'ai décidé de créer une sorte de CV en ligne mais malheureusement le header rien ne va comme prévu quand j’agrandis la page. Il y a l'image au milieu qui  ne veut pas rester sur place, le banner qui ne suit pas la page et surtout il n'est pas responsive alors que la partie section est responsive.
Voici les captures d'écrans de la page internet et mon code source.

/*Defintion de la police personnalisé*/
@font-face {
    font-family: 'introheadr-base';
    src: url('polices/introheadr-base-webfont.eot'),
    url('polices/introheadr-base-webfont.eot?#iefix') format('embedded-opentype'),
    url('polices/introheadr-base-webfont.ttf') format('truetype'),
    url('polices/introheadr-base-webfont.svg#Dayrom') format('svg'),
    url('polices/introheadr-base-webfont.woff2') format('woff2'),
    url('polices/introheadr-base-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'introrustg-base2line';
    src: url('polices/introrustg-base2line-webfont.eot'),
    	 url('polices/introrustg-base2line-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/introrustg-base2line-webfont.woff2') format('woff2'),
         url('polices/introrustg-base2line-webfont.woff') format('woff'),
         url('polices/introrustg-base2line-webfont.ttf') format('truetype'),
         url('polices/introrustg-base2line-webfont.svg#Dayrom') format('svg'),

    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'introscriptr-h2base';
    src: url('polices/introscriptr-h2base-webfont.eot');
    src: url('polices/introscriptr-h2base-webfont.eot?#iefix') format('embedded-opentype'),
    url('polices/introscriptr-h2base-webfont.woff2') format('woff2'),
    url('polices/introscriptr-h2base-webfont.woff') format('woff'),
    url('polices/introscriptr-h2base-webfont.ttf') format('truetype'),
    url('polices/introscriptr-h2base-webfont.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

body
{
	background-image: url(images/gris.jpg);
	font-family: 'Trebuchet-MS', Arial, sans-serif,
	background-color: white;
}

header
{
	display: flex,
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 70px;
}

#bloc_page
{
	width: 100%;
	margin: auto;
}

#image_banner
{
	background: url(images/table.jpg) no-repeat;
	margin: 0px;
	position: relative;
	height: 875px;
	box-shadow: 0 10px 10px 10px grey;
	width: 1645px;
	border-radius: 12px
	padding:0px
	max-height: none;
	max-width: none;
	z-index: -999999;
}

#banner_description
{
	position: absolute;
	background-color: rgb(175,166,153);
	opacity: 0.7;
}

#logo
{
	display: flex;
	flex-direction: row;
	align-items: baseline;
}

#logo img
{
	width: 60px;
	height: 60px;
	position: relative;
	top: 7px;
	margin-left: 10px;
}

#logo h1, a
{
	color: white;
	margin-left: 5px;
}

#logo nav
{
	margin-left: 262px;
}

header h1
{
	font-family: 'introscriptr-h2base', sans-serif;
	font-weight: normal;
	font-size: 2.3em;
	margin: 0 0 0 8px;
}

header a
{
	text-decoration: none;
}

nav ul
{
	list-style-type: none;
	display: flex;
}

nav li
{
	margin-right: 50.5px;
}

nav a
{
	font-size: 1.2em;
	color: white;
	padding: 0.1px;
	text-decoration: none;
}

nav a:hover
{
	color: rgb(82,47,28);
	border-bottom: 6px solid rgb(186,133,81);
}

#logo_CV
{
  position: absolute;
  top: 30%;
  width: 100%;
  text-align: center;
}

#logo_CV img
{
	opacity: 0.4;
	width: 22%;
	height: auto;
}

.bouton_rouge
{
	background-color: rgb(216,106,57);
	height: 25px;
	position: absolute;
	top: 0;
	border: none;
	width: 10%;
	cursor: pointer;
    font-size: 1.5em;
	text-align: center;
    margin: 50.55% 38.5%;
    border-radius: 12px;
    text-decoration: none;
    color: white;
    display: block;
    display: inline-block;
    padding: 6px 8px 3px 5px;
}

.bouton_rouge2
{
	background-color: rgb(216,106,57);
	height: 25px;
	position: absolute;
	top: 0;
	border: none;
	width: 10%;
	cursor: pointer;
    font-size: 1.5em;
	text-align: center;
    margin: 50.55% 53%;
    border-radius: 12px;
    text-decoration: none;
    color: white;
    display: block;
    display: inline-block;
    padding: 6px 10px 3px 20px;
}

.bouton_rouge .bouton_rouge2 span
{
	text-decoration: none;
}

.between_two_space
{
	position: absolute;
	font-style: 'introheadr-base', Arial, sans-serif;
	font-size: 0.8em;
	margin: 46% 40% 40% 45%;
	color: white;
}

Et mes captures d'écrans de ma page

-
Edité par Benzouye 1 juillet 2020 à 15:27:56

Salut,

Tout d'abord, change le titre, il ne correspond surement pas aux règles du forum (Un modérateur te le diras si tu ne le fais pas)

Concernant ton problème, je n'ai pas le temps de me plonger à fond dans ton code, mais je souhaitais quand même te donner quelques astuces :

- Evite de trop utiliser le style "position: absolute;", cela va rendre le responsive plus compliqué, le plus simple est d'aligner avec les margins / paddings ou les styles de placement (ex: flexbox)

- Utilise des vw, vh, %, etc quand c'est possible. Lorsque tu fournis des tailles en pixel, cela ne sera pas adapté à tous les formats d'écran

Je modifierai peut-être mon commentaire si j'ai le temps d'y revenir

Bonne chance

tycyly a écrit:

Salut,

Tout d'abord, change le titre, il ne correspond surement pas aux règles du forum (Un modérateur te le diras si tu ne le fais pas)

Concernant ton problème, je n'ai pas le temps de me plonger à fond dans ton code, mais je souhaitais quand même te donner quelques astuces :

- Evite de trop utiliser le style "position: absolute;", cela va rendre le responsive plus compliqué, le plus simple est d'aligner avec les margins / paddings ou les styles de placement (ex: flexbox)

- Utilise des vw, vh, %, etc quand c'est possible. Lorsque tu fournis des tailles en pixel, cela ne sera pas adapté à tous les formats d'écran

Je modifierai peut-être mon commentaire si j'ai le temps d'y revenir

Bonne chance

Merci

Salut,

Tu as essayé avec background-attachment: fixed;?

https://www.w3schools.com/htmL/html_images_background.asp

FredLass a écrit:

Salut,

Tu as essayé avec background-attachment: fixed;?

https://www.w3schools.com/htmL/html_images_background.asp

#image_banner
{
	background-image: url(images/table.jpg); /*fixed, l'image bouge seul*/
	background: no-repeat fixed center cover;
	position: relative;
	height: 875px;
	box-shadow: 0 10px 10px 10px grey;
	width: 1645px;
	border-radius: 12px

}

Merci pour l'astuce mais cela ne fonctionne pas. J'ai déjà rectifier les autres problèmes. Le seul problème qui me reste c'est que l'image ne veut pas suivre le navigateur internet si par exemple je zoom ou je dézoome.
Ça fait ça :