Hellow.
Concernant le premier point, pour arriver à ce que tu veux, il faut faire flotter justement les dits carrés à gauche de "Thème du RP". Le mix table/list que tu as fait, en plus d'être un peu bizarre, est totalement inutile.
D'ailleurs, il y a une erreur dans l'ordre de fermeture des balises :
- Code:
-
[list][table][tr][td]DIV1[/td][td]DIV2[/td][td][/list][/td][/tr][/table]
=> Tu commences par LIST, puis le ferme dans un TD vide.
L'erreur est à l'origine de l'espacement à gauche sur tout le code. En tout cas, sur Firefox, le navigateur a "corrigé" pour fermer la balise à la fin du code. Du coup, en enlevant tout le BBcode, il faudra que tu fasses des ajustements dans tes paddings et margins.
Bref. Pour aller mettre tes "ava" à gauche, il suffit donc de :
- enlever toutes les balises BBcode
- déplacer les deux divs avant le "Thème du RP"
- ajouter un "float:left;" dans le style des deux divs.
Pour le deuxième problème, la seule solution que je peux te proposer ne permet pas au texte d'entourer l'image (continuer sur la gauche quoi). Ca arrange juste le "je veux qu'elle reste dans la bordure". Ca consiste simplement à ajouter une div après l'image qui va "déclarer" la fin du float.
- Code:
-
<img src="http://nsa29.casimages.com/img/2012/06/08//120608042058481500.gif" style="float:right;" /><div class="clear"></div>
Pour info, la class "clear" existe par défaut dans le CSS de FA, et contient la propriété "clear:both".
A part ça, ça fait beaucoup de CSS dans le HTML ! Il ne serait pas plus simple de spécifier des class et de mettre tout le CSS dans le panneau d'administration ? En plus, si ce code est destiné à être réutilisé par plein de gens, ça éviterait sans doute des erreurs.
Par exemple, tes deux cadres "vava" ont exactement le même style. Les flanquer d'une class commune et tout mettre dans le CSS, ça ferait plus propre.
Tu passerais de ça :
- Code:
-
<div style="float:left;border: 1px solid salmon; padding: 0px; width: 100px; height:100px; -moz-border-radius: 30px; -webkit-border-radius: 30px;background-image: url(Lien du vava);"></div><div style="float:left;border: 1px solid salmon; padding: 0px; width: 100px; height:100px; -moz-border-radius: 30px; -webkit-border-radius: 30px;background-image: url(Lien du vava);"></div>
A ça dans ton post :
- Code:
-
<div class="ava"></div><div class="ava"></div>
Et ça dans le CSS :
- Code:
-
.ava {
float:left;
border: 1px solid salmon;
padding: 0;
width: 100px;
height:100px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
background-image: url(Lien du vava);
}
Au pire, si le "background-image" est voulu pour être modifié par tout le monde, tu peux le laisser dans le HTML :
- Code:
-
<div class="ava" style="background-image: url(Lien du vava);"></div><div class="ava" style="background-image: url(Lien du vava);"></div>
A noter que dans ce cas, les balises IMG seraient plus appropriées que des DIV.
Edit: J'espère que je ne t'ai pas totalement perdue. @_@ Enfin, tu me dis. x)