Remplacer un tableau

Le
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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 7
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
docanski
Le #22046971
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/
romer
Le #22046961
Pascale
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
Pascale
Le #22046951
docanski 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
Pascale
Le #22046941
(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
Eric Demeester
Le #22046931
dans (in) fr.comp.infosystemes.www.auteurs, Pascale

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
Pascale
Le #22046921
Eric Demeester 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
Pascale
Le #22046881
Eric Demeester 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
romer
Le #22046871
Pascale
> 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
Pascale
Le #22046861
(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
Pierre Goiffon
Le #22046811
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 ?
Publicité
Poster une réponse
Anonyme