[Résolu] Petite espace blanc qui dérange tout en haut par RichardYe - page 1

Bonjour,

Alors après avoir résolu la petite ligne blanche j'ai remarqué un autre problème.

J'ai une autre ligne blanche qui se situe tout en haut de ma page web (entre la bar de navigation et la première photo)

La voici :

Voilà le CSS :

body{
	min-width:750px;
	min-height:550px;
}

/* Mot sur image*/
#motSurImage{
	background-image:url("../image/1.jpg"); 
	width: 100%; 
	height:100px;
}
#motSurImage .mot2{
	font-size:38px;
	text-decoration:none;
	color:#0900CB;
	margin-left:30px;
    position:relative;
	top:20px;
}
/* MENU deroulant*/
#menu-deroulant, #menu-deroulant ul {
    padding:0;
    margin:0;
    list-style: none;
}
#menu-deroulant {
	width:100%;
	background-color:grey;
	height:55px;
	margin:0;
	padding:0;
	position:relative;
}
/* on place les liens du menu horizontalement */
#menu-deroulant li {
    display: inline-block;
	margin-left:30px;
	text-align:center;
}

#menu-deroulant a {
    text-decoration: none;
    display: block;
	color:black;
	width:100%;
	margin-left: 30px;
	margin-right:50px;
}
/* Au survol des li du menu on replace les sous menus */
#menu-deroulant ul .submenu{
    position: absolute;
	display:none;
}
/* Au survol des li du menu on replace les sous menus */
#menu-deroulant li:hover + .submenu {
    display:block;
}


/* Partie  2 */
div#presentation { 
	background-image:url("../image/3.jpg");
	height: 350px;
	
}
#presentation p {
	width:100%;	
	position:relative;
	margin:0;
	padding:0;
	}
div#presentation #wel{
	text-decoration:none;
	text-align:center;
	position: relative;
	font-size: 22px;
	color: white;
	top:20px;
}
#wel2,#wel3,#wel4,#wel5{
	text-decoration:none;
	color:yellow;
	font-size: 20px;
	text-align:center;
    border: solid 2px black;
	background-color: green;
	top:30px;
	display:inline-block;
}
#presentation .p1 {
	text-align:center;
}
#presentation .p2 {
	text-align:center;
}

#presentation a{
	position : relative;
	padding:10px 10px 10px 10px;
	margin: 5px 5px 5px 5px;
	width:20%;
	text-align:center;
	text-decoration:none;
	color:white;
	font-weight:bold;
	
}
#presentation .a {
	text-decoration:underline;
}
	
#presentation .p3,.p4 {
	position:relative;
	margin-top :40px;
	text-align:center;
	color:black;
	font-size: 25px;
	font-weight:bold;
}

/* PARTIE 3*/
#avenir {
	background-color: blue;
	height:350px;
	width:100%;
}
#avenir p{
	margin:0;
}



/*Partie 4*/ 
#temps .temps1{
	position:relative;
	margin:0;
	padding:0;
	font-size:25px;
	word-wrap:break-word;
	margin-left:20%;
	margin-right:20%;
}
div#temps{
	position:relative;
	height:670px;
	background-color:red;
}
#temps ul{
	list-style:none;
	width:100%;
}

#temps ul li {
	position:relative;
	top: 15px;
	font-size:25px;
}

#temps .temps2{
	text-decoration:underline;
	margin-left: 20%;
	font-weight:bold;
	font-size:25px;
}
#temps td a{
	text-decoration:none;
	font-size:25px;
	line-height:50px;
	text-align:left;
	color:black;
	width:100%;
}
#temps table{
	margin-left:20%;
}
#temps td {
	border-bottom-style:groove;	
}
#temps .far1{
	margin-left:300px;
}
	
#temps table tr:hover td{
	background-color:lightgrey;
	
}
#temps .blockt1{
	top:10px;
	position:relative;
	
}
#temps .blockt2{
	border:solid black 1px;
    font-size:20px;
	margin-left:20%;
	background-color:olive;
	padding:10px;
	text-decoration:none;
	color:black;
}
#temps .blockt3{
	border:solid black 1px;
	font-size:20px;
	margin-left:50px;;
	background-color:olive;
	padding:10px;
	text-decoration:none;
	color:black;
}
#temps .blockt1 .blockt2:hover {
	color:white;
}
#temps .blockt1 .blockt3:hover {
	color:white;
}

/*PARTIE 5*/
div#register{
	position:relative;
	background-color: #228B22;
	margin:0;
	padding:0;
	height:150px;
}
#register .stay{
	position:relative;
	text-align:center;
	top: 20px;
	font-size:20px;
	color:white;
}
#register .stay2{
	position:relative;
	text-align:center;
	font-size:20px;
	color:white;
	top:2px;
}	
#register .stay3{
	position:relative;
	margin-left:41%;
}

/* PARTIE 6 SPONSOR*/
div#sponsor{
	text-align:center;
}
#sponsor .sponsor {
	text-align:center;
	font-size:20px;
}
#sponsor .image{
	width:150px;
	height:100px;
}
/* PARTIE 7 FOOTER*/
#footer .footer1 {
	bottom:0;
	text-align:center;
	background-color:grey;
	font-size:14px;
	height:32px;
	
}

Voilà le HTML :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Accueil</title>
		<link rel="stylesheet" type="text/css" href="style/style3.css" />
		<link rel="stylesheet" type="text/css" href="style/normalize.css" />
		<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	-->
	</head>
	
	<body>
	<div id="motSurImage">
			<p class="mot"><a href="" class="mot2"> Écosia</a></p>
			</div>
		
		<div id="menu-deroulant">
			<ul>
					<li class="pp"><a href="index.html">Accueil</a></li>
				
					<li class="pp"><a href="news.html">Actualité</a>
						<ul class="submenu">
							<li><a href="">Association </a></li>
							<li><a href="">Activité</a></li> 
						</ul>
				    </li>
				    <li class="pp"><a href="info.html">Information</a>
						<ul class="submenu">
							<li> <a href="">Association</a></li>
							<li> <a href="">Activité</a></li>
						</ul>
					</li>				
				    <li class="pp"><a href="orga.html">Organisation</a></li>
					<li class="pp"><a href="time.html">Calendrier</a></li>
					<li class="pp"><a href="other.html">Autre </a></li>
					<li class="pp"><a href="contact.html">Contact</a></li>
			</ul>
		</div>
	
		
			<div id="presentation">
		
				<p class="p1"><a href="" id="wel">Bienvenu sur le site Écosia</a></p>
				<br>
				<p class="p2"><a href="" id="wel2"> Projets</a> <a href="" id="wel3"> Nouveautés</a></p>
				<p class="p2"><a href="" id="wel4"> Communité </a> <a href="" id="wel5">  Évènements  </a></p>
				<p class="p3"> Venez vous inscrire :<a class="a" href="">ICI</a></p> 
				<p class="p4">pour participer la nouvelle évènement écologique de l'année avec Écosia</p>
		   </div>
			
			<div id="avenir">
				<p><a href=""> 5</a></p>
				<p><a href=""> 6</a></p>
				<p><a href=""> 7</a></p>
				<p><a href=""> 8</a></p>
			 </div>
			
			<div id="temps">
				<p class="temps1">
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
					industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type 
					and scrambled it to make a type specimen book. It has survived not only five centuries, but also the 
					leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with 
					the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
					software like Aldus PageMaker including versions of Lorem Ipsum.</p>
				<p class="temps2"> DATES DES ÉVÈNEMENT :</p>
				<p class="temps3">
					<table>
				<tr><td><a href="" class="far"> Èvénement 1:</a>  <a class="far1"> 15 mars 20XX</a></td><tr>                
					
				<tr><td><a href="" class="far"> Èvénement 2:</a>  <a class="far1"> 14 fevrier 20XX</a></td></tr>
					
		        <tr><td><a href="" class="far"> Èvénement 3:</a>  <a class="far1">  05 avril 20XX</a></td></tr>
					
                <tr><td><a href="" class="far"> Èvénement 4:</a>   <a class="far1">   07 mai 20XX</a></td></tr>
					
                <tr><td><a href="" class="far"> Èvénement 5:</a>    <a class="far1">   01 juin 20XX</a></td></tr>
					
                <tr><td><a href="" class="far"> Èvénement 6:</a>  <a class="far1">    31 aout 20XX</a></td></tr>
				</table>
				<p class="blockt1"> <a href="register" class="blockt2">Participer</a><a href="more" class="blockt3">Information +</a>  
		</div>
		<div id="register">
					<p class="stay"> Newsletters !</p>
			<p class="stay2"> Recevez des nouvelles. </p>
			<input type="email" placeholder="Votre email" class="stay3"/> 
			<input type="submit" value="Envoyer" class="stay4"/>
			</div>	
		
			<div id="sponsor">
				<p class="sponsor"> Organisé par :</p>
				<img class="image1" src="image/ecosia.png">				
				<p class="sponsor"> Sponsorisé par :</p>
				<img class="image" src="image/4.jpg">
				<img class="image" src="image/Logo-fb.png">
				<img class="image" src="image/printemps.png">
				
		</div>
		
			<div id="footer">
				<p class="footer1">Dénos | Tous droits réservés</p>
			</div>
	</body>
</html>

Merci d'avance.

Oui, ça retire toutes les marges automatiques de tout ce qui en a (et ce qui n'en a pas aussi, d'ailleurs) ; et les éléments en ont généralement pour une raison de lisibilité.

Ça veut dire qu'après les avoir enlevées, il va falloir les remettre, au cas par cas, avec tous les risques d'oublis et de mauvaises décisions que ça comporte. Voilà pourquoi on dit qu'un reset est destructeur : ça a des effets de bord indésirables auxquels il va falloir pallier, alors que la solution de départ était juste de ne pas faire ça.

On préfèrera généralement utiliser une feuille de style par défaut, comme Normalize, qui va simplement harmoniser les éventuelles différences entre navigateurs https://necolas.github.io/normalize.css/ ; mais même ça, c'est assez marginal. Les navigateurs modernes ont très peu de différences de rendu fondamentales.

-
Edité par EmmanuelBeziat 16 juin 2020 à 1:09:03

RichardYe

10 juin 2020 à 21:45:02

tycyly

15 juin 2020 à 8:59:31

Hello,

Certains éléments possèdent un padding ou une margin par défaut. Personnellement j'utilise :

* {
    padding: 0px;
    margin: 0px;
}

Je sais que certains n'aiment pas cette méthode mais au moins ca marche.

Lenny

"Je n'ai pas échoué. J'ai juste trouvé 10 000 moyens qui ne fonctionnent pas." - Thomas Edison

EmmanuelBeziat

15 juin 2020 à 12:22:12

tycyly a écrit:

Je sais que certains n'aiment pas cette méthode

Et il y a de très bonnes raisons à ça. Oui, "ça marche", mais ça va détruire absolument tout.

Alors qu'il suffit juste de ça :

body {
  margin: 0;
}

https://www.emmanuelbeziat.com/blog/les-resets-css-a-la-poubelle/

RichardYe, je t'invite aussi à lire ça : https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

-
Edité par EmmanuelBeziat 15 juin 2020 à 12:23:09

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

15 juin 2020 à 16:34:39

EmmanuelBeziat a écrit:

Comment ca tout détruire ? Ca met juste une margin et un padding de 0px a tous les éléments non ? Merci par contre pour la correction

16 juin 2020 à 1:07:28

17 juin 2020 à 12:59:10

D'accord, effectivement je comprends que ca puisse être problématique. Conseilles-tu d'utiliser une feuille de style normalize pour chaque projet ?

17 juin 2020 à 19:35:59

Non, je conseille de ne rien utiliser et de simplement penser à mettre un margin: 0; sur body.

Mais utiliser Normalize n'est pas dommageable, étant donné que chaque déclaration est ciblée sur un point très précis et spécifique.

-
Edité par EmmanuelBeziat 17 juin 2020 à 19:36:42

27 juin 2020 à 14:53:30

BOnjour,

Alors merci, pour toutes les personnes qui ont postulé mais, j'ai déjà trouvé la solution hier.

Non, je conseille de ne rien utiliser et de simplement penser à mettre un margin: 0; sur body. Mais utiliser Normalize n'est pas dommageable, étant donné que chaque déclaration est ciblée sur un point très précis et spécifique.
-
Edité par EmmanuelBeziat 17 juin 2020 à 19:36:42

J'ai utilisé la méthode aussi, mais il ne marchait pas on avait toujours le meme problème.

Merci

Petite espace blanc qui dérange tout en haut

Petite espace blanc qui dérange tout en haut

Supprimer

Modérer

Signaler le message aux modérateurs