Bonjour à tous,
je débute sur HTML et CSS et je souhaite créer une page web pour ma familiariser avec les concepts. Je suis vers la fin de l'exercice mais j'ai une différence d'affichage sur IE11 que je n'arrive pas à régler ... ma page ne prends pas tout l'écran et ce réduit à la taille du texte en dessous du titre.
En copie mon code html et css.
Merci d'avance pour vos réponses.
CSS:
@font-face {
font-family: 'NexaRustSlab';
src: url('NexaRustSlab.woff');
}
body
{
background-image: url("fond_ecran.jpg");
background-size: 200%;
padding: 5px 5px 5px 5px ;
display: flex;
}
#bloc_page
{
display: flex;
margin: auto;
background-color: rgba(255,255,255,0.5) ;
border-radius: 10px;
}
/* Partie header*/
header
{
display: flex;
flex-direction: row;
justify-content: center;
background: url('photo_compressee2.jpg') no-repeat right;
}
header h1
{
font-family: 'NexaRustSlab';
color: rgb(29,100,234);
border-radius: 10px;
border: 2px gray solid;
box-shadow: 0px 4px 6px black ;
text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
}
header h1, header h2
{
text-align: center;
}
header h2
{
font-size: 1em;
}
/* Fin partie header*/
/* Partie section*/
#corp_et_lisere
{
display: flex;
flex-direction: row;
}
#lisere
{
min-width: 100px;
background-color: rgba(0,0,0, 0.7);
border-radius: 10px;
}
section
{
display: flex;
flex-direction: row;
}
h2
{
text-align: left;
clear: both;
text-decoration: underline;
color: rgb(40,19,179);
}
#Mon_experience
{
flex: 3;
padding: 20px 20px 20px 20px ;
}
#colonne_corp_cv
{
flex: 2;
padding: 20px 20px 20px 20px ;
}
/* Fin de partie section*/
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style_cv3.css" />
<title>Activité : Mon CV</title>
</head>
<body>
<div id="bloc_page">
<div id="lisere">
</div>
<div id"tout_mon_lisere">
<header>
<div id="bloc_central">
<div id="titre_principal">
<h1> Dorian RICHARD </h1>
<h2> Développeur COBOL, anciennement responsable prévention des risques professionnels</h2>
</div>
</div>
</header>
<section id="corp_cv">
<div id="Mon_experience">
<h2> Mon expérience </h2>
<ul>
<li> <strong>De 2018 à maitenant : Développeur COBOL et analyste fonctionnel MCO</strong> – Sopra Steria Group</br>
<em>Analyse foncitonnel d'évolution et d'anomalie et suivi des développements</em>
<ul>
<li>Suivi des développements : Validation des devis, suivis et tests des développements</li>
<li>Cadrage d'évolution : Participation aux ateliers de conception des évolutions</li>
<li>Analyse d'anomalie : Recherche de la cause des anaomalies</li>
</ul>
</li>
<li> <strong>De 2017 à 2018 : Responsable P2S</strong> – SUEZ Recyclage & Valorisation</br>
<em>Coordination de la politique HSE pour l’agence Périgord Limousin</em>
<ul>
<li>Pilotage : Définition et mise en oeuvre de la politique agence en accords avec les politiques régionale et nationale</li>
<li>Management de la sécurité : Développement de plans d’actions, mise en place et suivis en appui des équipes opérationnelles</li>
<li>Interface avec les services de l’état : En charge des relations avec les services tel que la DREAL, la médecine du travail, l’inspection du travail</li>
<li>Suivi de la politique environnementale : Suivi de réalisation des exigences des AP, suivi de conformités des analyses d’eau, de bruit, conformité de la gestion des DIS</li>
</ul>
</li>
<p><li> <strong>De 2016 à 2017 : Chargé de mission HSE</strong> – GIE QUALITE ENTREPRISE SUD-OUEST</br>
<em>Gestion des entreprises extérieures sur site donneur d’ordre</em></br>
<ul>
<li>Terrain : Rédaction et mise à jour de plans de prévention, accueils et audit sécurité </li>
<li>Interface avec les sites donneurs d’ordre</li>
</ul>
</li></p>
<li> <strong>De 2014 à fin 2015 : Chef de projet</strong> – EFORSA</br>
<em>Création d’une main courante électronique pour les services SSLIA et SSIAP des aéroports</em></br>
<ul>
<li>Conception : études terrain et conception des cahiers des charges</li>
<li>Suivi et gestion du projet : recettage, demandes d’améliorations, adéquation des modules au terrain, recherche de solutions techniques</li>
<li>Vente (Fonction Technico-Commercial) : Présentation du produit, interface client, réponse à appel d’offre, intégration du logiciel chez le client</li>
<li>Intégration du logiciel chez le client : Intégration aux procédures, formations, création des bases de données</li>
</ul>
</ul>
</div>
<div id="colonne_corp_cv">
<div id="Mes_compétences">
<h2> Mes compétences </h2>
<ul>
<li> HTML5 et CSS3 (bientôt bientôt)</li>
<li> VBA </li>
<li> Analyse fonctionnelle </li>
<li> COBOL</li>
<li> Prévention des risques professionnels </li>
</ul>
</div>
<div id="Ma_formation">
<h2> Ma formation </h2>
<p>Je prends l'exemple de Mathieu et de son champ "Ma formation"!!!!!!!!!! Merci beaucoup pour ces formations gratuites qui permettent de progresser sans prise de tête</p>
</div>
</div>
</section>
<footer>
<p> Pour s'amuser on met un pied de page
</p>
</footer>
</div>
</div>
</body>
</html>
je débute sur HTML et CSS et je souhaite créer une page web pour ma familiariser avec les concepts. Je suis vers la fin de l'exercice mais j'ai une différence d'affichage sur IE11 que je n'arrive pas à régler ... ma page ne prends pas tout l'écran et ce réduit à la taille du texte en dessous du titre.
En copie mon code html et css.
Merci d'avance pour vos réponses.
CSS:
@font-face {
font-family: 'NexaRustSlab';
src: url('NexaRustSlab.woff');
}
body
{
background-image: url("fond_ecran.jpg");
background-size: 200%;
padding: 5px 5px 5px 5px ;
display: flex;
}
#bloc_page
{
display: flex;
margin: auto;
background-color: rgba(255,255,255,0.5) ;
border-radius: 10px;
}
/* Partie header*/
header
{
display: flex;
flex-direction: row;
justify-content: center;
background: url('photo_compressee2.jpg') no-repeat right;
}
header h1
{
font-family: 'NexaRustSlab';
color: rgb(29,100,234);
border-radius: 10px;
border: 2px gray solid;
box-shadow: 0px 4px 6px black ;
text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
}
header h1, header h2
{
text-align: center;
}
header h2
{
font-size: 1em;
}
/* Fin partie header*/
/* Partie section*/
#corp_et_lisere
{
display: flex;
flex-direction: row;
}
#lisere
{
min-width: 100px;
background-color: rgba(0,0,0, 0.7);
border-radius: 10px;
}
section
{
display: flex;
flex-direction: row;
}
h2
{
text-align: left;
clear: both;
text-decoration: underline;
color: rgb(40,19,179);
}
#Mon_experience
{
flex: 3;
padding: 20px 20px 20px 20px ;
}
#colonne_corp_cv
{
flex: 2;
padding: 20px 20px 20px 20px ;
}
/* Fin de partie section*/
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style_cv3.css" />
<title>Activité : Mon CV</title>
</head>
<body>
<div id="bloc_page">
<div id="lisere">
</div>
<div id"tout_mon_lisere">
<header>
<div id="bloc_central">
<div id="titre_principal">
<h1> Dorian RICHARD </h1>
<h2> Développeur COBOL, anciennement responsable prévention des risques professionnels</h2>
</div>
</div>
</header>
<section id="corp_cv">
<div id="Mon_experience">
<h2> Mon expérience </h2>
<ul>
<li> <strong>De 2018 à maitenant : Développeur COBOL et analyste fonctionnel MCO</strong> – Sopra Steria Group</br>
<em>Analyse foncitonnel d'évolution et d'anomalie et suivi des développements</em>
<ul>
<li>Suivi des développements : Validation des devis, suivis et tests des développements</li>
<li>Cadrage d'évolution : Participation aux ateliers de conception des évolutions</li>
<li>Analyse d'anomalie : Recherche de la cause des anaomalies</li>
</ul>
</li>
<li> <strong>De 2017 à 2018 : Responsable P2S</strong> – SUEZ Recyclage & Valorisation</br>
<em>Coordination de la politique HSE pour l’agence Périgord Limousin</em>
<ul>
<li>Pilotage : Définition et mise en oeuvre de la politique agence en accords avec les politiques régionale et nationale</li>
<li>Management de la sécurité : Développement de plans d’actions, mise en place et suivis en appui des équipes opérationnelles</li>
<li>Interface avec les services de l’état : En charge des relations avec les services tel que la DREAL, la médecine du travail, l’inspection du travail</li>
<li>Suivi de la politique environnementale : Suivi de réalisation des exigences des AP, suivi de conformités des analyses d’eau, de bruit, conformité de la gestion des DIS</li>
</ul>
</li>
<p><li> <strong>De 2016 à 2017 : Chargé de mission HSE</strong> – GIE QUALITE ENTREPRISE SUD-OUEST</br>
<em>Gestion des entreprises extérieures sur site donneur d’ordre</em></br>
<ul>
<li>Terrain : Rédaction et mise à jour de plans de prévention, accueils et audit sécurité </li>
<li>Interface avec les sites donneurs d’ordre</li>
</ul>
</li></p>
<li> <strong>De 2014 à fin 2015 : Chef de projet</strong> – EFORSA</br>
<em>Création d’une main courante électronique pour les services SSLIA et SSIAP des aéroports</em></br>
<ul>
<li>Conception : études terrain et conception des cahiers des charges</li>
<li>Suivi et gestion du projet : recettage, demandes d’améliorations, adéquation des modules au terrain, recherche de solutions techniques</li>
<li>Vente (Fonction Technico-Commercial) : Présentation du produit, interface client, réponse à appel d’offre, intégration du logiciel chez le client</li>
<li>Intégration du logiciel chez le client : Intégration aux procédures, formations, création des bases de données</li>
</ul>
</ul>
</div>
<div id="colonne_corp_cv">
<div id="Mes_compétences">
<h2> Mes compétences </h2>
<ul>
<li> HTML5 et CSS3 (bientôt bientôt)</li>
<li> VBA </li>
<li> Analyse fonctionnelle </li>
<li> COBOL</li>
<li> Prévention des risques professionnels </li>
</ul>
</div>
<div id="Ma_formation">
<h2> Ma formation </h2>
<p>Je prends l'exemple de Mathieu et de son champ "Ma formation"!!!!!!!!!! Merci beaucoup pour ces formations gratuites qui permettent de progresser sans prise de tête</p>
</div>
</div>
</section>
<footer>
<p> Pour s'amuser on met un pied de page
</p></footer>
</div>
</div>
</body>
</html>