[Résolu - Merci] Pied de page et tableau.

Bonjour.

J'ai décidé de passé aux CSS, donc débutant.
Pour recommencer de bon pied j'ai pris un exemple de site sans tableau ici.
Tout marche bien sauf ici. ( Je maîtrise correctement le HTMl.)
Je désire remplacer ma bonne vieille routine de bas de page qui est un tableau !


Un tableau d'une ligne de 3 cellules.
- Cellule de gauche, centrée à gauche, " Page précédente"
- Cellule du milieu, centrée , "Haut de la page"
- Cellule de droite, centrée à droite, "Page suivante"
(original hein )

Et là je merdouille comme un débutant que je suis...
Un bout de code pour m'aider ?

Merci d'avance.
Modifié par Andre-d (01 May 2005 - 09:23)

Salut,

tu peux utiliser simplement une liste.

<ul id="pied">
<li>précédent</li>
<li>haut de page</li>
<li>suivant</li>
</ul>

Et dans les styles CSS

ul#pied li { width: 33.3% }

A modifier en fonction de ce que tu veux exactement.

Merci pour cettev réponse.

Je la teste de suite.

Merci pour le code

Mais cela me donne un menu sur trois lignes, et non pas une seule.

Je suis arrivé ici :

<Div style="position: absolute; bottom: 5px; left:   0%; width: 170px; HEIGHT: 20PX; font-size:16px; FONT-WEIGHT: 600; text-align:   left;">« Gauche «</div>
<Div style="position: absolute; bottom: 5px; left: 33%; width: 170px; HEIGHT: 20PX; font-size:16px; FONT-WEIGHT: 600; text-align: center;"> Centre </div>
<Div style="position: absolute; bottom: 5px; left: 66%; width: 170px; HEIGHT: 20PX; font-size:16px; FONT-WEIGHT: 600; text-align: right;">» Droite »</div>

Mais text-align ne fonctionne pas ???

Hum ... Le code sera nettoyé dès son bon fonctionnement.
Merci

Arf, j'ai oublié de préciser le plus important ^^

Ajoute float: left; à tes <li>

Il est pas bon ton code. Utilises une liste comme je te montrais.
Je te conseille de mettre les styles CSS à part, séparé du code.

<ul id="pied">
<li id="precedent">precedent</li>
<li id="haut">haut</li>
<li id="suivant">suivant</li>
</ul>

Et dans les CSS

ul#pied { margin: 0; padding: 0 }

ul#pied li
{
float: left;
width: 33.3%;
height: 20px;
line-height: 20px;
}

li#precedent { text-align: left }
li#haut { text-align: center }
li#suivant { text-align: right }

Et ça devrait rouler.
Modifié par Olivier (30 Apr 2005 - 13:49)

Merci encore pour le code

Mais comme j'utilise comme
site : http://css.alsacreations.com/modeles/modele11.htm
menu : http://css.alsacreations.com/modelesmenus/vd1.htm
Le tout modifié selon mes besoins, cet ajout m'a donné beaucoup de soucis.
J'ai résolu ce problème de choix dans le pied de page de la manière suivante :
CSS

.PdPage{
FLOAT: LEFT;BORDER: 1PX SOLID #602760;PADDING:0;
WIDTH: 33%;HEIGHT: 20PX; FONT-SIZE:16PX;FONT-WEIGHT: 600; 
}

Dans la page

<DIV class="PdPage" ALIGN="left"> Gauche </DIV>
<DIV class="PdPage" ALIGN="center"> Centre </DIV>
<DIV class="PdPage" ALIGN="right"> Droite </DIV>

Le border est là uniquement pour voir où je mets les pieds (dans le pied de page ).

A moins que ce code soit réellement cochon (digne d'un débutant).
je le passerai en Résolu.

Bah, ce qu'il y a c'est qu'une liste semble bien plus adaptée que tes div...

Et les modèles de page utilisés sont indépendant de ce problème

OK, je retente.

Merci.