Bonjour,

Je code un site pour un ami musicien.

J'ai besoin de faire un lien avec une image, c'est ce que j'ai fait.

Mon problème est que quand j'inspecte le site avec l'outil adapté, je vois que les liens prennent de la place sur le visuel c'est à dire qu'ils prennent la même hauteur que les images et 20px de hauteur et ça m'empêche de faire rentrer mes images en inline-block.

Voici les codes: 

     
        
    <section>

    <div id="bloccontacts">
            <h1>Contactez nous</h1>
  
            <a href="https://www.facebook.com/purplecalice/"><img src="../image/facebook.png" alt="facebook" width="250px" height="250px" ></a></br>
            <a href="https://purplecalice.bandcamp.com/releases"><img src="../image/bandcamp.gif" alt="bandcamp" width="474px" height="250px" ></a></br>
            <a href="https://soundcloud.com/purplecalice"><img src="../image/soundcloud.png" alt="soundcloud" width="250px" height="250px" ></a></br>
            
    </div>
    
    </section>

@charset "UTF-8";
/* CSS Document */

html, body {
 margin:0;
 padding:0;
 background-color: #000; 
}


#bloc_page {width: 1200px; height: auto;  margin-left: auto; margin-right: auto; font-family: verdana, arial; }
header 	{ width: 1200px; height: 244px; background-image: url(../image/headerColor.png); background-repeat: repeat-x; position: fixed;}
#musicB {display: inline-block; margin-top: 30px; margin-bottom: 170px; margin-right: 10px;}
#concertsB {display: inline-block; margin-bottom: 80px; margin-left: 30px;}

#logo { display: inline-block; position: absolute;}

#videoB {display: inline-block; margin-top: 30px; margin-bottom: 170px; }
#contactsB { display: inline-block; margin-bottom: 80px;}
nav 	{width: 1200px; height: 244px; }



section	 {width: 1140px; height: auto; background-color: #fff; padding-left: 30px; padding-right: 30px; padding-top: 320px; padding-bottom: 30px; }
#bloccontacts {width: 1100px; height: auto; text-align: center; border: 2px solid #100c59; display: inline-block;}
#bloccontacts a {width: 0px;}



footer 		{width: 1160px; height: 20px; background-color: #fff; padding: 20px; text-align: center; margin-top: 20px;}

p {margin: 0;}

Si vous avez une idée, je suis preneur !

Et merci d'avance =)

Bonsoir,

Je n'ai pas trop comprise la situation, possible de poster une image pour illustrer la situation, voir faire un jsfiddle 

Et </br> n'existe pas, c'est <br> ou <br /> 

ps: ce </br>, c'est une erreur fréquente en ce moment 

-
Edité par pipelette13 7 décembre 2017 à 22:35:55

Merci pour le <br>, ce sont justement eux qui mettaient le bordel ça fonctionne maintenant, merci !

Les liens reste comme ça quand ils ont de la place mais sinon il ce mettent sur les images !

Je mets une image si ça peut aider pour les prochain qui auront le problème.

-
Edité par YanLd 7 décembre 2017 à 22:47:39

Un bon réflexe, passe ton code HTML au validateur : https://validator.w3.org/ 

Il t'indiquera toutes tes erreurs 

Tu utilises quoi comme éditeur pour coder ?

Les éditeurs récents sont capables de détecter ce genre d'erreur directement pendant ton écriture HTML, CSS ou autre langage.

J'utilise Sublime Text.

J'ai un autre soucis, avec une div qui se comporte un peu comme le lien, c'est a dire qu'elle prend toute la largeur de l'espace dans lequel elle est contenu. 

  <div id="groupe">

            <div class="membreG">
                <h2>Arnaud Loubry</h2>
                <img src="../image/arnaud.jpg">
                <h3>Guitare - Chant</h3>

            </div>

            <div class="membreD">
                <h2>Touhami</h2>
                <img src="../image/touhami.jpg">
                <h3>Batterie - Coeur</h3>

            </div>

            <div class="membreG">
                <h2>Quentin</h2>
                <img src="../image/quentin.jpg">
                <h3>Basse</h3>

            </div>

            <div class="membreD">
                <h2>Cyril</h2>
                <img src="../image/cyril.jpg">
                <h3>Guitare</h3>

            </div>

                </div>

.groupe {	width: 1100px; 
			height: auto; 
			}

.membreG { 	width: 302px; 
			height: auto; 
			display: inline-block;
			border: #100c59 solid 2px;
			text-align: center;  
			float: left; }
.membreG h2, h3 { 	text-align: center; }

.membreD { 	width: 302px; 
			height: auto;
			display: inline-block; 
			border: #100c59 solid 2px;
			text-align: center; 
			float: right; }
.membreD h2, h3 { 	text-align: center; }

-
Edité par YanLd 14 décembre 2017 à 21:52:58

Bonjour, j'ai trop comprise ton souci.

Par défaut un <div> prend toute la largeur de son parent (le body ou un conteneur), mais un lien non ! il est de type inline...

Voici un essais : https://jsfiddle.net/tctzm9ea/ 

ps: faisable en Flexbox et voir aussi  figure + figcaption pour les images : https://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html 

Bonjour,

Okay, je viens de tester de coller ça dans mon code mais du coup les .membre sont tous sur la même ligne et se superpose a moitié :/

J'ai l'impression souvent de trop complexifier mon code.

Merci de ton aide en tout cas !

EDTI: la taille de la div  était trop petite par rapport a la photo, je suis en train de régler le problème.

-
Edité par YanLd 14 décembre 2017 à 22:27:34

Va y en douceur, ça va aller...

C'est normal, ll faut en baver un peu pour pratiquer, recommencer et donc progresser, sinon on stagne 

Oui j'y vais petit à petit =)

Pour le coup maintenant c'est la <section> qui ne prend pas le groupe en compte, le groupe se retrouve dans le fond noir et ça à décalé le pied de page sur la droite, étrange.

EDIT: Résolu avec un overflow.

-
Edité par YanLd 15 décembre 2017 à 2:08:32