27799 sujets

CSS et mise en forme, CSS3

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:

		<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)
salut
un lien vers index.html fait recharger la page
pour un retour en haut de la page:
<p><a href="#">TOP</a></p>


si çà répond à ta question.
a écrit :
un lien vers index.html fait recharger la page
pour un retour en haut de la page:

... ça n'a rien à voir avc ma question originale qui est le chevauchement de bloc Smiley smile
mais merci quand même Smiley cligne