Partage

Alignement texte footer

6 décembre 2017 à 14:17:35

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

6 décembre 2017 à 14:26:09

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.

6 décembre 2017 à 16:43:02

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

Staff 6 décembre 2017 à 16:51:09

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
6 décembre 2017 à 16:51:23

Lamecarlate a écrit:

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

6 décembre 2017 à 21:19:50

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 :euh: 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.

Un homme azerty en vaut deux.
6 décembre 2017 à 22:45:33

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

Staff 7 décembre 2017 à 7:54:49

> flex-direction: column;

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

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
7 décembre 2017 à 20:27:22

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

Staff 7 décembre 2017 à 20:54:29

Et simplement *ne pas mettre* flex-direction: column, tu as essayé ?
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
7 décembre 2017 à 21:14:43

Oui ça ne les aligne pas.
Staff 7 décembre 2017 à 22:09:04

Tu peux montrer ça ? Par exemple en copiant ton code https://codepen.io/pen , puis tu sauvegardes et tu nous donnes l'url.
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
8 décembre 2017 à 14:37:20

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.

Un homme azerty en vaut deux.
8 décembre 2017 à 17:33:58

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

Staff 8 décembre 2017 à 18:06:19

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>.
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
8 décembre 2017 à 21:30:42

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.
Staff 8 décembre 2017 à 22:17:40

As-tu modifié le pen ? Afin qu'on voie tes avancées.
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
8 décembre 2017 à 22:49:27

Oui je viens de le modifier

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

Staff 8 décembre 2017 à 22:52:19

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é".
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
10 décembre 2017 à 20:06:16

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 ?
Staff 10 décembre 2017 à 21:05:07

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 ?
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

Alignement texte footer

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown