18041 sujets

Questions générales et questions de débutants

[Résolu] Afficher un lien tout en bas à droite

Bonjour,
Encore en train de coder ce site pour "m'amuser" et apprendre, je me pose désormais une nouvelle question. Comme d'habitude _laurent va voler à mon secours j'en suis sûr x). L'objectif me semblait simple et bien codé mais ça ne fonctionne pas alors j'appelle "oskour" après relecture. C'est le suivant : positionner les mentions légales et plan du site tout en bas à droite comme sur le site duquel je m'inspire en guise d'entrainement.

Voilà mon code HTML suivi du CSS :

<div class="rubriques">
				<h6>Contactez-nous :</h6>
					<a href="#"><!--Ici je crée le lien qui renvoie à la boite mail-->
						<i class="fa-solid fa-at fa-2x"></i>
						<p>#</p>
					</a><!--Ici je ferme la balise du lien vers E-Mail-->
					<a href="#"><!--Ici je crée le lien vers le formulaire de contact-->
						<i class="fa-solid fa-envelope-open-text fa-2x"></i>
						<p>Formulaire de contact</p>
					</a><!--Ici je ferme la balise du lien vers le formulaire de contact-->
					<div id=mentionslégalesetplandusite>
						<a href="#">Mentions légales</a>
						<a href="#">Plan du site</a>
					</div>
			</div>

#pieddepage{
	display: flex;
	background-color: rgb(0, 0, 0);
	padding-bottom: 40px;
}
.rubriques{
	padding: 10px;
	flex: 1;
  display: flex;
  flex-wrap: wrap;
}
h6{
	font-size: 15px;
	color: white;
	padding: 2px;
	text-align: center;
  width: 100%;
}
.rubriques a{	
	text-align: center;
  flex: 1;
}	
#mentionslégalesetplandusite{
	position: absolute;
	right:10px;
	bottom:0px;
	font-size:10px;
}

upload/1660909112-84907-capture.jpg
Modérateur
Bonsoaaaaar,


Bon j'avoue je suis dans le coin en ce moment désolé. Par contre on va augmenter la difficulté je donnerai juste des pistes pas la solution directement Smiley lol

Pourquoi absolute ? J'ai pour habitude de dire aux dev avec qui je travaille et qui n'aiment pas le CSS que faire du code pour faire du code ça sert a rien. Si tu ne mets aucun code CSS quel est el comportement naturel de ta balise ? Il ne faut alors ajouter que ce dont tu as besoin. ici la position absolute me semble totalement inutile... non ?
J'aime beaucoup cette façon de faire Smiley smile
C'est vraiment sympa de ta part,
J'ai donc enlevé le Absolute.
Ca a en effet repositionné mon texte tout en bas, mais pas tout à droite.
Je vais me creuser les méninges du coup x).
J'ai pensé à deux trucs : soit ma classe n'est pas bien définie (mais je vois pas bien pourquoi ça ferait ça)
soit j'ai oublié d'ajouter une décla dans mon CSS mais alors... laquelle !?

Réfléchissons ! Je reviens plus tard pour découvrir (ou pas) des éléments de réponse Smiley smile Smiley hum
Merci encore Laurent !
upload/1660910464-84907-capture.jpg
Modérateur
LApprenti a écrit :
J'ai donc enlevé le Absolute.

Enlève tout le CSS qu'il y a et part de ta classe vide. Tu as besoin de mettre le texte en plus petit : font-size. Tu a besoin de mettre le texte à droite : text-align. What else ?

#mentionslégalesetplandusite{
	font-size:10px;
	text-align: right;
}

1 warning au passage : évite à tout pris les accents
1 conseil au passage : passe par une class et pas un id

Il faut commencer par le plus simple. Oui on peut positionner en bas a droite en absolute mais ça a beaucoup plus d'impact sur le reste qu'un simple text-align. Avec le temps tu te rendra compte des impacts.

LApprenti a écrit :
J'ai pensé à deux trucs : soit ma classe n'est pas bien définie (mais je vois pas bien pourquoi ça ferait ça) soit j'ai oublié d'ajouter une décla dans mon CSS mais alors... laquelle !?

J'ai pas compris l'histoire de la class mal définie. Et oui, pour aligner a droit il faut une déclaration pour aligner à droite, c'est pas magique non plus ! Smiley lol


Bon apres vu ton dom y a quelques subtilités en plus : tu as mis mentionslégalesetplandusite dans ton rubriques donc il va reste à l'intérieur de cette colonne et se mettre à coté des boutons. Il faut lui donner uen width 100% comme le h6 si tu veux qu'il soit seul sur sa ligne et pas a coté des <a> OU ALORS le sortir de cette colonne rubrique si tu veux qu'il soit en bas de ton site.
Meilleure solution
Re,
J'ai pas lu encore votre message et votre solution mais je pense en avoir trouvé une qui marche bien.
C'est surement pas très opti, il existe surement mieux, mais ça marche.
J'aurai aimé ne pas passer par là mais j'y ai carrément sorti du pied de page et ça marche comme je le souhaite x)

Voilà mon code:
<section id="pieddepage"> <!--Ici j'ouvre ma section pied de page dans laquelle on retrouve toutes les infos importantes mais pas à première vue capitale.-->
			<div class="rubriques">
				<h6>Retrouvez-nous sur :</h6>
					<a href="https://www.instagram.com/locacheteur"> <!--Ici je crée le lien vers Instagram par icône-->
						<i class="fa-brands fa-instagram fa-2x"></i>
						<p>Instagram</p>
					</a>	<!--Ici je ferme la balise du lien vers Instagram par icône-->
					<a href="#">	<!--Ici je crée le lien vers Linkedin par icône-->
						<i class="fa-brands fa-linkedin fa-2x"></i>
						<p>LinkedIn</p>
					</a>	<!--Ici je ferme la balise du lien vers Linkedin par icône-->
					<a href="#">	<!--Ici je crée le lien vers Youtube par icône-->	
						<i class="fa-brands fa-youtube fa-2x"></i>
						<p>Youtube</p>
					</a>	<!--Ici je ferme la balise du lien vers Youtube par icône-->
			</div>
			<div class="rubriques">
				<h6>Contactez-nous :</h6>
					<a href="#?subject=Demande de Contact"><!--Ici je crée le lien qui renvoie à la boite mail-->
						<i class="fa-solid fa-at fa-2x"></i>
						<p>#</p>
					</a><!--Ici je ferme la balise du lien vers E-Mail-->
					<a href="#"><!--Ici je crée le lien vers le formulaire de contact-->
						<i class="fa-solid fa-envelope-open-text fa-2x"></i>
						<p>Formulaire de contact</p>
					</a><!--Ici je ferme la balise du lien vers le formulaire de contact-->
					
			</div>
		</section>	
			<div id=mentionslégalesetplandusite>
						<a href="#">Mentions légales</a>
						<a href="#">Plan du site</a>
			</div>

	</body>

#pieddepage{
	display: flex;
	background-color: rgb(0, 0, 0);
	padding-bottom: 20px;
}
.rubriques{
	padding: 10px;
	flex: 1;
  display: flex;
  flex-wrap: wrap;
}
h6{
	font-size: 15px;
	color: white;
	padding: 2px;
	text-align: center;
  width: 100%;
}
.rubriques a{	
	text-align: center;
  flex: 1;
}	
#mentionslegalesetplandusite {
	background-color: rgb(0, 0, 0);
	text-align: right;
	font-size:10px;
	padding-bottom:50px;
}


Une question m'est venue à l'esprit, la voici :
Je mets "padding bottom" pour que ça aille jusqu'en bas de la page... n'y a-t-il pas mieux ?
Je vais maintenant lire (avec grand plaisir) votre solution et surtout la tester ! Elle sera sûrement mille fois meilleures (en même temps pour faire pire ça va être dur).

Désolé d'être aussi chiant _laurent.... Vraiment je mesure le temps que vous devez prendre à fournir ce type de réponses.
upload/1660912534-84907-capture.jpg
Modifié par LApprenti (19 Aug 2022 - 14:36)
OK Laurent, merci beaucoup pour votre réponse, je viens de la lire.
Une question subsiste encore avant que j'aille la tester :
a écrit :
1 conseil au passage : passe par une class et pas un id
-> Pourquoi et dans quelles situations ? Faut-il que je supprime toutes mes id par des class ?

Décidemment je suis franchement emmerdant désolé Smiley decu Smiley rolleyes
Modérateur
LApprenti a écrit :
J'ai pas lu encore votre message et votre solution mais je pense en avoir trouvé une qui marche bien.
C'est surement pas très opti, il existe surement mieux, mais ça marche.

C'est parfait comme ça ! Ca faisait partie de mes solution, t'a géré tout seul Smiley good je ne vois pas pourquoi ca ne serait pas "opti". Tu pourrais éventuellement le mettre à coté de tes colonnes rubriques pour garder la sémantique du regroupement dans "pied de page" mais franchement c'est du pinaillage.

LApprenti a écrit :
Je mets "padding bottom" pour que ça aille jusqu'en bas de la page... n'y a-t-il pas mieux ?

C'est pas exactement ca a mon avis. C'est juste que ton site n'est pas assez haut pour prendre toute la hauteur de ton écran. Donc là, sur un écran plus grand que le tien ca ne "touchera" pas le bas. Quelques solutions en vrac :
- la plus simple : attendre que ton site ai du contenu s'il n'est pas fini. Avec un contenu il y aura un scroll et il n'y aura plus ce soucis du "body trop court"
- plus compliqué : faire en sorte que le body de ton site prennent 100% de la hauteur et venir caller son footer en bas (mais c'est inutile de s'embeter avec cette solution si à terme le contenu pousse tout tout le temps).

LApprenti a écrit :

Elle sera sûrement mille fois meilleures (en même temps pour faire pire ça va être dur).
[...]
Désolé d'être aussi chiant _laurent.... Vraiment je mesure le temps que vous devez prendre à fournir ce type de réponses.
[...]
Décidemment je suis franchement emmerdant désolé

Allez on va dire que pour tout les prochains post (c'est valable IRL aussi) :
- On me lance pas de fleur (je fais pas ca pour ça, ca ne me fait pas répondre mieux ou plus vite, je ne suis pas si génial que ça beaucoup d'autres sur le forum sont bien meilleurs)
- On croit un peu plus en soit ! Sans aller dans l'overconfidence mais t'as trouvé une des meilleures solution à mon sens alors on arrête l'autoflagélation et on se sort les doigts
- On arrête de s'excuser. C'est bien formulé, c'est interessé, complet et c'est poli. Donc le forum c'est fait pour ça. Je prend le temps que je veux prendre, j'ai pas de flingue sur la tempe. Si j'ai pas le temps je le prendrai pas t'en fait pas. C'est tout à ton honneur de poser des question "pour comprendre" et non juste une recherche de solution toute cuite alors comme j'aime aider et partager ça me plait alors je prend le temps. C'est tout. Demain ca sera un autre Smiley smile

On lève la tête et on avance Smiley sourire

Bonne soirée
Modérateur
LApprenti a écrit :
Pourquoi et dans quelles situations ? Faut-il que je supprime toutes mes id par des class ?

J'avais oublié celle là ! Smiley ravi

C'est un conseil perso pas une obligation. Les sélecteurs ont des poids (lis un article dessus si ca ne te dit rien c'est ESSENTIEL). Le CSS à des priorités pour savoir qui est appliqué en dernier si on défini plusieurs couleurs pour un même élément par exemple (derniers arrivé, sélecteur plus lourd, etc). une démo prendrait trop de temps ici mais lis un article dessus vraiment c'est pas très compliqué mais vraiment très important.

Donc pour des raison de maintenance et de facilité de modification de ton CSS si tu ne mets que des classes ca sera moins difficile d'overider des styles que si il y a des id en plein milieu.

Mais ca reste permis attention ! utiliser les ID pour du CSS 'est tout a fait correct et parfois très utile / recommandé !
Merci Laurent,
Donc je résume, si j'estime mon "index" comme fini alors je dois enlever les padding mis uniquement pour que ça "touche le fond" (pardonnez moi l'expression x)).
Mais par conséquent, un blanc apparait. Alors que faire ? Y laisser comme tel en sachant qu'il y a déjà un scroll mais que ça met quand même un blanc ? Opter pour la solution "plus compliquée ?
J'avoue ne pas comprendre comment enlever ce blanc qui pourtant n'a à mon sens pas lieu d'être.
Merci par avance. upload/1660915611-84907-capture.jpg
Modérateur
mmmmm il doit me manquer des pieces de puzzle du coup. le site est en ligne ? C'est assez compliqué de trouver sans voir la globalité du site (et coller ici l'intégralité du code c'est pas cool ca va faire un scroll immense haha)
_laurent a écrit :
mmmmm il doit me manquer des pieces de puzzle du coup. le site est en ligne ? C'est assez compliqué de trouver sans voir la globalité du site (et coller ici l'intégralité du code c'est pas cool ca va faire un scroll immense haha)


Le site est pas en ligne malheureusement mais je peux peut-être vous faire passer le code autrement ?
Merci par avance,
Oui, vous pouvez faire un CodePen.

C'est pas très compliqué de comprendre comment ça fonctionne, et une fois compris ce sera bien plus simple de mettre des exemples en ligne pour se faire aider.
Bonjour Olivier. Sinon je pensais à mettre mon dossier parents sur un et l'envoyer en privé à l'un d'entre vous.
Je ne suis pas contre l'idée de vous l'envoyer via cet outil mais il contient des infos confidentielles pour le moment que j'aimerai pouvoir cacher avant de transmettre. Est ce dans ce cas possible ?
Cdlt,
Modifié par LApprenti (19 Aug 2022 - 17:06)
Modérateur
Effectivement c'est pas l'idéal du coup. Tu peux enlever ce qui est confidentiel si tu veux y'a pas de soucis, ce qui nous interesse ici ca va etre la structure globale de ta page en gros.
Ah oui et j'oubliais une image du problème pour que vous visualisiez bien ce que je souhaiterais "enlever".

Ce blanc en bas de la page m'escagasse un peu !
Encore merci d'avance,
Cdlt. upload/1660922598-84907-capture.jpg
Modérateur
Yes c'est parfait !
Alors rien a voir avec le contenu du coup. Tu as 2 soucis.

- Un margin par defaut sur le body que tu peux enlever body { margin: 0; }
- un padding de 50px sur tes <a> qui pousse tout, tu peux l'enlever. Si tu veux écarter les liens préfère une simple margin-left: 50px; sur "a + a" (un a qui suis directement un a)
Merci infiniment Laurent !!!
Tout fonctionne, j'ai fait deux trois réglages de positionnement mais trois fois rien et c'est formidable. Tout fonctionne. Fier de moi pour une première création c'est pas si mal je trouve Smiley smile .

Encore merci, je vais passez aux autres pages connexes !

PS : pour le body margin j'en avais pas besoin car j'ai un doc CSS appelé normalize qui est censé s'en occupé (et qui l'a fait) (je l'ai pris tout cuit comme conseillé dans le livre que j'utilise Smiley smile )

Passez une bonne soirée,
Merci encore,
Biz
Modérateur
LApprenti a écrit :
PS : pour le body margin j'en avais pas besoin car j'ai un doc CSS appelé normalize qui est censé s'en occupé (et qui l'a fait) (je l'ai pris tout cuit comme conseillé dans le livre que j'utilise Smiley smile )

Oui après coup je me suis dis que t''en avais ptetre pas besoin mais j'ai eu la flemme de modifier mon message. Au final tu t'en sors hyper bien tout seul alors j'ai pas de regret Smiley lol Bon boulot !
Sujet clos
Aller à