Espace entre blocs

**becket** · 08/04/2019, 13h34

Bonjour à tous,

Je me remets à HTML/CSS après une trèèèèès longue absence et j'essaye de faire de la mise en forme un peu correcte.
Je suis donc sur des choses assez basiques que je ne m'explique pas.

J'ai donc une page qui est découpée comme ceci :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<header></header>
<nav></nav/>
<div>
   <section></section>
   <section></section>
</div>

Le code html "complet"

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!Doctype html>
<html lang="fr">
<head>
	<title>Super Titre</title>
	<link rel="stylesheet" href="style.css"> 
</head>
<body>
 
<header>
<h1> Bienvenue sur le site </h1>
</header>
<nav>
<ul> 
<li> Menu 1</li>
<li> Menu 2</li>
<li> Menu 4</li>
<li> Menu 5</li>
 
</ul>
</nav>
<div id="CorpdePage">
<section id="SectionMenuGauche">
     <article id="LiensSection" >
    	<ul>
    	<li>Section1</li>
    	<li>Section2</li>
    	<li>Section3</li>
    	<li>Section4</li>
    	<li>Section5</li>
    	</ul>
     </article>
     <article id="MediaSociaux">
     <ul>
     	<li>Facebook</li>
     	<li>Twitter</li>
     </ul>
     </article>	
 </section>
 <section id="SectionArticle">    
	<article>
		<h2>Titre Article.</h2>
 
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor neque vel lacus pulvinar, et faucibus risus pulvinar. Integer fringilla tortor massa, quis cursus quam lacinia quis. Maecenas vel lorem orci. Aenean porttitor neque in sem blandit viverra. Aliquam blandit nec elit et facilisis. Curabitur imperdiet leo non mi tempus, at consectetur quam imperdiet. Cras vehicula tempor commodo. Cras at vehicula eros. Aenean luctus facilisis blandit. Mauris sollicitudin ipsum ultrices elit ultricies, a finibus arcu laoreet.</p>
 
	<p>Maecenas leo felis, pretium rutrum sapien vel, iaculis maximus arcu. In et tincidunt lacus. Mauris vel dolor vel enim interdum condimentum. Suspendisse metus nibh, pharetra lacinia fringilla eu, interdum eget tortor. Duis sit amet dignissim metus, in imperdiet leo. Quisque feugiat tortor ac vehicula placerat. Nullam eget egestas justo.</p>
 
	<p>Morbi mi augue, aliquam sed mauris quis, vestibulum consequat orci. Mauris vel turpis in leo malesuada viverra. Sed finibus fermentum odio, ultrices efficitur felis rhoncus et. Aliquam auctor magna in tortor venenatis, id maximus quam mattis. Vivamus maximus neque massa, a sagittis nisl commodo sit amet. Nullam cursus mollis enim et auctor. Donec mollis ultrices malesuada. Integer iaculis a metus a tincidunt. Cras ipsum tellus, dapibus vel sapien non, eleifend dignissim leo. Nunc rhoncus congue leo vel dapibus. Integer faucibus risus ut pulvinar volutpat. Sed dolor massa, placerat quis molestie et, interdum ullamcorper augue.</p>
 
	<p>Ut tempor felis id gravida volutpat. Nullam id libero a velit gravida suscipit cursus ac felis. Phasellus rutrum nunc arcu, a iaculis lectus viverra ac. Praesent ac ipsum eu lorem lacinia scelerisque. Mauris elit libero, commodo id neque a, auctor fringilla erat. Suspendisse pulvinar dolor iaculis leo imperdiet, gravida luctus purus scelerisque. In pulvinar, eros ut scelerisque porta, nibh sem gravida urna, eget molestie leo ex ut nibh. Quisque a luctus turpis, nec fringilla felis. Sed laoreet diam nec consequat bibendum. Sed sed dignissim ipsum, in vestibulum tortor. Curabitur luctus ullamcorper metus, ut efficitur turpis viverra a. Curabitur massa augue, venenatis maximus tincidunt ut, mollis vel risus. Nunc tristique, lorem ut gravida aliquet, sapien magna tristique tortor, sit amet dapibus augue metus nec diam. Nunc at magna fringilla, semper metus nec, aliquet quam. Duis pharetra rutrum nisl nec consequat. </p>
 
    </article>
</section>
 
</div>
 
<footer> Copyright </footer>
</body>
</html>

Et un CSS qui est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
body
{
	width: 900px; 
	margin: auto;  
	background-color: gray;  
 
}
 
 
header {
 
/*	background-image: url('banner.jpg'); */
	border-style: solid; 
	height: 308px; 
	margin: 0px; 
	padding: 0px; 
 
}
 
 
 
nav {
 
	background-color: white; 
	padding: 0px; 	
	margin: 0px;
	border-style: solid; 
 
	/* espace entre nav et div */
	border-width: 0px; 
 
	/* Prend tout l'espace */
	/* border-with: 1px; */
 
	border-color: red;
}
 
nav ul {	
 
 
	height: 28px; 
	display: flex; 
	justify-content: space-between;  
	align-items: flex-end; 
 
 
	padding: 0px; /* supprimer le retrait de la liste */
 
	/* border-color: blue; 
	border-style: solid; 
	*/
 
	font-family: Impact, Arial, Helvetica; 
	font-size: x-large; 
 
 
}
 
nav ul li 
{
 
 
 
	list-style-image: url('bouton-rouge.jpg'); 
	height: 28px; 
	list-style-position: inside;
 
	margin-top: 10px ; 
	border-style: solid; 
	align-items: flex-start; 
 
}
 
 
 
 
div 
{
	display: flex; 
	justify-content: space-around; 
 
	background-color: white; 
	margin: 0px; 
	padding: 0px; 
}

Et donc mon problèmes/questions sont le suivantes.

1 - Quelque soit le padding des différents éléments, j'ai un espace entre <header> et <nav> et entre <nav> et <div>. Comment faire pour "tout coller" ensemble ?
2 - Si le border-with de nav est a 1, l'élément se colle a "header" et a "div" mais sa taille est bien trop grande par rapport au menu qu'il contient. Auriez vous des pistes?

**NoSmoking** · 08/04/2019, 19h33

Bonjour,
tu es en présence de ce que l'on appelle la « fusion des marges ».

Met simplement un margin: 0 sur ta liste <ul> pour commencer et réajuste le reste.

**becket** · 10/04/2019, 08h25

Merci !
Cela fonctionne

Espace entre blocs

CSS

Discussions similaires

Partager

Partager