[Résolu] Dimensionnement d'une section par MarieGaudiche - page 1

Bonjour,

je débute en html/css et galère pas mal. voici mon html:

<!DOCTYPE HTML>
<!--
	Spectral by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>Behavioral Authentication</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/mainmeg.css" />
		<!-- <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> -->
	</head>
	<body>

				<!-- Header -->
				<header id="header">
						<h1><a href="index_product.html">Be-ID</a></h1>
						<nav id="nav">
							<ul>
								<li class="level1"><a href="index_product.html">Home</a></li>
								<li class="level1"><a href="#two">Product</a>
									<ul class="level2">
										<li class="level2-contents"><a href="password.html">A</a></li>
										<li class="level2-contents"><a href="impostors.html">B</a></li>
										<li class="level2-contents"><a href="policy.html">R</a></li>
										<li class="level2-contents"><a href="integrate.html">E</a></li>
									</ul>
								</li>
								<li class="level1"><a href="#">Use Cases</a>
									<ul class="level2">
										<li class="level2-contents"><a href="#">B</a></li>
										<li class="level2-contents"><a href="#">S</a></li>
										<li class="level2-contents"><a href="#">O</a></li>
									</ul>
								</li>
								<li class="level1"><a href="#">Ressources</a></li>
								<li class="level1"><a href="#three">Team</a>
									<ul class="level2">
										<li class="level2-contents"><a href="#">Story</a></li>
										<li class="level2-contents"><a href="#">Members</a></li>
										<li class="level2-contents"><a href="#">News/Events</a></li>
									</ul>
								</li>
								<li class="level1"><a href="#four">Contact us</a></li>
							</ul>
						</nav>
					</header> 

				<!-- One -->
					<section class="one">
							<h2>Lorem Ipsum</h2>
							<h4>Lorem Ispum</h4>
					</section>

	</body>
</html>

et mon css :

body{
	background-color: #ffffff;
}

/* Header */

	#header {
		background-color: #0070c0;
		height: 4em;
		left: 0;
		line-height: 3em;
		position: fixed;
		top: 0;
		width: 100%;
		text-decoration: none;
	}

		#header h1 a{
			color: #fff;
			text-decoration: none;
			height: inherit;
			line-height: inherit;
			position: absolute;
			margin-left: 1em;
			top: 0;
		}


			@media screen and (max-width: 736px) {
				#header h1{
					font-size: 0.8em;
				}
			}

		#header nav {
			height: inherit;
			line-height: inherit;
			position: absolute;
			right: 0;
			top: 0;
		}

			#header nav > ul {
				list-style: none;
				margin: 0;
				padding: 0;
				white-space: nowrap;
			}

				#header nav > ul > li {
					color: white;
					display: inline-block;
					padding: 0;
				}
				
				.level1 > a:hover{
					text-decoration: underline;
				}

					.level1 a{
						border: 0;
						color: #ffffff;
						display: block;
						font-size: 0.8em;
						letter-spacing: 0.225em;
						padding: 0 1.5em;
						text-transform: uppercase;
						font-variant: small-caps;
						text-decoration: none;
					}

						.level2{
							display: none;
						}
						
						.level1:hover .level2{
							background-color: #0070c0;
							list-style-type: none;
							text-decoration: none;
							display: block;
							position: absolute;
							border-bottom: 3px solid white;
							padding: 25px 25px 25px 10px;
						}
						
						.level2-contents > a:hover{
							text-decoration: underline;
						}
	

							@media screen and (max-width: 736px) {

								#header nav > ul > li {
									padding: 0 1.5em;
								}


						@media screen and (max-width: 736px) {

							#header nav > ul > li > a {
								padding: 0 0 0 1.5em;
							}

						}
						
/* One */

.one {
	background-color: #0070c0;
	height: 7em;
	left: 0;
	top: 4em;
	line-height: 3em;
	position: fixed;
}

le rendu n'est pas du tout celui que j'attend pour la section, le header est parfait, enfin il est comme je le voulais. mais la section n'est pas sur un fond rouge, de plus le premier h2 est caché par le header.. comment remédier à cela ?

merci d'avance pour votre aide !

MarieGaudiche

13 août 2018 à 15:52:42

Jessydan38

13 août 2018 à 15:58:22

Pour ce qui est du h2 caché tu donne des positions absolute a des éléments de ton header et donc ils doivent probablement dépasser par dessus ton h2, le comportement n'est pas le même qu'avec un positionnement block / inline-block avec lequel ça aurai "poussé" ton h2 vers le bas.

Pour la couleur de ta section regarde dans l'éditeur de style de ton navigateur si tu vois bien ta règle css et si elle n'est pas override par une autre

KévinH

13 août 2018 à 16:05:29

le problème est simple.

Tu as oublié de fermé ta media queries ici ligne 95 :

                            @media screen and (max-width: 736px) {
 
                                #header nav > ul > li {
                                    padding: 0 1.5em;
                                }

Donc ton .one n'est pas pris en compte

-
Edité par KévinH 13 août 2018 à 16:06:05

13 août 2018 à 16:12:04

la débile... merci x1000 !!

Dimensionnement d'une section

Dimensionnement d'une section

Supprimer

Modérer

Signaler le message aux modérateurs