我的h2 div很奇怪

时间：2018-05-02 21:21:25

标签： html css web-inspector

好的，我正在从头开始制作一个网站，我有一个问题，我真的不明白......

所以，我在下面的部分开始时制作了导航，滑块和h2标题。我无法向<h2>NOS SERVICES</h2>申请保证金。

原因？好吧，我的代码说我想放置h2，保证金最高为5％; 我的HTML看起来没问题，w3c验证了。但是当我查看检查员并通过我的h2 div时，它似乎从我的滑块开始直到我的h2 div之下。

有人可以解释我做错了什么吗？ 我真的不明白...... 谢谢！

我会加入我的代码和两个屏幕，让您更好地理解......

See my h2 and what the inspector says

and now, my html where the slider is... 

/*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 :(得分：0)

首先，我要从包含import { talk } from "my-package/dist/one" 的{​​{1}}中删除.slidertext类。该类具有div，它将元素从文档流中取出，还有一些其他设置在该上下文中实际上没有意义。然后从那里继续...... 

h1
position: absolute

相关问题
最新问题