28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis en train de créer une mise en page avec :
- un texte qui prend toute la largeur (fond vert)
- une boite dans ce texte alignée à droite (bleu)

Le problème est que le texte principal est encapsulé dans un table (c'est pas ma faute, c'est joomla). Et que de ce fait, mon texte reste aligné sur la gauche du bloc bleu, et ce jusqu'en bas de la page. Alors qu'une fois le bloc passé il devrai reprendre la largeur entière.

Sur l'image vous voyez le résultat escompté, mais que je ne parviens pas à obtenir.

Voici en quelques lignes le code :

<div id="page">
Le texte etc etc etc etc etc etc  (mosmainbody)
  <div id="user1">
    le module bleu (mosloadmodule)
  </div>
</div>


upload/12936-jmsuisse2.jpg
Tu ne pourras parvenir à tes fins sans modifier le code HTML.
Le bloc #user1 devrait être placé avant ton texte principal pour que ce dernier puisse s'enrouler autour.
Merci, mais non cela ne fonctionne pas en fait j'ai oublié de mettre le table dans mon exemple.


<div id="page">
<table><tr><td>Le texte etc etc etc etc etc etc</td></tr></table>  <div id="user1">
    le module bleu (mosloadmodule)
  </div>
</div>
Si si, ça change au moins une chose: faire flotter un bloc par dessus un tableau, c'est pas super aisé.

Exemple en image:

upload/2043-tablefloat.png

C'est le rendu sous Firefox 2. On obtient la même chose avec Konqueror et Safari. Opera et Internet Explorer gèrent différemment le premier cas, par contre: ils repoussent le tableau jusqu'à en dessous du flottant.

Le deuxième cas donne la même chose avec tous les navigateurs. Ça n'est pas visible sur l'image pour l'oeil non entrainé (et peu habitué au comportement des flottants), mais le tableau adapte bien sa largeur à la présence du flottant (ce que ne ferait pas un div ou un p par exemple), et le texte lorsqu'il est long ne reviendra pas se placer en dessous du flottant.

J'ai peut-être oublié quelque chose, mais je pense qu'avec un tableau ça va pas être possible.

Bien sûr, ta remarque comme quoi le flottant doit être placé en premier dans le code HTML (ce que pelloq1 semble avoir oublié dans ses exemples...) est toujours valide. Mais cette correction ne suffira pas.

pelloq1 a écrit :
Le problème est que le texte principal est encapsulé dans un table (c'est pas ma faute, c'est joomla).

Well, you're fucked.
Modifié par Florent V. (20 Feb 2008 - 10:52)
Florent V. a écrit :
Si si, ça change au moins une chose: faire flotter un bloc par dessus un tableau, c'est pas super aisé.

C'est bien ce que je dis:
Benjamin D.C. a écrit :

Cela ne change rien à ce que j'ai dit précédemment.
Tu ne pourras parvenir à tes fins sans modifier le code HTML.
Oui, mais tu ne précisais pas que c'était à cause du tableau, tu parlais uniquement de l'ordre des éléments. À te lire, on aurait pu croire que placer le bloc flottant en premier dans le code résoudrait le problème. D'où la précision apportée. Smiley cligne
bonjour

je ne sais pas dans quelle mesure tu peux modifier le code html... mais tout mettre dans la cellule peut-être ?

<div id="page">
<table><tr><td>
<div id="user1">
le module bleu (mosloadmodule)
</div>
Le texte etc etc etc etc etc etc
</td></tr></table>
</div>