Disposition du texte dans footer

[elchir]

Bonjour,
J'administre un site sous Joomla 2.5 avec le template Beez2.

Dans le footer, mon menu s'aligne à droite, sur deux lignes (cf PJ)
Comment faire pour que ce menu soit:
- aligné à gauche,
- sur une seule ligne?

Merci pour vos conseils,

[toffffe]

Re : Disposition du texte dans footer

Salut
As-tu un lien à nous donner ?
Il faudrait surement changer le css avec un text-align: left;

[elchir]

Re : Disposition du texte dans footer

Bonsoir tofffe,

le site est là: http://www.ac-nice.fr/romee/

Je n'ai pas trouvé de text-align dans le index.php, mais je débute avec joomla.
Ce menu est en position 14, ce qui correspond au footer dans beez2.

[toffffe]

Re : Disposition du texte dans footer

dans un custom.css il faut que tu mettes
#footer > ul > li{text-align: left;}

Voila comment faire un custom.css http://www.stylitek.com/tutoriel-joo...crasement.html

[elchir]

Re : Disposition du texte dans footer

Merci toffffe,
en effet avec un custom.css ça marche (je ne l'ai essayé qu'en local pour l'instant).

Et comment faire pour que les éléments du menu soient sur une même ligne (comme en bas de cette page http://forum.joomla.fr/ où nous contacter, forum, archives,.. sont sur une ligne? ou faut-il faire autre chose q'un menu?

[toffffe]

Re : Disposition du texte dans footer

Dans ce cas il faut mettre un float: left sur les li concernés soit

#footer ul li{float: left;}

[elchir]

Re : Disposition du texte dans footer

Merci Tofffe, ça marche (en local, je ne peux le tester sur le serveur pour l'instant).

Mais (il faut toujours un mais), une puce est ajoutée à chaque item du menu, et cette puce vient se superposer aux éléments du menu (cj PJ):


Sais-tu comment supprimer ces puces? ou comment augmenter l'espace entre chaque item du menu?

[PhilJ]

Re : Disposition du texte dans footer

Bonjour,

[...] Mais (il faut toujours un mais), une puce est ajoutée à chaque item du menu, et cette puce vient se superposer aux éléments du menu

=> Cet anti-puces devrait bien marcher :

#footer li {

list-style: none;

}

Ensuite, s'il n'y a rien à afficher à gauche, il serait plus attendu de voir le menu au centre :

#footer ul {

display: table;

margin: 0 auto;

}

Puis, pour que les deux liens de menu se positionnent sur la même ligne :

#footer li {

float: left;

}


Reste :

comment augmenter l'espace entre chaque item du menu ?

=> On ajoute un peu d'air sur la droite du premier lien :

#footer li:nth-of-type(1) {

padding-right: 6px;

}

On peut aussi ajouter une petite barre entre les deux (d'une couleur plus discrète que celle des liens), en agissant cette fois sur le second lien, et avec un peu d'espace en prime pour équilibrer l'effet de l'intervention précédente :

#footer li:nth-of-type(2):before {

content: "| ";
color: #aaa;

}

Et empêcher le soulignement qui surcharge inutilement les liens au repos :

#footer li > a {

text-decoration: none;

}

Mais le rétablir lors de leur survol (tout en éliminant le surlignement bleu intempestif) :

#footer li > a:hover {

text-decoration: underline;
background: transparent;

}

Pourquoi pas aussi diminuer un peu la taille des caractères :

#footer li > a {

font-size: 90%;

}

Enfin, aération de l'ensemble :

#footer ul {

padding: 20px 0;

}

________________________

Le code final :


#footer ul {

display: table;
margin: 0 auto;
padding: 20px 0;

}
footer li {

list-style: none;
float: left;

}
#footer li:nth-of-type(1) {

padding-right: 6px;

}
#footer li:nth-of-type(2):before {

content: "| ";
color: #aaa;

}
#footer li > a {

text-decoration: none;
font-size: 90%;

}
#footer li > a:hover {

text-decoration: underline;
background: transparent;

}


________________________


Enfin, si vous préférez que le menu soit calé à gauche (mais pourquoi voudriez-vous une chose pareille ?), il suffit de remplacer :

#footer ul {

display: table;
margin: 0 auto;
padding: 20px 0;

}

par :

#footer ul {

display: table;
margin: 0;
padding: 20px 0;

}



Bonne journée.



Cordialement,



PhilJ


PS : vous devriez vérifier votre lien vers la page de contact, car il est démesurément long et probablement sans raison.