Voilà, un petit background-color red, pour vous montrer mes textes liens, vers d'autres page (.html), bizarrement je peux cliquer au dessus et dessous par rapport au texte, mais pas sur tout le bloc article entier.
Voici où je peux cliquer :
Pour finir et expliquer réellement mon problème, j'essaye de rendre toute la zone cliquable, je n'ai pas réussi à trouver le résultat.
En mettant ma balise <a> par dessus l'article, l'article perds sa largeur et se redimensionne à la taille du texte.
Merci pour votre aide.
(Je n'ai pas fait de liste <li> pour faire mes 3 cases comme ce qui est habituellement fait pour faire une ligne de bloc cliquable. j'ai voulu faire autrement même si cela ne respectait pas la fameuse <nav> <li>. Aurais-je le même problème?)
enlève le display:flex de .cont qui ne sert à rien dans ton cas puisque tu n'as qu'un seul élément enfant direct dedans. A la place mets lui un text-align:center.
Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
J'ai essayé de mettre en place votre morceaux de code, et tout ne s'affichait pas comme prévue.
Malheureusement j'ai bien lu le cours html, il faut que je le finisse encore.
Je n'ai pas encore entendu parler de responsive design pour être claire avec vous.
J'en suis à 70% du cours HTML CSS
Edit: A mon niveau actuel, je ne pense pas à avoir un site responsive, je ne fais qu'apprendre, je ne veux pas me retirer les roues de sécurité trop vite :/
D'accord pour faire simple le responsive design c'est la capacité d'affichage de votre page par rapport à de nombreux critères tels que la taille de la fenêtre.
J'ai codé ce que tu cherches à toi de rajouter ton image et ton titre en suivant le code:
1- Avec le css sur la balise <a>, ma photo qui s'agrandit récupère le cadre grey. (Photo avec effet css hover, + lien cliquable pour ouvrir la photo dans un nouvel onglet, exercice du cours)
.container{
position: fixed;
top:550px;
left:0;
bottom:0;
right:0;
flex-direction: column; Je ne comprends pas pourquoi mettre une flex direction alors que ce n'est pas une flexbox (surtout en column)?
}
.centrer{
display: flex;
flex-wrap: nowrap;
margin: 0 auto;
justify-content: center;
max-width:70%;
}
a{
text-decoration:none;
background-color: #91A4C4;
box-shadow: -5px -5px 5px inset rgba(0,0,100, 0.3);
text-align: center;
margin-left: 5%; Ici aussi, si il y a une marge de 5% à gauche, il n'y a pas le même centrage à droite ? on décale de 5% la marge extérieur des a vers la droite a l'intérieur de la section ?
border-radius: 30px;
padding-left: 2%;
padding-right: 2%;
}
Sinon après tout est claire pour moi, je comprends mieux. Merci
Je t'ai mis un container pour pouvoir rajouter des sous-container si l'envie te prends (d'où le flex-direction) et le margin-left: 5% sert à décaler chaque "a" de 5% , donc si tu veux plus d'espace entre chaque bulle tu augmentes cette valeur mais en aucun cas la marge de ton container n'est décalé.
Tout ce qui sera compris dans la div "centrer" occupera 70% de ton container , donc il y aura 15% de marge gauche et droite (100-70= 30 et 30/2=15)
Je ne sais pas si c'est clair n'hésites pas si tu as encore des questions.
Edit: si ta photo récupère un cadre grey c'est parce que tu lui as mit la balise "a" , or les paramètres des bulles grey dans le css répondent à la balise a aussi, tu dois donc modifier ceci dans le html par exmple:
AH oui je suis bête l'espace plus petit à droite viens du margin-left: 5%, il faut que tu cibles chaque a, par exemple le deuxième <a class="competence"> et le derniere <a class="formation> et ducoup tu ajoutes le margin-left: 5% à ces deux la du coup ça donne:
× 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.
Ez
Ez
Ez
Ez
Ez
Ez
Ez
Ez
Ez