Partage

Gérer l'espacement en CSS

problème de "non-jonction" entre différentes parties

Sujet résolu
16 mai 2017 à 23:46:46

Bonsoir,

j'ai un soucis au niveau de l'espacement entre mon header, une div(Une image) et la partie section, je voudrais que les 3 soit collées l'un à l'autre (comme pour la partie section et le footer) sauf que j'y arrive pas ils ont un espace, j'ai un bricolage avec "margin bottom" sur le "niv" bref c'est nul!, voici mon code ! si quelqu'un peut éclairer ma lanterne, je serais reconnaissant ! merci! :

<body>
	<div class="blocpage">
		<header>

			<div class="menu">
				<nav>
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#goal">Our goal</a></li>
						<li><a href="#shows">Shows</a></li>
						<li><a href="#adress">Contact</a></li>
					</ul>
				</nav>
			</div>
		</header>

			<div class="imagecirque">
				
				<div class="item"><img src="https://img4.hostingpics.net/pics/851349Sanstitre1.png" alt="cirque"></div>
			
			</div>


		<section class="intro">
		
			<article id="goal">
				<h1>Our Goal</h1>
				<P>Planitiem et per civitas Antiochia nobilitat diffusa a copiis non speciosam Syria Laodicia planitiem internis.</P>
			</article>

		
			<h1>Shows</h1>
			<article class="aju">
				<img src="http://img15.hostingpics.net/pics/861015lion.png">
					<div class="texte_trp">
				<h2>Taming</h2>

				<p>Planitiem et per civitas Antiochia nobilitat diffusa a copiis non speciosam Syria Laodicia planitiem internis.</p>
					</div>
			</article>

			<article id="shows", class="aju">
				<img src="http://img15.hostingpics.net/pics/711652irina.png">
				 	<div class="texte_trp">
						<h2>Trapezist</h2>

				<p>Planitiem et per civitas Antiochia nobilitat diffusa a copiis non speciosam Syria Laodicia planitiem internis.</p>
					</div>
			</article>






			<article class="aju">
				<img src="http://img15.hostingpics.net/pics/700261Bratislaboy.png">
					<div class="texte_trp">
				<h2>Juggling</h2>

				<p>Planitiem et per civitas Antiochia nobilitat diffusa a copiis non speciosam Syria Laodicia planitiem internis. </p>
					</div>
			</article>

			<article class="aju">
				<img src="http://img15.hostingpics.net/pics/428742clown.png">
					<div class="texte_trp">
				<h2>Clown</h2>

				<p>Planitiem et per civitas Antiochia nobilitat diffusa a copiis non speciosam Syria Laodicia planitiem internis.</p>
					</div>
			</article>


		</section>




		<footer>
			<div id="adress">
				<h1>Find us</h1>
				<p>81 rue des citronniers<br> 33000 Bordeaux<br> 05-56-58-95-78
				</p>
				<p>Write<a href="mailto: extan@free.fr"> us</a></p>
			</div>

			<div class=logo>

			<img src="http://img15.hostingpics.net/pics/263454logorobot.png">
			<p class="logo_robot"><a href="http://www.robozzle.com/user.aspx?name=extan"> Robozzle</a></p>
			</div>

			<div id="villes-tournée">
				<h1>The tour</h1>
				<p>Dates and cities</p>
				<p>Bordeaux 5,6,7 February 2018</p>
				<p>Paris 10,11,12 February 2018</p>
			</div>


		</footer>

	</div>

</body>


et le css:

.blocpage{
 width: 1000px;
    margin:  0 auto;
}
 
 
/*Corps de la page*/
 
body {
    background-color: rgb(178,140,89);
    font-family: arial, Georgia, verdana;
 
}
 
 
/* En tête de la page*/
 
header {
    background-image: url("https://img4.hostingpics.net/pics/967510WILDCIRCUS1.png");
    background-repeat: no-repeat;
    height: 285px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 1000px;
 
}
 
header div{
    min-width: 100%;
}
 
 
 
/* Menu*/
 
nav ul {
    list-style-type: none;
    display: flex;
    background-color: rgb(46,178,255);
    height: 50px;
    justify-content: center;
    margin-bottom: 0px;
 
}
 
nav li {
    margin-right: 150px;
    margin-top: 10px;
}
 
nav a {
    font-size: 1.3em;
    text-decoration: none;
    color: white;
    font-weight: bold;
}
 
 
 
 
 
/* 1ere partie section*/
 
section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgb(178,89,82);
    padding: 10px;
     
}
 
 
/* Titre principale section*/
 
section h1 {
    font-size: 2.5em;
    text-align: center;
    border-top: 3px solid rgb(46,178,255);
    border-bottom: 3px solid rgb(46,178,255);
    color: rgb(255,153,156);
}
 
 
/*Titre secondaire section*/
 
section h2 {
    font-family: courier new Comic sans ms;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.5em;
    border-top: 2px solid rgb(46,178,255);
    border-bottom: 2px solid rgb(46,178,255);
    color: rgb(255,153,156);
 
     
 
}
 
 
/* paragraphe partie section*/
 
section p {
    font-family: "Libre Baskerville", verdana;
    color: rgb(255,253,178);
    font-size: 0.9em;
}
 
.aju {
    display: flex;
    align-items: center;
    margin: 10px;
}
 
.texte_trp{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
 
/* Pied de page */
 
footer {
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgb(46,178,255);
     
     
}
 
 
/* Partie Robozzle */
 
.logo {
    margin: auto;
}
 
.logo_robot {
    text-align: center;
}
 
 
/*Partie lien cliquable*/
 
footer a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}
 
footer a: hover {
    text-decoration: underline;
    color: red;
}
 
 
/* Titre footer*/
 
footer h1 {
    font-family: impact;
    font-weight: normal;
    color: rgb(178,89,82);
}
 
 
/* paragraphe footer*/
 
footer p {
    font-family: verdana;
    color: white;
    font-size: 0.8em;
    font-weight: bold;


-
Edité par extan 17 mai 2017 à 23:51:24

17 mai 2017 à 13:37:50

Salut,

Tu as coupé une partie de ta première règle CSS.

Avec le code que tu as donné (sans la première règle CSS) il n'y a aucune marge entre ton header, ton image et la section. A moins que j'ai mal compris ton problème il est réglé.

RTFM > All  | PHP.net | SQL.sh | Stackoverflow.com | Google.com
17 mai 2017 à 23:48:18

Salut!

Oui tout en haut du CSS, il manque le ".blocpage" ! mon soucis à été résolu ;) sauf j'en ai un deuxième :( j'arrive pas à faire fonctionner le "hover", je test sur mes nav li ça réagit pas... pareil pour la partie dans le footer avec le lien cliquable du mail pareil la fonction hover fonctionne pas... je comprends pas :/ si quelqu'un à une idée! merci

18 mai 2017 à 1:09:45

test en écrivant a:hover et non a: hover

-
Edité par ShaWaTK 18 mai 2017 à 1:19:22

18 mai 2017 à 8:56:27

Merci! c'était tout bête en fait... le css aime pas les espaces?
Staff 18 mai 2017 à 9:20:54

Bonjour,

ce n'est pas qu'il n'aime pas, c'est au contraire que les espaces ont un sens en CSS : la descendance.

a:hover signifie "les a en état survolé", a :hover signifie "les descendants en état survolé d'un a".

De la même manière a.class cible les a avec une classe "class", et a .class les descendants d'un a, qui se trouvent avoir la classe "class".

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
18 mai 2017 à 10:12:41

ook ! merci des infos! je crois pas que c'est dit sur le tuto :/

Gérer l'espacement en CSS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown