Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Remplacer un tableau

64 réponses
Avatar
Pascale
Remplacez les tableaux, qu'ils disaient, avec les flottants, c'est
fastoche...

Le problème c'est que je dois être trop nulle pour ça.

Alors voilà, j'ai très classiquement un titre, des paragraphes ordinaires.

Et ensuite, je voudrais un truc comme ça :

blablabla blobloblo
blublu blibli
bleblebl blabloblubli

En un mot, un petit tableau sans bordures (-:

Pour la « colonne » de gauche qui est donc maintenant un paragraphe, j'ai
mis :
float: left;
position: absolute;

Pour celle de droite, j'ai mis tout bêtement :
padding-left: 150px;

L'ensemble du « tableau » (2 paragraphes, donc) est inclus dans une div.

Le résultat est correct avec Firefox et Opera, mais avec IE8, c'est la
cata : la 2ème « colonne » est au moins 20px plus bas que la 1ère !

Désolée de poser une question qui paraît probablement bien niaise à la
plupart des gens du forum, mais je ne trouve pas la réponse à ma question.

Si quelqu'un peut m'aider, je l'en remercie.

--
Pascale

10 réponses

1 2 3 4 5
Avatar
Pascale
Pierre Goiffon écrivait
news:4b02a7d0$0$32555$:

L'idée n'est certainement pas de supprimer tous les tableaux ! Mais de
ne plus les utiliser à des fins de mise en page.
L'exemple que vous donnez laisse à penser que vous avez bien des données
tabulaires. Pourquoi voulez-vous supprimer l'utilisation du tableau ?



Ce n'est pas que je veuille à tout prix supprimer les tableaux, et
d'ailleurs j'en utilise toujours. Mais quelquefois, j'aime bien apprendre,
aussi, à faire autrement. Il est vrai que ma question relevait plus de la
curiosité que de la nécessité absolue.

--
Pascale
Avatar
Olivier Masson
Pascale a écrit :

Ce n'est pas que je veuille à tout prix supprimer les tableaux, et
d'ailleurs j'en utilise toujours. Mais quelquefois, j'aime bien apprendre,
aussi, à faire autrement. Il est vrai que ma question relevait plus de la
curiosité que de la nécessité absolue.




Alors achetez un bon bouquin (celui de Raphael Goetter est pas mal) ou
lisez de *bons* sites (openweb par exemple).
Parce que là, avec les float, on ne vous aura donné que de mauvaises
pistes. Les "gurus" le disent, mais pas besoin d'être guru pour le
comprendre : si vous avez des float, il y a des chances qu'il y ait un
problème de conception dans votre site.
Remplacer des <table> par des <div> en les positionnant selon ce qui
fonctionne et non ce qui convient n'est pas une grosse progression.
Avatar
Pascale
Olivier Masson écrivait
news:4b03a79e$0$1657$:

Alors achetez un bon bouquin (celui de Raphael Goetter est pas mal) ou
lisez de *bons* sites (openweb par exemple).



Je vais beaucoup sur le siteduzero et aussi sur la doc du W3C. J'irai voir
openweb.

Parce que là, avec les float, on ne vous aura donné que de mauvaises
pistes. Les "gurus" le disent, mais pas besoin d'être guru pour le
comprendre : si vous avez des float, il y a des chances qu'il y ait un
problème de conception dans votre site.



? et même ???

Remplacer des <table> par des <div> en les positionnant selon ce qui
fonctionne et non ce qui convient n'est pas une grosse progression.



Bof, j'ai un peu de curiosité, mais je ne suis qu'une amatrice et pas une
pro, je ne prétends pas que mon travail soit conforme à des exigences
professionnelles. Je me contente d'essayer d'avoir des sites qui marchent
avec la plupart des navigateurs et qui soient conformes W3C. Mais je
comprends que ça puisse être considéré comme insuffisant.

--
Pascale
http://www.la-grille-verte.net
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Pascale ecrit ce qui suit en ce 14/11/2009 15:15 :

Je trouve ça un peu bizarre de mettre un float left et un float right car
j'ai l'impression de ne pas savoir par rapport à quoi ils « flottent » (-:



Ne suis pas passé ces derniers jours sur le forum ...
Les 2 <div> de gauche et de droite "flottent" par rapport au <div>
contenant.
Celui-ci fait, par exemple, 100 % de la largeur de la fenêtre et les 2
<div> de contenu font 45 %. Il reste donc 10 % et c'est pourquoi un
float:left et un float:right sont plus appropriés que 2 float:left. Dans
ce dernier cas, ils seraient collés l'un à l'autre, l'espace restant de
10 % se situant alors à leur droite et non au centre. Bien entendu, il
n'est pas nécessaire d'avoir cet espace, selon la mise en page que tu
désires faire. Dans ce cas, 50 % devraient *theoriquement* être utilisés
*mais* l'interprétation des marges et espaces est différente de MSIE à
Mozilla. Ce pourcentage doit donc être adapté en fonction des valeurs
que tu attribueras aux "margin" et "padding". C'est tout-à-fait
arbitrairement que j'ai "réglé" cette largeur à 45 %.
Au cas où il y aurait 3 colonnes, le float:left peut se concevoir car il
n'existe pas de ... float:middle :-).

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
Pascale
docanski écrivait
news:he0in0$117v$:

Ne suis pas passé ces derniers jours sur le forum ...
Les 2 <div> de gauche et de droite "flottent" par rapport au <div>
contenant. [...]



Merci, tes explications sont claires ! (-:

--
Pascale
http://www.la-grille-verte.net
Avatar
Olivier Masson
Pascale a écrit :

? et même ???



Rien de bien complexe : un float flotte, comme son nom le fait
comprendre. Lorsque l'on crée des colonnes ou des boites flottantes, on
considère que l'affichage pourra être déstructuré (je ne retrouve pas le
site que je voulais donner en exemple).
Si on veut 3 colonnes, la plupart du temps, on ne souhaite pas qu'une
d'entre elle se retrouve en-dessous.
Ceci dit, il arrive à cause des limitations de css, que l'on ne puisse
pas faire autrement. Mais c'est de plus en plus rare.
Donc, en bref, ce n'est pas une erreur que d'utiliser du float, mais
parfois on peut faire plus juste.

Bof, j'ai un peu de curiosité, mais je ne suis qu'une amatrice et pas une
pro, je ne prétends pas que mon travail soit conforme à des exigences
professionnelles. Je me contente d'essayer d'avoir des sites qui marchent
avec la plupart des navigateurs et qui soient conformes W3C. Mais je
comprends que ça puisse être considéré comme insuffisant.




Un site conforme signifie qu'il n'y a pas d'erreurs de syntaxe, pas
beaucoup plus.
Quant aux "exigences professionnelles", elles sont souvent plus proches
d'exigences de rentabilité que de qualité.
Comprendre le "pourquoi ?" rend plus aisé le "comment ?", sinon on se
contente d'appliquer les exemples que l'on voit partout. Mais à ce
moment-là, mieux vaut utiliser un framework CSS et même un outil de
conception tel http://builder.yaml.de/ (rien à voir avec le langage YAML)
Avatar
Pascale
Olivier Masson écrivait
news:4b03d15a$0$2583$:

Donc, en bref, ce n'est pas une erreur que d'utiliser du float, mais
parfois on peut faire plus juste.



Merci pour tes explications.
Concrètement, dans le cas que j'ai exposé, quelle solution serait la plus
« propre » ?

--
Pascale
http://www.la-grille-verte.net
Avatar
romer
Olivier Masson wrote:

Alors achetez un bon bouquin (celui de Raphael Goetter est pas mal) ou
lisez de *bons* sites (openweb par exemple).
Parce que là, avec les float, on ne vous aura donné que de mauvaises
pistes.



Il ya là une contradiction car Goetter dans son bouquin ne dissuade pas
de l'utilisation des float et même les utilise largement sans dire
cependant avec précision dans quel cas il le fait ou ne le ferait pas.
Ce qui donc reste un peu flou.
Eric Meyer dans ses ouvrages te donnera encore plus de précisions sur
ces questions mais c'est plus technique et exhaustif.
--
A+

Romer
Avatar
SAM
Le 11/18/09 11:50 AM, Olivier Masson a écrit :
Pascale a écrit :

? et même ???



Rien de bien complexe : un float flotte, comme son nom le fait
comprendre. Lorsque l'on crée des colonnes ou des boites flottantes, on
considère que l'affichage pourra être déstructuré (je ne retrouve pas le
site que je voulais donner en exemple).



Pour ce qui est des exemples,
j'ai toujours ma "démo" du float left
avec une boite d'arret qui flotte elle aussi
et dont les résultats ne sont pas les mêmes entre Firefox et mon IE :
<http://pagesperso-orange.fr/stephane.moriaux/truc/demos/float_left.shtml>
et dont je je ne sais comment y réagissent les IE Windows à ce jour.


Si on veut 3 colonnes, la plupart du temps, on ne souhaite pas qu'une
d'entre elle se retrouve en-dessous.



Bon, bien sûr avec la démo précédente (dont ce n'était pas l'objet),
si on rétrécie trop la largeur de fenêtre
certaines boites glissent en dessous d'autres.

Yaka les régler pour que ça ne le fasse pas non ?
(width: 32%; par exemple)
et le contenu réglé lui aussi en proportionnel
<http://pagesperso-orange.fr/stephane.moriaux/truc/3cols_images_adapt_h_strict.htm>

Ceci dit, il arrive à cause des limitations de css, que l'on ne puisse
pas faire autrement. Mais c'est de plus en plus rare.
Donc, en bref, ce n'est pas une erreur que d'utiliser du float, mais
parfois on peut faire plus juste.



Le seul problème est la différence d'interprétation des bordures entre
les IE et les autres
Ce qu'on n'a pas si emploi de tables.
Mélétables-cévilain !
(en particulier pour l'accessibilité <http://www.braillenet.org/>
<http://handy.univ-lyon1.fr/access/charte.html> et voir le § Tables)

--
sm
Avatar
Guy Gruais
Bonjour,

Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :

<http://pagesperso-orange.fr/stephane.moriaux/truc/demos/float_left.shtml>
et dont je je ne sais comment y réagissent les IE Windows à ce jour.



Voir (IE7 sous XP SP3) .

http://cjoint.com/?lsqPw6tBYa

--
Cordialement.


http://paysderetz.free.fr/
http://fonderie.indret.free.fr/
1 2 3 4 5