CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| problème de float sous chrome. | |
| O'wee
{ Membre }
Messages : 27
| Bonjour. (: J'ai un problème de compatibilité avec le float:right (je crois que c'est ça). Tout fonctionne à merveille sous Firefox, mais sous Chrome, c'est le bordel. Voici le forum en question, un screen sous mozilla et un screen sous chrome. Je vous laisse également mon template index_box (dans lequel j'ai inséré les float puisque je me complique toujours la vie ) : - Code:
-
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom"> <!-- BEGIN switch_user_logged_in --> <span class="gensmall">{LAST_VISIT_DATE}<br /> {CURRENT_TIME}<br /> </span> <!-- END switch_user_logged_in --> <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom"> <!-- BEGIN switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br /> <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br /> <!-- END switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> </td> </tr> </table> <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="0 cellpadding="0"> <div style="background-image:url('http://image.noelshack.com/fichiers/2012/22/1338485523-haut.png'); height: 103px; width: 728px;text-align:center">{catrow.tablehead.L_FORUM}</div> <!-- END tablehead --> <!-- BEGIN cathead --> <tr> <!-- BEGIN inc --> <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="700px"> <h{catrow.cathead.LEVEL} class="hierarchy"> <span class="cattitle"> <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a> </span> </h{catrow.cathead.LEVEL}> </td> <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td> </tr> <!-- END cathead --> <!-- BEGIN forumrow --> <tr> <!-- BEGIN inc --> <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td> <!-- END inc --> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <br /><span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> </span> <div class="con"> <div style="float:left!important;"> <div class="topsu"> <center><span class="gensmall">{catrow.forumrow.LAST_POST}</span><br> <span class="gensmall">{catrow.forumrow.TOPICS} topics ✘ {catrow.forumrow.POSTS} posts </span> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </center></div></div> <h{catrow.forumrow.LEVEL} class="hierarchy"> <div style="float: right!important;"> </h{catrow.forumrow.LEVEL}> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div> <span class="gensmall"> <!-- BEGIN switch_moderators_links --> {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </span></div> </td> </tr> <!-- END forumrow --> <!-- BEGIN catfoot --> <tr> <!-- BEGIN inc --> <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td> </tr> <!-- END catfoot --> <!-- BEGIN tablefoot --> </table><img src="{SPACER}" alt="" height="0" width="1" /><div style="background-image:url('http://image.noelshack.com/fichiers/2012/22/1338486788-bas.png'); height: 103px; width: 728px;text-align:center"></div><!-- END tablefoot --><!-- END catrow --> ainsi que le css de mes catégories : - Code:
-
/* CATÉÉÉÉ */
.forumlink { text-transform: uppercase!important; font-family: times new roman; letter-spacing: -1px; text-shadow: -2px 0px 0px white; font-size: 20px; margin-left: 35px; }
.forumlink:hover { text-transform: uppercase!important; }
.lien { text-transform: uppercase!important;
}
.con { padding:5px; background-color: #f0f0d6; border-radius: 5px; height: 143px; width: 705px; }
.cond { padding:5px; background-color: #f0f0d6; border-radius: 5px; }
.sousfo { width: 150px; background-color: #fbfbf8; height: 120px; padding: 2px; border: 1px solid #e8e8c4; overflow: auto; }
.topsu { width: 140px; background-color: #fbfbf8; padding: 2px; border: 1px solid #e8e8c4; text-transform: uppercase; font-family: arial; font-size: 10px; text-shadow: 1px 0px 0px white; color: #aaa886; height: 120px; margin-top: 3px; }
.descri { text-align: justify; background-color: #fbfbf8; border: 1px solid #e8e8c4; width: 390px!important; height: 120px; padding: 2px; overflow: auto; float: right; clear: both; }
.descrisong { text-transform: uppercase!important; font-family: arial; font-size: 10px; text-shadow: 1px 0px 0px white; color: #aaa886; padding: 2px; margin-top: -2px; } Si vous avez besoin de quoi que ce soit d'autre, dites. J'ai essayé les !important, j'ai tenté d'enlever le float left puisque google me l'a dit --», j'ai tenté de mettre les float dans le css, bref, merci de votre aide. | | |
| | | Doare
{ Spécialiste }
Messages : 544
| Dans la cellule concernée, la div du float:right n'est pas fermée correctement, la balise d'ouverture est entre deux autres balises : - Code:
-
<h{catrow.forumrow.LEVEL} class="hierarchy"> <div style="float: right!important;"> </h{catrow.forumrow.LEVEL}> Du coup ça ne s'applique à rien... - Code:
-
<!-- END inc --> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <br /> <span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> </span> <div class="con"> <div style="float:left!important;"> <div class="topsu"> <center> <span class="gensmall">{catrow.forumrow.LAST_POST}</span><br> <span class="gensmall">{catrow.forumrow.TOPICS} topics ✘ {catrow.forumrow.POSTS} posts</span> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </center> </div> </div> <div style="float: right!important;"> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span> </div> <span class="gensmall"> <!-- BEGIN switch_moderators_links --> {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </span> </div> </td> Remarques : - la balise CENTER dans la DIV "topsu" devrait être remplacée par la propriété "text-align:center;" dans le CSS - le float de "topsu" pourrait être mis directement dans le CSS (plutôt que de l'inclure dans une autre div) - idem pour le float du SPAN "genmed" ; si tu le fais, pense à soit en faire une DIV, soit lui spécifier un "display:block;" dans le CSS (sinon ça ne marchera pas) - la DIV au début du tableau devrait être avant la balise TABLE Chercher: - Code:
-
<!-- BEGIN catrow --><!-- BEGIN tablehead --> | | |
| | | O'wee
{ Membre }
Messages : 27
| wow, merci de ta réponse rapide. je prend note. (: du coup, voici ce que ça donne : http://hpics.li/e6476d9 bonne nouvelle, sur google chrome, ça fait la même chose ---». donc en gros, la description ne flotte plus du tout à côté, et elle s'ajuste selon la phrase qui est en bas .. c'est tout de fois beaucoup mieux qu'avant concernant chrome, mais y a-t-il un moyen d'avoir de nouveau ma petite phrase centré en bas, même si elle fait partie du float-right? :/ et est-ce que ce serait un erreur d'utiliser le margin pour faire remonter mes catégories? :O merci. <3 | | |
| | | Doare
{ Spécialiste }
Messages : 544
| Déjà, autant suppr le float:right. Sinon, c'est dû à la propriété "clear" que tu as spécifié pour "descri". Tu lui as dit qu'il ne voulait pas d'objets flottants à droite ou à gauche, il est sage, il t'obéit. Autrement, si j'étais toi, je ferais la chose suivante : - j'ajouterais la class "genmed" à ma div "con" - je supprimerais les balises du SPAN "genmed" - je déplacerais ma div "topsu" au début de "genmed", avant la variable {catrow.forumrow.FORUM_DESC} - j'abandonnerais le tableau qui enferme mes div "descri" et "sousfo" dans mes descriptions - j'ajouterais une class commune à "topsu", "descri" et "sousfo" (par exemple "float") - je placerais tout ce petit monde en CSS : - Code:
-
div.genmed .float { float:left; } .descrisong { clear:both; } /* ne pas oublier de supprimer le clear de descri */ En somme, le tableau est inutile pour aligner deux divs l'une à côté de l'autre. C'est ce à quoi sert "float". Et tout ce qu'on a fait ici, c'est faire en sorte que dans le rendu final, ça donne tout simplement : - Code:
-
<div class="con genmed"> <div class="topsu float"></div> <!-- début variable {catrow.forumrow.FORUM_DESC} --> <div class="descri float"></div> <div class="sousfo float"></div> <div class="descrisong"></div> <!-- fin de la variable --> </div> Ce qui est beaucoup plus simple en HTML, et aussi simple à gérer en CSS pour aligner les trois premières div et mettre la dernière en dessous. | | |
| | | O'wee
{ Membre }
Messages : 27
| dfgasfgdafg, ça marche. et en plus, je comprend. --» merci beaucoup beaucoup beaucoup pour ton aide, vraiiiment. | | |
| | | Doare
{ Spécialiste }
Messages : 544
| De rien, c'était un plaisir. Je suis contente que tu aies tout compris ~ N'oublie pas de signaler que le topic est résolu. | | |
| | | pamina
{ Membre actif }
Messages : 1170
| Merci Doare de signaler que le sujet est terminé ! Je classe. | | |
| | | Contenu sponsorisé
| | | | | problème de float sous chrome. | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|