Partage
  • Partager sur Facebook
  • Partager sur Twitter

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

    • Partager sur Facebook
    • Partager sur Twitter
      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é.

      • Partager sur Facebook
      • Partager sur Twitter
      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

        • Partager sur Facebook
        • Partager sur Twitter
        Anonyme
          18 mai 2017 à 1:09:45

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

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

          • Partager sur Facebook
          • Partager sur Twitter
            18 mai 2017 à 8:56:27

            Merci! c'était tout bête en fait... le css aime pas les espaces?
            • Partager sur Facebook
            • Partager sur Twitter
              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".

              • Partager sur Facebook
              • Partager sur Twitter

              Pas d'aide concernant le code par MP, le forum est là pour ça :)

                18 mai 2017 à 10:12:41

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

                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