[CSS] text-align et float

Version imprimable

18/01/2006, 13h31
ddeee

[CSS] text-align et float

Bonjour à tous,

je programme un calendrier pour le site d'une ecole
je suis à deux doigt de revenir a une présentation tableau tant les CSS m'ennervent
je tente ma chance ici

http://www.premiumwanadoo.com/ecole-...calendrier.php

impossible d'avoir du texte centré au niveau du nom du mois "janvier 2006", le texte doit etre centré dans les DIV avec cadre rouge (pour debuguer), apparemment text-align ne marche plus quand on met float:left

y a-t-il un bug (des bugs) dans mon code ?
à l'aide
18/01/2006, 13h41
SIBELIUS

Hello,

Sans vouloir te vexer le moins du monde, quel est l'intérêt de ne pas utiliser de tableau pour une donnée parfaitement tabulaire qu'est un calendrier ?

Je comprends l'engouement et la mode de vouloir se débarasser des tableaux de mise en forme, mais par pitié évitons d'employer des éléments à la sémantique floue alors que les tableaux sont fait pour jouer précisément ce rôle dans ton cas.

PS : pour répondre à ta question, as-tu testé un "text-align: center" dans ton élément div ?
Float left annule la largeur de l'élément si tu ne la précises pas. Du coup, effectivement, l'élément n'occupe que la taille de son contenu (qui ne peut logiquement plus être centré)

Rajoute "text-align: center;" dans ta classe content, ça ira tout de suite mieux :

Code:

.content { border: 1px solid black; width: 410px; padding: 1px; margin:auto;background-color:#ADCCD6; text-align: center;}

Après, tu mets des DIV partout dans la date, alors les <, "Janvier 2006" et > sont sur des lignes différentes. Faut que tu en supprimes quelques uns :
Code:

1 2 3 4 5 <div> <a href="http://www.premiumwanadoo.com/ecole-saint-joseph/agenda/calendrier.php?m=12&a=2005"><</a> janvier 2006 <a href="http://www.premiumwanadoo.com/ecole-saint-joseph/agenda/calendrier.php?m=2&a=2006">></a> </div>

18/01/2006, 13h54
ddeee

Citation:

Envoyé par SIBELIUS

Je comprends l'engouement et la mode de vouloir se débarasser des tableaux de mise en forme, mais par pitié évitons d'employer des éléments à la sémantique floue alors que les tableaux sont fait pour jouer précisément ce rôle dans ton cas.

disons que j'utilise les CSS depuis environ 1 an, je ne suis pas un pro, mais en effet je suis d'accord avec toi, rien ne nous interdit d'utiliser les tableaux dans certains cas, ici j'ai voulu faire le malin je l'avoue :-)

je trouve dommage qu'on ne puisse pas resoudre des problemes simples avec les CSS, ici je veux 3 blocs sur une meme ligne avec des contenus centrés, à croire que les CSS c'est pas fait pour ça non plus (ça sert à quoi au final ?)

Citation:

Envoyé par SIBELIUS

PS : pour répondre à ta question, as-tu testé un "text-align: center" dans ton élément div ?
Float left annule la largeur de l'élément si tu ne la précises pas. Du coup, effectivement, l'élément n'occupe que la taille de son contenu (qui ne peut logiquement plus être centré)

j'ai essayé ça marche pas
en plus mais DIV ont une largeur en pourcentage, je veux une présentation "liquide" qui marche quelque soit la largeur de mon container
18/01/2006, 14h03
SIBELIUS

Citation:

Envoyé par ddeee

en plus mais DIV ont une largeur en pourcentage, je veux une présentation "liquide" qui marche quelque soit la largeur de mon container

Les tableaux et les cellules aussi acceptent les dimensions en pourcentage, rien ne t'empêche de faire une présentation liquide en tableaux ;)
18/01/2006, 14h06
ddeee

Citation:

Envoyé par _Mac_

Rajoute "text-align: center;" dans ta classe content, ça ira tout de suite mieux :

merci _Mac_

mais je veux que mes boutons "mois précedent" et "mois suivant" (< et >) soient dans les coins de mon calendrier, je ne veux qu'ils soient collé à "janvier 2006"

si j'enleve les DIV tout est collé et on ne peut plus positionner les éléments :(
18/01/2006, 15h13
denisC

Citation:

Envoyé par SIBELIUS

Sans vouloir te vexer le moins du monde, quel est l'intérêt de ne pas utiliser de tableau pour une donnée parfaitement tabulaire qu'est un calendrier ?

+1. C'est très à la mode en ce moment d'être contre les tableaux. Même si dans 95% des cas, c'est jusitfié, je trouve que cet exemple devrait être dans les 5% restants :wink:

Pour le reste, ça marche très bien sous IE (et Opera).

Pour firefox, le seul bug qu'il te reste est que tu mets tes déclarations de style inline (dans le HTML) entre des { } ce qui n'est ni nécessaire ni recommandé, et ce qui fait que Firefox ne les interprete pas.
18/01/2006, 15h32
SIBELIUS

Citation:

Envoyé par denisC

+1. C'est très à la mode en ce moment d'être contre les tableaux. Même si dans 95% des cas, c'est jusitfié, je trouve que cet exemple devrait être dans les 5% restants :wink:

En fait, puisque tu me tends la perche, je vais aller plus loin.

Il y'a actuellement 3 raisons de ne pas utiliser de tableaux :

1- ce n'est pas fait pour ça. Chaque balise a un sens, une valeur sémantique. Ici, le sens convient tout à fait à un tableau et on voudrait le remplacer par des éléments sans aucun sens (div)

2- les tableaux imbriqués sont peu accessibles. Ici on va faire pire : imbriquer des éléments sans sens. Notons qu'un tableau de données bien construit possède de nombreux moyens de faciliter l'accessibilité (caption, thead, tfoot, etc.) qui vont être perdus ici

3- les tableaux sont souvent un surplus de code. Là encore, on ne va rien gagner du tout à tout remplacer par des div

En bref, dans tous les cas, il n'y a strictement aucun intérêt (dans ce cas précis) à se passer de tableau.

Citation:

Envoyé par ddeee

mais je veux que mes boutons "mois précedent" et "mois suivant" (< et >) soient dans les coins de mon calendrier, je ne veux qu'ils soient collé à "janvier 2006"

OK, j'avais pas compris. Dans ce cas, il faut que tu conserves le text-align comme je l'ai donné et que tu mettes ton calendrier comme suit :
Code:

1 2 3 4 5 <div> <div style="float: left;"><a href="http://www.premiumwanadoo.com/ecole-saint-joseph/agenda/calendrier.php?m=12&a=2005"><</a></div> <div style="float: right;"><a href="http://www.premiumwanadoo.com/ecole-saint-joseph/agenda/calendrier.php?m=2&a=2006">></a></div> <div style="">janvier 2006</div> </div>

merci à tous pour vos réponses

j'ai reussi à écrire un code qui marche : j'utilise position:relative et je garde mes mesures en pourcentage
Code:

1 2 3 4 5 6 <div style="border: 1px solid red"> <div style="text-align:center; border: 1px solid black;width:6%;height:20px">A</div> <div style="text-align:center; border: 1px solid black;width:88%;height:20px;position:relative;left:6%;top:-22px">B</div> <div style="text-align:center; border: 1px solid black;width:6%;height:20px;position:relative;left:94%;top:-41px">C</div> </div>
et oui utiliser un tableau aurait été plus simple et plus rapide ici

le point positif est que les nombreux essais pour arriver à la solution ont été très formateur tout comme cette discussion

une journee qui se termine bien donc :D

Citation:
Envoyé par _Mac_
OK, j'avais pas compris. Dans ce cas, il faut que tu conserves le text-align comme je l'ai donné et que tu mettes ton calendrier comme suit :
Code:

1 2 3 4 5 <div> <div style="float: left;"><a href="http://www.premiumwanadoo.com/ecole-saint-joseph/agenda/calendrier.php?m=12&a=2005"><</a></div> <div style="float: right;"><a href="http://www.premiumwanadoo.com/ecole-saint-joseph/agenda/calendrier.php?m=2&a=2006">></a></div> <div style="">janvier 2006</div> </div>
excellent !! ça marche tres bien
et c'est beaucoup plus simple que ma solution
un grand merci !!