[Avis sur 2 thèmes] 1) Entête/Pied de page 2) Pagination

Bonjour,

Je me permets de créer ce TOPIC pour avoir vos avis sur quelques points CSS :
1) On voit beaucoup de personnes créer et positionner des DIV de part et d'autre de leur DIV servant à la gestion de leur contenu.
Est-ce la meilleure méthode?
Pour ma part, je les mets à l'intérieur de ce DIV puis je les décale vers l'extérieur de façon à retrouver la même disposition.
L'avantage c'est que mes DIV d'entête (ou menu) et de pied de page ont toujours la même largeur que mon contenu, plus besoin de revoir les positions etc même s'il existe une colonne éventuelle à côté du DIV de contenu.

2) Etant sur un template, avant de le déployer à mes pages, je me demandais comment gérer de manière optimale ma pagination.
Le plus simle des cas, serait de faire un DIV de 100% avec le texte centré mais étant "perfectionniste", je me rends compte que les flèches "précédent" et "suivant" vont être légèrement décalées.
Je m'explique via un exemple :

[b]<< ... 8 9 10 11 12 ... >>[/b]

n'a pas la même "longueur" que :

[b]<< ... 10 11 12 13 14 ... >> [/b]

Comment faire en sorte d'avoir un DIV de 100% contenant les chiffres centrés et 2 DIV float: left et float: right servant pour les flèches.
Je souhaiterais que mes flèches soient sur les bords et non collés aux chiffres.

Merci par avance pour vos retours, avis...

Patrick
Modifié par PatrickDuSud (20 Mar 2007 - 13:43)

Salut,

Pour la première question : ça dépend de ce que tu veux faire, et de la manière dont tu vois la structure de ta page.

Pour la deuxième, il me semble que tu as donné la réponse en posant la question

Mettre les liens contenant les flèches en float à droite & à gauche, voire plus simplement en absolu dans ce cas-ci pour pouvoir respecter l'ordre naturel du code HTML, puis centrer le texte dans l'élément parent :

HTML :
<p id="pagination"><a href="" title="Précédent"  id="fleche-gauche"><img src="fleche-gauche.png" alt="Précédent" /></a> 8 - 9 - 10 - 11 -12 <a href="" title="Suivant"  id="fleche-droite"><img src="felche-droite.png" alt="Suivant" /></a></p>

CSS :
a img {
   border: 0;
}
#pagination {
   position: relative;
   text-align: center;
}
#fleche-gauche, #fleche-droite {
   position: absolute;
   }
#fleche-droite {
   right: 0;
}

Sinon on peut aussi faire un petit tableau à trois cellules, hein.

Thomas D. a écrit :
Salut,

Pour la première question : ça dépend de ce que tu veux faire, et de la manière dont tu vois la structure de ta page.

Pour la deuxième, il me semble que tu as donné la réponse en posant la question

Mettre les liens contenant les flèches en float à droite & à gauche, voire plus simplement en absolu dans ce cas-ci pour pouvoir respecter l'ordre naturel du code HTML, puis centrer le texte dans l'élément parent :

HTML :
<p id="pagination"><a href="" title="Précédent"  id="fleche-gauche"><img src="fleche-gauche.png" alt="Précédent" /></a> 8 - 9 - 10 - 11 -12 <a href="" title="Suivant"  id="fleche-droite"><img src="felche-droite.png" alt="Suivant" /></a></p>

CSS :
a img {
   border: 0;
}
#pagination {
   position: relative;
   text-align: center;
}
#fleche-gauche, #fleche-droite {
   position: absolute;
   }
#fleche-droite {
   right: 0;
}

Hello,
Merci pour ton code
C'est impeccable.

Il manquait juste :

#fleche-gauche {
   left: 0;
}

Sinon la flèche gauche se trouvait centrée...

J'ai encore du mal avec les "position" et les "float" GGGGRRRRR

Florent V. a écrit :
Sinon on peut aussi faire un petit tableau à trois cellules, hein.

Niveau tableau pas de souci, je suis de la vieille époque, mais le but est de faire au maximum sans les tableaux...
C'est pas gagné mais merci à ceux qui m'ont aidé ou donné des conseils