Мой h2 div странный - PullRequest
Новая
       24

Мой h2 div странный

0 голосов
/ 03 мая 2018

Хорошо, я сейчас создаю сайт с нуля, и у меня есть проблема, которую я ДЕЙСТВИТЕЛЬНО не понимаю ...

Итак, я сделал навигацию, слайдер и заголовок h2 в самом начале моего раздела ниже. Я не могу наложить поля на <h2>NOS SERVICES</h2>.

причина? Ну, мой код говорит, что я хочу разместить h2 с полем сверху 5%; Мой HTML, кажется, в порядке, и W3C проверен. Но когда я смотрю на инспектора и пропускаю мой h2 div, кажется, что он начинается с начала моего ползунка, пока не опустится ниже моего h2 div.

Может кто-нибудь объяснить, что я делаю не так? Я действительно не понимаю ... Спасибо!

Я объединю свой код и два экрана, чтобы вы лучше поняли ...

Смотрите мой h2 и что говорит инспектор

и теперь мой HTML, где находится слайдер ... 

/*ajout des polices*/
@font-face{
    font-family : "Roboto";
    src : url('./fonts/Roboto-Black.ttf');
}
@font-face{
    font-family : "RobotoBold";
    src : url('./fonts/Roboto-Bold.ttf');
}
@font-face{
    font-family : "RobotoThin";
    src : url('./fonts/Roboto-Thin.ttf');
}

@font-face {
  font-family: 'FontAwsome';
  src: url('./fonts/fontawsome-webfont.eot');
  src: url('./fonts/fontawsome-webfont.woff') format('woff'),
  src: url('./fonts/fontawsome-webfont.ttf') format('truetype'),
  src: url('./fonts/fontawsome-webfont.otf') format('otf'),
  src: url('./fonts/fontawsome-webfont.svg') format('svg');
}

/* keframes du site */
@keyframes sliding {
  0% { left: 0%; }
  25% { left: 0%; }
  50% { left: -100%; }
  75% { left: -100%; }
  100% { left: - 200%; }
}

/* style globaux */
body
{
	font-family: "Roboto", sans-serif;
}

h2
{
	font-size: 2em;
	font-family: "RobotoBold", sans-serif;
	text-align: center;
}

h1
{
	font-family: "RobotoBold", sans-serif;
	font-size: 2.5em;
}

/* navigation */
nav
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 15px 0 15px 0;
}

.mainmenu
{
	display: flex;
	flex-direction: row;
	list-style: none;
	align-items: center;
}

.mainmenu-item
{
	margin: 0 15% 0 0;
}

.mainmenu a
{
	text-decoration: none;
	color: #000;
}

.mainmenu a:hover
{
	border-top: 3px solid #62a8d0;
}

/* slider */
div#slider
{
	width: 100%;
	box-shadow: 0px 25px 25px #999999;
}

.innerslider
{
	position: relative;
	width: 500%;
	margin: 0;
	padding: 0;
	font-size: 0;
	left: 0;
	text-align: left;
	animation: 13s sliding infinite;
}

.innerslider img
{
	width: 20%;
	height: auto;
	float: left;
	color: #fff;
	font-size: 1.5em;
}

.fa-chevron-left
{
	position: absolute;
	left: 10px;
	top: 42%;
	color: #fff;
	font-size: 1.8em;
}

.fa-chevron-right
{
	position: absolute;
	right: 10px;
	top: 42%;
	color: #fff;
	font-size: 1.8em;
}

.fa-chevron-left:hover, .fa-chevron-right:hover
{
	font-size: 2em;
}

.slidertext
{
	position: absolute;
	top: 30%;
	left: 8%;
	color: #fff;

	width: 40%;

}

.iconeseparateur
{
	width: 5%;
	margin: 0;
}

.separateur
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.fa-circle
{

	color: #62a8d0;
}

#services
{
	top: 5%;
}
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Web Agency : l'agence de tout les projets!</title>
	<link rel="stylesheet" type="text/css" href="reset.css">
	<link rel="stylesheet" type="text/css" href="./style.css">
	<link rel="stylesheet" href="./responsive.css">
	<link rel="stylesheet" href="./fonts/css/fontawsome-all.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
		<!-- Twitter Card data -->
		<meta name="twitter:card" content="summary">
		<meta name="twitter:title" content="La WebAgency" />
		<meta name="twitter:description" content="WebAgency agence de developpement de projets, site web, application mobile." />
		<meta name="twitter:image" content="" />

		<!-- Open Graph data -->
		<meta property="og:title" content="WebAgency" />
		<meta property="og:type" content="Website" />
		<meta property="og:url" content="http://web-tool-box.com//openclassrooms/projets/webagency/webagency.html" />
		<meta property="og:image" content="" />
		<meta property="og:description" content="WebAgency agence de developpement de projets, site web, application mobile" />
		<meta property="fb:app_id" content="166523113967779"/>
		<link rel="icon" type="image/png" href="./webagency_images/images/ico/favicon.ico" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

	<!-- entête -->
		<header>
			<!-- menu -->
			<nav>
				<img src="./webagency_images/images/logo.png" alt="Logo" />
				<ul class="mainmenu">
					<li class="mainmenu-item"><a href="#">Accueil</a></li>
					<li class="mainmenu-item"><a href="#">Services</a></li>
					<li class="mainmenu-item"><a href="#">Portfolio</a></li>
					<li class="mainmenu-item"><a href="#">Contact</a></li>
				</ul>
				
			</nav>

		<!-- slider -->
		<div id="slider"> <!-- carrousel-->
				<div class="innerslider">
					<img src="./webagency_images/images/slider/bg1.jpg" alt="Images Slider1">
					<img src="./webagency_images/images/slider/bg2.jpg" alt="Images Slider2">
				</div>
				<div class="slidertext">
					<h1><span style="color:#62a8d0">WEBAGENCY</span> : L'AGENCE DE TOUS VOS PROJETS!</h1><br>
					<p style="font-size: 2em;">Vous avez un projet Web? La WebAgency vous aide à le réaliser!</p>
				</div>
				<div>
					<div class="fa fa-chevron-left" aria-hidden="true"></div>
					<div class="fa fa-chevron-right" aria-hidden="true"></div>
				</div>
				<div id="barfill">
					<div class="fill">
					</div>
				</div>
			</div>
		</header>

		<!-- section 1 -->
		<section id="services">
			<h2>NOS SERVICES</h2>
			<div class="separateur"><hr class="iconeseparateur"><i class="fas fa-circle"></i><hr class="iconeseparateur"></div>
				<p>Nous proposons les meilleurs services et en plus, aux meilleurs prix!! Nous avons une équipe de professionnels tous prêt à accueillir votre projet et lui donner vie selon vos souhaits. N'hésitez pas à nous contacter pour un devis, un projet web ou pour un magasin web. Les éléments pris en charge par l'UX vont de la partie commerciale à l'accessibilité.</p>
				<img src="./webagency_images/images/main-feature.png" alt="Image Mac">

				<h3>UX Design</h3>
					<p><b>U</b>ser e<b>X</b>périence : son rôle à pour but de faire la liaison entre l'interface construite, et l'utilisateur. Il est chargé de rendre l’expérience d'utilisation fluide, simple, intuitive, de faciliter l'utilisation de l'utilisateur, de réfléchir pour lui à tout ces moyens là d'avoir la meilleure expérience possible sur son support. Faites confiance à nos équipes pour tout mettre en oeuvre pour avoir l'interface parfaitement en accords avec vos attentes!</p>

				<h3>UI Design</h3>
					<p><b>U</b>ser <b>I</b>nterface : son rôle est là pour rendre accessible, optimale et facile, l'accès et l’exécution des dispositifs liés à l'interface des applications et machines. Nos professionnels sont là pour vous assurer la meilleure expérience possible!</p>

				<h3>SEO</h3>
					<p><b>S</b>earch <b>E</b>ngine <b>O</b>ptimization : son rôle est d'optimiser au mieux le référencement des outils web, d'un site... Le travaille se fait sur les mots clés, la sémantique, l'étude de la concurrence, du marché actuel et doit être fait régulièrement pour mettre à jour les données importantes au référencement. Soyez assuré que votre site sera toujours référencé au mieux et que les clés du référencement seront mises à jours régulièrement par nos services! </p>

		</section>

		<!-- section 2-->
		<section id="projets">
			<h2>NOS PROJETS</h2>
			<div class="separateur"><hr class="iconeseparateur"><i class="fas fa-circle"></i><hr class="iconeseparateur"></div>
			<div class="row1"></div>
			<div class="row2"></div>
			
		</section>

		<!-- pieds de page -->
	<footer>

		<form method="post">
					<h2>Contact Info</h2>
					<h4>WebAgency SAS<br /> 25 rue d'Hauteville 75010 Paris<br /> Tel : 01 02 03 04 05</h4>
					<input type="text" name="Nom" placeholder="Nom"><br/>
					<input type="text" name="E-mail" placeholder="E-mail"><br />
					<input type="text" name="Sujet" placeholder="Sujet"><br />
					<textarea id="subject" name="subject" placeholder="Votre message" style="height:250px"></textarea><br />
					<p class="button2" style="width: 50%">Envoyer</p>
				</form>

		<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d2624.221424608057!2d2.3476369159354156!3d48.87305530762753!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1525109889241"  height="800" style="border:0; opacity: 0.7;" allowfullscreen></iframe>
	</footer>
</body>
</html>

1 Ответ

0 голосов
/ 03 мая 2018

Я бы начал с удаления этого класса .slidertext из div, который содержит h1. Этот класс имеет position: absolute, который выводит элемент из потока документов, а также некоторые другие параметры, которые действительно не имеют смысла в этом контексте. Тогда иди оттуда .... 

/*ajout des polices*/

@font-face {
  font-family: "Roboto";
  src: url('./fonts/Roboto-Black.ttf');
}

@font-face {
  font-family: "RobotoBold";
  src: url('./fonts/Roboto-Bold.ttf');
}

@font-face {
  font-family: "RobotoThin";
  src: url('./fonts/Roboto-Thin.ttf');
}

@font-face {
  font-family: 'FontAwsome';
  src: url('./fonts/fontawsome-webfont.eot');
  src: url('./fonts/fontawsome-webfont.woff') format('woff'), src: url('./fonts/fontawsome-webfont.ttf') format('truetype'), src: url('./fonts/fontawsome-webfont.otf') format('otf'), src: url('./fonts/fontawsome-webfont.svg') format('svg');
}


/* keframes du site */

@keyframes sliding {
  0% {
    left: 0%;
  }
  25% {
    left: 0%;
  }
  50% {
    left: -100%;
  }
  75% {
    left: -100%;
  }
  100% {
    left: - 200%;
  }
}


/* style globaux */

body {
  font-family: "Roboto", sans-serif;
}

h2 {
  font-size: 2em;
  font-family: "RobotoBold", sans-serif;
  text-align: center;
}

h1 {
  font-family: "RobotoBold", sans-serif;
  font-size: 2.5em;
}


/* navigation */

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 15px 0 15px 0;
}

.mainmenu {
  display: flex;
  flex-direction: row;
  list-style: none;
  align-items: center;
}

.mainmenu-item {
  margin: 0 15% 0 0;
}

.mainmenu a {
  text-decoration: none;
  color: #000;
}

.mainmenu a:hover {
  border-top: 3px solid #62a8d0;
}


/* slider */

div#slider {
  width: 100%;
  box-shadow: 0px 25px 25px #999999;
}

.innerslider {
  position: relative;
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  left: 0;
  text-align: left;
  animation: 13s sliding infinite;
}

.innerslider img {
  width: 20%;
  height: auto;
  float: left;
  color: #fff;
  font-size: 1.5em;
}

.fa-chevron-left {
  position: absolute;
  left: 10px;
  top: 42%;
  color: #fff;
  font-size: 1.8em;
}

.fa-chevron-right {
  position: absolute;
  right: 10px;
  top: 42%;
  color: #fff;
  font-size: 1.8em;
}

.fa-chevron-left:hover,
.fa-chevron-right:hover {
  font-size: 2em;
}

.slidertext {
  position: absolute;
  top: 30%;
  left: 8%;
  color: #fff;
  width: 40%;
}

.iconeseparateur {
  width: 5%;
  margin: 0;
}

.separateur {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.fa-circle {
  color: #62a8d0;
}

#services {
  top: 5%;
}
<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <title>Web Agency : l'agence de tout les projets!</title>
  <link rel="stylesheet" type="text/css" href="reset.css">
  <link rel="stylesheet" type="text/css" href="./style.css">
  <link rel="stylesheet" href="./responsive.css">
  <link rel="stylesheet" href="./fonts/css/fontawsome-all.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
  <!-- Twitter Card data -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="La WebAgency" />
  <meta name="twitter:description" content="WebAgency agence de developpement de projets, site web, application mobile." />
  <meta name="twitter:image" content="" />

  <!-- Open Graph data -->
  <meta property="og:title" content="WebAgency" />
  <meta property="og:type" content="Website" />
  <meta property="og:url" content="http://web-tool-box.com//openclassrooms/projets/webagency/webagency.html" />
  <meta property="og:image" content="" />
  <meta property="og:description" content="WebAgency agence de developpement de projets, site web, application mobile" />
  <meta property="fb:app_id" content="166523113967779" />
  <link rel="icon" type="image/png" href="./webagency_images/images/ico/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <!-- entête -->
  <header>
    <!-- menu -->
    <nav>
      <img src="./webagency_images/images/logo.png" alt="Logo" />
      <ul class="mainmenu">
        <li class="mainmenu-item"><a href="#">Accueil</a></li>
        <li class="mainmenu-item"><a href="#">Services</a></li>
        <li class="mainmenu-item"><a href="#">Portfolio</a></li>
        <li class="mainmenu-item"><a href="#">Contact</a></li>
      </ul>

    </nav>

    <!-- slider -->
    <div id="slider">
      <!-- carrousel-->
      <div class="innerslider">
        <img src="./webagency_images/images/slider/bg1.jpg" alt="Images Slider1">
        <img src="./webagency_images/images/slider/bg2.jpg" alt="Images Slider2">
      </div>
      <div>
        <h1><span style="color:#62a8d0">WEBAGENCY</span> : L'AGENCE DE TOUS VOS PROJETS!</h1><br>
        <p style="font-size: 2em;">Vous avez un projet Web? La WebAgency vous aide à le réaliser!</p>
      </div>
      <div>
        <div class="fa fa-chevron-left" aria-hidden="true"></div>
        <div class="fa fa-chevron-right" aria-hidden="true"></div>
      </div>
      <div id="barfill">
        <div class="fill">
        </div>
      </div>
    </div>
  </header>

  <!-- section 1 -->
  <section id="services">
    <h2>NOS SERVICES</h2>
    <div class="separateur">
      <hr class="iconeseparateur"><i class="fas fa-circle"></i>
      <hr class="iconeseparateur">
    </div>
    <p>Nous proposons les meilleurs services et en plus, aux meilleurs prix!! Nous avons une équipe de professionnels tous prêt à accueillir votre projet et lui donner vie selon vos souhaits. N'hésitez pas à nous contacter pour un devis, un projet web ou
      pour un magasin web. Les éléments pris en charge par l'UX vont de la partie commerciale à l'accessibilité.</p>
    <img src="./webagency_images/images/main-feature.png" alt="Image Mac">

    <h3>UX Design</h3>
    <p><b>U</b>ser e<b>X</b>périence : son rôle à pour but de faire la liaison entre l'interface construite, et l'utilisateur. Il est chargé de rendre l’expérience d'utilisation fluide, simple, intuitive, de faciliter l'utilisation de l'utilisateur, de réfléchir
      pour lui à tout ces moyens là d'avoir la meilleure expérience possible sur son support. Faites confiance à nos équipes pour tout mettre en oeuvre pour avoir l'interface parfaitement en accords avec vos attentes!</p>

    <h3>UI Design</h3>
    <p><b>U</b>ser <b>I</b>nterface : son rôle est là pour rendre accessible, optimale et facile, l'accès et l’exécution des dispositifs liés à l'interface des applications et machines. Nos professionnels sont là pour vous assurer la meilleure expérience
      possible!</p>

    <h3>SEO</h3>
    <p><b>S</b>earch <b>E</b>ngine <b>O</b>ptimization : son rôle est d'optimiser au mieux le référencement des outils web, d'un site... Le travaille se fait sur les mots clés, la sémantique, l'étude de la concurrence, du marché actuel et doit être fait
      régulièrement pour mettre à jour les données importantes au référencement. Soyez assuré que votre site sera toujours référencé au mieux et que les clés du référencement seront mises à jours régulièrement par nos services! </p>

  </section>

  <!-- section 2-->
  <section id="projets">
    <h2>NOS PROJETS</h2>
    <div class="separateur">
      <hr class="iconeseparateur"><i class="fas fa-circle"></i>
      <hr class="iconeseparateur">
    </div>
    <div class="row1"></div>
    <div class="row2"></div>

  </section>

  <!-- pieds de page -->
  <footer>

    <form method="post">
      <h2>Contact Info</h2>
      <h4>WebAgency SAS<br /> 25 rue d'Hauteville 75010 Paris<br /> Tel : 01 02 03 04 05</h4>
      <input type="text" name="Nom" placeholder="Nom"><br/>
      <input type="text" name="E-mail" placeholder="E-mail"><br />
      <input type="text" name="Sujet" placeholder="Sujet"><br />
      <textarea id="subject" name="subject" placeholder="Votre message" style="height:250px"></textarea><br />
      <p class="button2" style="width: 50%">Envoyer</p>
    </form>

    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d2624.221424608057!2d2.3476369159354156!3d48.87305530762753!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1525109889241" height="800" style="border:0; opacity: 0.7;" allowfullscreen></iframe>
  </footer>
</body>

</html>
...