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
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Pascale ecrit ce qui suit en ce 13/11/2009 20:37 :
Remplacez les tableaux, qu'ils disaient, avec les flottants, c'est
fastoche...



Mais si ... ;-)

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



Mais non ...

Et ensuite, je voudrais un truc comme ça :

blablabla blobloblo
blublu blibli
bleblebl blabloblubli



<div style="float:left;width:45%;margin-right:2%">
blablabla
blublu
bleblebl
</div>
<div style="float:right;width:45%;margin-left:2%">
blobloblo
blibli
blabloblubli
</div>
(avec les retours chariot kibonbien, évidemment)

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



Si c'est une position absolue, le float:left n'a pas de sens.

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



Comme :
<div style="width:99%">
dans lequel tu mets tes 2 colonnes
</div>

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



Je n'ai pas IE 8 sous la main mais ça devrait marcher.

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
romer
Pascale <chaton.tigre+ wrote:

Remplacez les tableaux, qu'ils disaient, avec les flottants, c'est
fastoche...

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 !



J'ai fait qq chose d'approchant avec 3 colonnes qui marche sur tous les
navigateurs quelque soit la taille de la police.

CSS

#colG, #colD{
float:left;
margin-top: 2px; pas obligatoire
width:50%;
text-align:center; pas obligatoire
}

html

<div id="colG">
<p>blabla<br />blabla<br />blabla</p>
</div>

<div id="colD">
<p>bloblo<br />bloblo<br />bloblo</p>
</div>

--
A+

Romer
Avatar
Pascale
docanski écrivait
news:hdkirv$1439$:

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


Mais non ...



Faut voir (-:

Et ensuite, je voudrais un truc comme ça :

blablabla blobloblo
blublu blibli
bleblebl blabloblubli



<div style="float:left;width:45%;margin-right:2%">
blablabla
blublu
bleblebl
</div>
<div style="float:right;width:45%;margin-left:2%">
blobloblo
blibli
blabloblubli
</div>
(avec les retours chariot kibonbien, évidemment)



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 » (-:

Si c'est une position absolue, le float:left n'a pas de sens.



Ça m'apprendra à recopier des bouts de code dans d'autres programmes (à
moi), je me suis basée sur un cas ou le positionnement absolute avait une
utilité, mais là, tu as tout à fait raison, il n'en a pas !

Comme :
<div style="width:99%">
dans lequel tu mets tes 2 colonnes
</div>



Dans ce genre (sauf que la largeur est bien moindre).

Je n'ai pas IE 8 sous la main mais ça devrait marcher.



Avec IE, va savoir... d'autant que je n'ai plus IE7 ni IE6 pour tester...

Je te remercie pour ton aide, je vais voir ce que ça donne (-:

--
Pascale
Avatar
Pascale
(Bernd) écrivait
news:1j9551r.jyirz11lv9uaN%:

J'ai fait qq chose d'approchant avec 3 colonnes qui marche sur tous les
navigateurs quelque soit la taille de la police.

CSS

#colG, #colD{
float:left;
margin-top: 2px; pas obligatoire
width:50%;
text-align:center; pas obligatoire
}

html

<div id="colG">
<p>blabla<br />blabla<br />blabla</p>
</div>

<div id="colD">
<p>bloblo<br />bloblo<br />bloblo</p>
</div>



En gros, Docanski me propose une colonne avec float: left et une avec
float: right, et toi, 2 float: left (-:

Je parie que les deux solutions marchent...

Par contre, s'il y avait une 3ème colonne, tu la traiterais pareil que les
2 autres ?

--
Pascale
Avatar
Eric Demeester
dans (in) fr.comp.infosystemes.www.auteurs, Pascale
<chaton.tigre+ ecrivait (wrote) :

Bonjour,

Avec IE, va savoir... d'autant que je n'ai plus IE7 ni IE6 pour tester...



Tu connais probablement, mais Multiple IE est bien pratique pour faire
des tests. Il permet de faire cohabiter plusieurs versions d'IE sans
conflit :

http://www.numerama.com/telecharger/7109-multiple-ie-installer.html

--
Eric
Avatar
Pascale
Eric Demeester <eric+ écrivait
news::

Tu connais probablement, mais Multiple IE est bien pratique pour faire
des tests. Il permet de faire cohabiter plusieurs versions d'IE sans
conflit :

http://www.numerama.com/telecharger/7109-multiple-ie-installer.html



Et bien non, je ne connaissais pas, je te remercie !

--
Pascale
Avatar
Pascale
Eric Demeester <eric+ écrivait
news::

http://www.numerama.com/telecharger/7109-multiple-ie-installer.html



Grmpf, je l'ai installé, mais çamarchepas (:
« L'application n'est pas arrivée à s'initialiser correctement »
Peut-être une incompatibilité d'humeur avec Vista (ça pourrait se
comprendre) ?

--
Pascale
Avatar
romer
Pascale <chaton.tigre+ wrote:

> CSS
>
> #colG, #colD{
> float:left;
> margin-top: 2px; pas obligatoire
> width:50%;
> text-align:center; pas obligatoire
> }
>
> html
>
> <div id="colG">
> <p>blabla<br />blabla<br />blabla</p>
> </div>
>
> <div id="colD">
> <p>bloblo<br />bloblo<br />bloblo</p>
> </div>

En gros, Docanski me propose une colonne avec float: left et une avec
float: right, et toi, 2 float: left (-:

Je parie que les deux solutions marchent...

Par contre, s'il y avait une 3ème colonne, tu la traiterais pareil que les
2 autres ?



Oui - j'écrirais #colG, #colM, #colD{
float:left;
width:33.3%;
}

Le pourcentage de la largeur-page change evidemment.

En fait 3 éléments d'égale largeur viennent se placer côte à côte à
partir de la gauche.

--
A+

Romer
Avatar
Pascale
(Bernd) écrivait
news:1j98n3b.1ck4pug168wlj4N%:

Oui - j'écrirais #colG, #colM, #colD{
float:left;
width:33.3%;
}

Le pourcentage de la largeur-page change evidemment.

En fait 3 éléments d'égale largeur viennent se placer côte à côte à
partir de la gauche.



Merci, je vois que c'est tout bête et que ça marche (-:

--
Pascale
Avatar
Pierre Goiffon
Pascale wrote:
Remplacez les tableaux, qu'ils disaient, avec les flottants, c'est
fastoche...


(...)
Et ensuite, je voudrais un truc comme ça :

blablabla blobloblo
blublu blibli
bleblebl blabloblubli



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 ?
1 2 3 4 5