Bonjour à tous et toutes,
Je suis nouveau en développement web. J'essaie de créer un site pour faire mon cv. Je voulais faire des liens de menus qui renvoient vers des liens internes d'une même page en signet mais... le soucis est que j'ai deux blocs qui se superposent (le bloc d'en-tête et le corps de la page).
Voici mon code html (une partie) pour exemple:
Voici mon code CSS (une partie):
Modifié par f-nour (06 Nov 2021 - 20:26)
Je suis nouveau en développement web. J'essaie de créer un site pour faire mon cv. Je voulais faire des liens de menus qui renvoient vers des liens internes d'une même page en signet mais... le soucis est que j'ai deux blocs qui se superposent (le bloc d'en-tête et le corps de la page).
Voici mon code html (une partie) pour exemple:
<div class="header">
<nav role="navigation" aria-label="Menu">
<div class="menu-principal" id="menu principal" label="Menu principal">
<a href="https://www.linkedin.com/in/nfattoum" target="_blank"><img class="profil" src="img/photo1.jpg" id="ln" alt="Accédez au profil Linkedin" /></a>
<ol class="pm" id="pm">
<li><a href="index.html">Accueil</a></li>
<li><a href="moi.html">Qui suis-je ?</a></li>
<li class="actual"><a href="comp.html">Compétences</a></li>
<li><a href="exp.html">Expériences</a></li>
<li><a href="form.html">Formations</a></li>
<li><a href="divers.html">Centres d'intérêts</a></li>
<li><a href="contact.html">Contact</a></li>
</ol>
</div>
<div class="sous-menu" id="sous-menu" label="Menu secondaire">
<ol class="sm">
<li><a href="#ci">Compétences informatiques</a></li>
<li><a href="#ct">Compétences transversales</a></li>
</ol>
</div>
</nav>
<div class="titre" id="titre">
<h1>Compétences</h1>
</div>
</div>
<main>
<div class="comp1" id="comp1" label="Compétences informatiques">
<a name="ci" class="signet"><h2>Compétences informatiques</h2></a>
<p class="inf">
<img src="img/windows.png" class="inf" alt="Logo Windows" />
<img src="img/dos.png" class="inf" alt="Logo MS-DOS" />
<img src="img/debian.png" class="inf" alt="Logo Debian" />
</p>
<ul>
<li><strong>Maintenance préventive et curative des systèmes informatiques</strong></li>
<li>Installation en réseau, gestion fichiers, partitionnement des <strong>postes Windows 10</strong></li>
<li>Commandes de base et scripts <strong>MS-DOS</strong>
<li>Installation, gestion fichiers, commandes de bases et scripts des <strong>postes Debian (et variantes )</strong></li>
</ul>
<p class="inf">
<img src="img/html.png" class="inf" alt="Logo HTML 5" />
<img src="img/css.png" class="inf" alt="logo CSS3" />
<img src="img/wp.png" class="inf" alt="Logo WordPress" />
<img src="img/github.png" class="inf" alt="logo github" />
<img src="img/vsc.png" class="inf" alt="Logo de Visual Studio Code" />
</p>
<ul>
<li>Développement de sites web en <strong>HTML5</strong>, <strong>CSS3</strong> et <strong>WordPress</strong></li>
<li>Utilisation de <strong>GitHub</strong></li>
</ul>
<p class="inf">
<img src="img/jaws.jpg" class="inf" alt="Logo Jaws" />
<img src="img/nvda.png" class="inf" alt="Logo NVDA" />
<img src="img/vo.png" class="inf" alt="Logo VoiceOver" />
</p>
<ul>
<li>Utilisation des outils d'accessibilité sur informatique (<strong>Jaws</strong>, <strong>NVDA</strong>, <strong>ZoomText</strong>, <strong>Orca</strong>...)</li>
<li>Utilisation des outils d'accessibilité sur mobile (<strong>VoiceOver</strong> et <strong>TalkBack</strong>)</li>
</ul>
<br>
<br>
</div>
<div class="comp2" id="comp2" label="Compétences transversales">
<a name="ct" class="signet"><h2>Compétences transversales</h2></a>
<ul>
<li><strong>Maitrîse des outils bureautiques</strong> tels que Microsoft Office, LibreOffice, OpenOffice...</li><strong>Animations de réunions</strong> d'équipes, de travail de groupe, de sessions de formations.</li>
<li><strong>Utilisation des outils multimédias</strong> avec ou sans assistance vocale</li>
<li><strong>Bonnes capacités rédactionnelles</strong></li>
</ul>
</div>
</main>
Voici mon code CSS (une partie):
actual {
padding: 1em;
margin: auto;
font-size: 16pt;
background-color: #194a00;
color: #eaeaaebe;
}
nav {
padding: auto;
margin: auto;
border-bottom: solid;
border-color: #194a00;
background-color: #081700;
display: block;
width: 80%;
align-block: center;
vertical-align: middle;
justify-content: center;
}
.header {
background-color: #081700;
text-align: center;
display: block;
top: 0em;
width: 100%;
margin: auto;
padding: auto;
position: fixed;
}
ol {
list-style: none;
text-align: center;
font-weight: bold;
}
.pm li {
padding: auto;
font-size: 15pt;
font-color: #d3ff6ebe;
display: inline;
}
.pm li a {
padding: 10pt;
margin: auto;
font-size: 15pt;
color: #d3ff6ebe;
font: 1em "Trebuchet MS", Arial, sans-serif;
line-height: 1em;
text-decoration: none;
}
.pm li a:hover,
.pm li a:focus,
.pm li a:active {
padding: auto;
margin: auto;
font-size: 16pt;
background-color: #194a00;
color: #eaeaaebe;
text-decoration: underline;
}
.profil {
float: left;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
margin-top: -5pt;
width: 50px;
height: 50px;
}
.sous-menu {
overflow: hidden;
}
.sm {
background-position: top;
float: right;
margin-top: 16px;
margin-right: 16px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
font-size: 14pt;
list-style: none;
}
.sm li {
float: left;
margin-left: 3px;
}
.sm a {
float: left;
padding-left: 20px;
}
main {
letter-spacing: 1.1pt;
margin-top: 10em;
margin-bottom: 5em;
padding: auto;
margin-left: auto;
margin-right: auto;
width: 80%;
align-items: center;
vertical-align: middle;
text-align: justify;
display: block;
position: static;
}
.titre {
text-align: center;
}
h1 {
letter-spacing: 2pt;
font-weight: bold;
margin-top: 1em;
}
Modifié par f-nour (06 Nov 2021 - 20:26)
