Bonjour/Bonsoir je n'arrive pas à aligner du texte dans mon footer :

#premiere_partie
{
	text-align:left;

}
#deuxieme_partie
{
	text-align:center;
	

}
#titre1_footer
{
	text-align:left;
	margin-left:3%;
}

<footer>
	


	<div id=premiere_partie>
	<h2 id="titre1_footer">Dernières Vidéos</h2>
	<p class="liens_videos"> <a href="https://www.youtube.com/watch?v=udUMQaNz5NI"> Top 3 sur fortnite avec 0 kills ! (Ft. Gromototo)</a></p>
	<p class="liens_videos"> <a href="https://www.youtube.com/watch?v=f11Xzkan4Tg&t=3s">Une administration tranquille !</a></p>
	<p class="liens_videos"> <a  href="https://www.youtube.com/watch?v=_ZP0kT4jlzc&t=17s">Je fais de la weed ! </a></p>
</div>
</footer>


<div id=deuxieme_partie>
<p class=liens_autre>Contact: flaviocolorado3@gmail.com</p>
<p class=liens_autre><a href="https://www.youtube.com/channel/UCGcusEYugIOYen6bvBrDSdA">Poto</a></p>
<p class=liens_autre> <a href="https://www.youtube.com/channel/UCvm1G_Cuk133krZ3wkXyXmQ">Gfx</a></p>
<p class=liens_autre>Site d'entrainement html/css/jvs à but personnel</p>
</div>


</footer>

-
Edité par Flavman 6 décembre 2017 à 14:19:31

Bonjour,

Tu veux faire quoi exactement ? 

Le texte de la première partie est bien aligné à gauche sur ton image et celui de la deuxième partie est bien centré. Donc en l'état tout ce qu'il est possible de dire c'est que le code que tu nous montres fonctionne. Et aussi que ta structure HTML est à revoir, mais ça c'est une autre histoire.

Mewen_bzh a écrit:

Bonjour,

Tu veux faire quoi exactement ? 

Le texte de la première partie est bien aligné à gauche sur ton image et celui de la deuxième partie est bien centré. Donc en l'état tout ce qu'il est possible de dire c'est que le code que tu nous montres fonctionne. Et aussi que ta structure HTML est à revoir, mais ça c'est une autre histoire.

J'aimerai que le texte au centre soit plus en haut, la première du centre alignée avec la première à gauche.

Ps: désolé pour l'html je commence à apprendre

-
Edité par Flavman 6 décembre 2017 à 16:45:07

Lamecarlate a écrit:

Bonjour,

tu veux quelque chose comme ça, en fait : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox ?

J'ai beau essayer ça ne marche toujours pas

#premiere_partie, #deuxieme_partie
{
 display: flex;
 flex-direction: column;

    justify-content: center;

   
	
}

-
Edité par Flavman 6 décembre 2017 à 17:02:49

Premièrement commence à enlever la balise fermante </footer> ligne 11 dans le code que tu nous à fourni. Puis continuons dans la correction, tes <div> tu leur met des id mais pas de guillemet ?!? tu le fait bien en dessous mais pas au dessus. Et pour finir dans la correction de ce petit bout de code(me demande ce que doit être le reste mais on peut te le corriger) utilise des class pour le CSS pas des id. les id sont plutôt utilisé pour le JS et les ancres.

Ensuite pour ton positionnement (quand tu auras tout corrigé bien entendu), je te propose ceci :

#premiere_partie, #deuxieme_partie {
    display: inline_block;
    vertical-align: top;
}

l

Le inline-block permet d'aligner deux blocs sur une même ligne donc cote à cote.

Le vertical-align permet de corriger un problème de placement qui est assez rare mais qui peut arriver selon les navigateurs.

Voila bon courage pour la suite.

Salut,  Merci beaucoup pour tes conseils :)  Malheureusement, cela aligne les blocs verticalement et non horizontalement

-
Edité par Flavman 6 décembre 2017 à 22:46:35

> flex-direction: column;

Ben faut pas mettre ça. Tu as bien lu la page ? La partie "direction" ?

Lamecarlate a écrit:

> flex-direction: column;Ben faut pas mettre ça.

Tu as bien lu la page ? La partie "direction" ?

Oui, j'ai tout essayer rien ne marche.

-
Edité par Flavman 7 décembre 2017 à 20:28:06

Et simplement *ne pas mettre* flex-direction: column, tu as essayé ?

Oui ça ne les aligne pas.

Tu peux montrer ça ? Par exemple en copiant ton code https://codepen.io/pen , puis tu sauvegardes et tu nous donnes l'url.

Flavman a écrit:

Salut,  Merci beaucoup pour tes conseils :)  Malheureusement, cela aligne les blocs verticalement et non horizontalement

-
Edité par Flavman 6 décembre 2017 à 22:46:35

Depuis quand ?!?

Le display inline-block; comme sont nom l'indique met sur une même ligne les block cote à cote SAUF si tu n'as plus de place sur ton écran au quel cas il se met en dessous.

Lamecarlate a écrit:

Tu peux montrer ça ? Par exemple en copiant ton code https://codepen.io/pen , puis tu sauvegardes et tu nous donnes l'url.

Voilà

https://codepen.io/Flavman/pen/EbqxjB

GuillaumeBo1 a écrit:

Flavman a écrit:

Salut,  Merci beaucoup pour tes conseils :)  Malheureusement, cela aligne les blocs verticalement et non horizontalement

-
Edité par Flavman 6 décembre 2017 à 22:46:35

Depuis quand ?!?

Le display inline-block; comme sont nom l'indique met sur une même ligne les block cote à cote SAUF si tu n'as plus de place sur ton écran au quel cas il se met en dessous.

Bizarre Oo ! J'ai testé sur deux écrans de taille différentes pourtant.

-
Edité par Flavman 8 décembre 2017 à 17:36:35

Quand tu dis que ça n'est pas aligné, c'est parce qu'il y a plus d'espace au-dessus du texte qu'en dessous ? Si oui, regarde les marges que tu as mises sur les <li>.

Lamecarlate a écrit:

Quand tu dis que ça n'est pas aligné, c'est parce qu'il y a plus d'espace au-dessus du texte qu'en dessous ? Si oui, regarde les marges que tu as mises sur les <li>.

Je l'ai est mises, ça ne change rien.

As-tu modifié le pen ? Afin qu'on voie tes avancées.

Oui je viens de le modifier

-
Edité par Flavman 8 décembre 2017 à 22:49:34

Les marges sur "nav li" sont toujours de 15px à droite et 10px au-dessus - c'est cette dernière valeur qui fait que ça ne semble pas "aligné".

Lamecarlate a écrit:

Les marges sur "nav li" sont toujours de 15px à droite et 10px au-dessus - c'est cette dernière valeur qui fait que ça ne semble pas "aligné".

C'est à dire ?

Bin si tu mets une margin-top sur un élément mais pas de margin-bottom, il y a plus d'"espace" au-dessus de l'élément qu'en dessous. N'est-ce pas le problème que tu rencontres ?

Lamecarlate a écrit:

Bin si tu mets une margin-top sur un élément mais pas de margin-bottom, il y a plus d'"espace" au-dessus de l'élément qu'en dessous. N'est-ce pas le problème que tu rencontres ?

Oui effectivement, mais le problème est que j'arrive à aligner sur certains écrans mais sur d'autres ça ne l'est pas.

"Certains" écrans : lesquels ? Il faut vraiment que tu nous donnes toutes les infos possibles. On n'est pas dans ta tête ni dans ton ordi.

Lamecarlate a écrit:

"Certains" écrans : lesquels ? Il faut vraiment que tu nous donnes toutes les infos possibles. On n'est pas dans ta tête ni dans ton ordi.

Des écrans avec différentes résolutions.

Ps: Désoler pour le message tardif

Oui, mais lesquels ? Montre-nous des captures d'écran de quand ça va et quand ça va pas, aide-nous à t'aider.

Voici des captures d'écrans :

Sur l'image de gauche ce n'est pas aligné, tandis qu'a droite ça l'est.

-
Edité par Flavman 27 décembre 2017 à 15:11:22

Tu pourrais mettre cette page en ligne quelque part ? Histoire qu'on puisse avoir quelque chose à tripatouiller.

Lamecarlate a écrit:

Tu pourrais mettre cette page en ligne quelque part ? Histoire qu'on puisse avoir quelque chose à tripatouiller.

Voila : https://codepen.io/Flavman/pen/XVMPvb

Tu as un margin-top qui dépend de la hauteur de la page sur .deuxieme_partie (-7%). Par conséquent, il change constamment.

Conseil : ne fais jamais ça. Déjà, des marges en pourcentages, c'est rarement une bonne idée, et surtout pour des marges verticales.

Si tu veux proprement aligner tes éléments, corrige les " déplacés de la div de classe "footer", et donne-lui display: flex, en enlevant les styles des enfants (ajoute juste flex: 1 1 auto; dessus).

Lamecarlate a écrit:

Tu as un margin-top qui dépend de la hauteur de la page sur .deuxieme_partie (-7%). Par conséquent, il change constamment.

Conseil : ne fais jamais ça. Déjà, des marges en pourcentages, c'est rarement une bonne idée, et surtout pour des marges verticales.

Si tu veux proprement aligner tes éléments, corrige les " déplacés de la div de classe "footer", et donne-lui display: flex, en enlevant les styles des enfants (ajoute juste flex: 1 1 auto; dessus).

D'accord merci pourrais-tu le rajouter pour que je comprenne un peu plus s'il te plait ?  Merci beaucoup