28173 sujets

CSS et mise en forme, CSS3

Problème d'alignement horizontal avec IE

bonjour,

Voici mon problème :
J'ai une page avec mise en forme en div. Dans le content, j'ai un tableau PPAL sur 2 colonnes, qui me permet (avec un while en php) d'afficher dynamiquement tous les résultats qu'il trouve.
J'ai donc un resultat par cellule, et 2 celllules par ligne.

Chaque résultat s'affiche dans un tableau RESULTAT, sachant que tous les résultats ne font par forcément la meme nombre de lignes, donc pas la meme hauteur...

Or, je voulais que tous mes tableaux RESULTAT s'harmonisent au sein d'une même ligne, au niveau de la hauteur, afin d'aligner parfaitement le bas de chaque tableau de résultat.

J'ai donc rajouté -en gros- quelques height=100% sur des cellules et aussi dans certains div, avec une image dupplicable en background de la partie qui s'allonge pour s'adapter.

J'arrive au résultat parfait que je souhaite sous Firefox, qui rallonge les tableau... mais sous IE, il semble ne pas tenir compte de ces données, car il adapte malgré tout la hauteur du tableau RESULTAT en fonction de son contenu. Donc sur une ligne, les bas des tableaux ne sont jamais alignés...

Pourquoi ça marche sous firefox et pas sous IE ? Qqn aurait-il une suggestion pour résooudre ça ?

Merci ! Smiley smile
Bonsoir et bienvenu !

Pourrais-tu nous montrer un morceau de code s'il te plait ?
Car sans ça, il y a de grandes chances qu'on ne trouve pas d'où vienne ton problème Smiley rolleyes
bien sur...!

Avez vous besoin plutot du fichier css ou du fichier php ? (en plus, je bosse avec smarty, donc mes données d'affichage sont dans le fichier template .tpl)
ok, voici la feuille de style :

/* --------------------------------------- ELEMENTS GENERAUX DE LA PAGE --------------------------------------- */

body {
font-family:Verdana, Helvetica, sans-serif;
text-align:center;
background-color:#c10500;
margin:0;
padding:0;
}

#bodycontent
{
position:relative;
margin-left: auto;
margin-right: auto;
width:900px;
text-align:left; /* --- pour IE, on rétablit l'aignement normal par rapport au body --- */
}

#haut_page
{
z-index:10;
position:absolute;
width:900px;
height:318px;
top:0px;
left:0px;
background-image:url(../images/sps_cadre_haut.gif);
background-repeat: no-repeat;
}

#haut_edito
{
z-index:20;
position:absolute;
left:100px;
top:160px;
width:430px;
height:52px;
line-height: 15px;
color:#000000;
font-size: 12px;
text-align: justify;
padding:10px 10px 10px 10px;
}

.lienspronofun
{
z-index:40;
position:absolute;
left:328px;
top:288px;
height:20px;
width:500px;
text-align:right;
font-size: 14px;
font-weight: bold;
font-variant:small-caps;
color: #FFFFFF;
}

#faux_content {
position: relative;
height: 318px;
}

#content
{
z-index:20;
position:relative;
top:0px;
left:0px;
background-image:url(../images/sps_cadre_ppal_fond.jpg);
background-repeat:repeat-y;
padding-left:75px;
padding-right:207px;
padding-top:35px;
padding-bottom:0px;
text-align:justify;
}

#bas_page
{
z-index:10;
position:relative;
bottom:0px;
width:900px;
height:267px;
}

#bas_page_content
{
z-index:11;
position:absolute;
bottom:0px;
width:900px;
height:267px;
background-image:url(../images/sps_cadre_bas.gif);
background-repeat:no-repeat;
}

#pub_droite
{
z-index:21;
position:absolute;
left:700px;
top:355px;
width:120px;
height:600px;
border:1px solid #000000;
background-image:url(../images/bannieres/skyscraper_paris_sportifs.gif);
background-repeat:no-repeat;
}


/* ------------------------------------------------- ELEMENTS DE L'AFFICHAGE DE TOUS LES SITES ---------------------------------------------------- */


#div_sites{
left:75px;
top:35px;
width:618px;
}

#tab_sites{
width:100%;
}

#faux_site_content {
position: relative;
height: 1px;
}

#site_content
{
z-index:30;
position:relative;
top:0px;
height:95%;
left:0px;
width:288px;
}


/* ------------------------------------------------- ELEMENTS REPETES POUR CHAQUE SITE ---------------------------------------------------- */


#site_note
{
z-index:20;
position:absolute;
width:101px;
height:35px;
top:4px;
left:174px;
text-align:right;
}

.site_titre
{
z-index:50;
position:absolute;
width:210px;
height:20px;
left:14px;
top:43px;
font-size: 14px;
font-weight: bold;
text-align:left;
color: #FFFFFF;
}

#site_image
{
z-index:40;
position:absolute;
width:134px;
height:104px;
left:120px;
top:80px;
}

#site_haut
{
z-index:30;
width:288px;
height:163px;
background-image:url(../images/sps_site_haut.png);
background-repeat:no-repeat;
}

#site_texte
{
z-index:30;
width:208px;
padding-left:40px;
padding-right:40px;
padding-top:27px;
line-height: 14px;
font-size: 11px;
text-align: justify;
color: #000000;
background-image:url(../images/sps_site_texte.jpg);
background-repeat:y-repeat;
}

#site_separation
{
z-index:30;
width:288px;
height:20px;
background-image:url(../images/sps_site_avis_haut.gif);
background-repeat:no-repeat;
}

.site_avis
{
z-index:30;
width:183px;
height:100%;
padding-left:50px;
padding-right:55px;
padding-top:0px;
font-size: 11px;
color: #000000;
background-image:url(../images/sps_site_avis_texte.jpg);
background-repeat:y-repeat;
bottom:0px;
}

#site_bas
{
position:absolute;
z-index:30;
width:288px;
height:54px;
background-image:url(../images/sps_site_avis_bas.gif);
background-repeat:no-repeat;
bottom:0px;
}


/* ------------------------------------------------- TEXT ---------------------------------------------------- */


.rouge
{
color:#c10500;
font-weight:bold;
}

.lienspronofun a
{
color: #FFFFFF;
text-decoration: none;
}

.bold
{
font-weight:bold;
}

.site_titre a
{
text-decoration: none;
color: #FFFFFF;
}
.site_titre a:hover
{
text-decoration: underline;
color: #FFFFFF;
}

.site_avis a
{
color:#ba0300;
}

.avis_titre
{
font-weight:bold;
color:#BA0300;
}

#avis_titre_small
{
position:absolute;
z-index:50;
width:183px;
color:#BA0300;
font-size:10px;
text-align:center;
bottom:50px;
}
.avis_titre_small a
{
color:#BA0300;
font-size:10px;
}
et voici le code HTML, sachant que j'utilise le système de templates de smarty, donc mon code php et sur un autre fichier, il est appellé dans ce html par les balises {nomvariable}. Ex : {$site->url} qui correspond à une variable php.
(Précision pour ceux qui ne connaissent pas :
- Le {foreach} correspond au while en php, pour boucler sur mes résultats.
- {cycle name=lignes values="</td>,</td></tr><tr>"} permet, au sein de ma boucle while, d'alterner un coup l'affichage de </td> et un coup de </td></tr><tr>, c'est ce qui me permet de créer un nouvelle ligne tous les 2 résultats, vu que mon tableau est sur 2 colonnes)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>


<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title></title>
 
<link href="css/s.css" rel="stylesheet" type="text/css"> 

</head>
<body>
<div id="bodycontent">

    <div id="haut_page"></div>   
    <div id="haut_edito">BLABLALBLA</div>       
    <div class="lienspronofun"><a href="#"> foot</a> - <a href="#" >hockey</a> - <a href="#">rugby</a></div>     
    <div id="faux_content"></div>
    <div id="content">
    <div id="div_sites">
    
    <table name="tab_sites" id="tab_sites" width="98%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
        {foreach from=$sites item=site}
            <td align="left" width="49%" height="100%" valign="top">
                <div id="faux_site_content"></div>
                <div id="site_content">
                    <div id="site_note">
                        <img src="images/sps_note_01.png" border="0" width="101" height="35" alt="Note moyenne : 1 / 5" title="Note moyenne : 1 / 5" />
                    </div>
                    <div class="site_titre">
                        <a href="{$site->url}" target="_blank">{$site->nom|upper}</a>
                    </div>
                    <div id="site_image">
                        <a href="{$site->url}" target="_blank"><img src="images/pat_sites/sps_{$site->nom|lower}.png" border="0" width="134" height="104" id="image_{$site->nom}"></a>
                     </div>
                
                    <table width="288" height="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="288" height="163"><div id="site_haut"></div></td>
                        </tr>
                        <tr>
                            <td width="288"><div id="site_texte">{$site->description|sslash|htmlentities}<br /><br /><span class="bold">Avantages</span> : {$site->avantages|sslash|htmlentities}<br /><br /></div></td>
                        </tr>
                        <tr>
                            <td width="288" height="20"><div id="site_separation"></div></td>
                        </tr>   
                        <tr>
                            {assign var=idsite value=$site->id}
                            <td width="288" height="100%">
                            <div class="site_avis">
                            <span class="avis_titre">        Les derniers avis :<br /><br /></span>
                            {foreach from=$avis.$idsite item=avi}<span class="bold"> 
                            
                            <img src="images/sps_note_avis_05.png" border="0" width="45" height="14" align="absmiddle" alt="Note de {$avi->pseudo|sslash|htmlentities} : 5 / 5" title="Note de {$avi->pseudo|sslash|htmlentities} : 5 / 5" /> {$avi->titre|sslash|htmlentities|truncate:19:"...":true}{/if}

                            </span> <em><br />
                            > le {$avi->date|date_format:"%d/%m"} par {$avi->pseudo|sslash|htmlentities} - <a href="avis.php?idsite={$site->id}#avis{$avi->id}" target="blank">Lire</a></em><br /><br />
        
        {foreachelse} Aucun avis sur ce site pour le moment. Soyez le premier à le faire ! <a href="avis.php?idsite={$site->id}" target="blank">Cliquez ici</a><br /><br />
        
        {/foreach}
                            <div id="avis_titre_small"><a href="avis.php?idsite={$site->id}" target="blank">tous les avis</a> - <a href="avis.php?idsite={$site->id}" target="blank">donner votre avis</a></div>
                            </div> <!-- de site_avis -->
                            </td>
                        </tr>
                        <tr>
                            <td width="288" height="54" background="images/sps_site_avis_texte.jpg"><div id="site_bas" align="bottom"></div></td>
                        </tr>
                    </table>
                    <br /><br />
                </div> <!-- de site_content -->
            {cycle name=lignes values="</td>,</td></tr><tr>"} 
            {/foreach}
        </tr>
    </table>
    </div> <!-- de div_sites -->
    </div> <!-- de content -->
    <div id="bas_page">
        <div id="bas_page_content"></div>
    </div>
    <div id="pub_droite"></div>
    
</div> <!-- de bodycontent -->
</body>
</html>
je ne peux pas vous envoyer d'url parce que c'est un boulot pour mon taf, ou l'on bosse sur un serveur de prod à accès sécurisé. Mais je vous envoie néanmoins une copie écran du résultat, enfin au moins du cadre central, sous IE et sous firefox, pour que vous voyiez exactement de quoi il ressort Smiley cligne


Je vous précise aussi -mais est-ce vraiment necessaire...?- que c'est mon premier projet avec mise en page en calques et css, moi j'avais l'habitude des tableaux et css avant... Donc j'ai beaucoup galéré, j'ai fait bcp de tests, j'ai lu bcp de trucs, mais bon, par exemple, je sais que ma mise en page n'est pas "optimisée" dans le sens ou je me suis surement complquée la vie, et fais des détours inutiles parfois, pour arriver au résultat final...
bon, laisse tomber pour les images dans le mess, dès que j'en insère une, toutes les autres images du sujet deviennent celle là... donc je vais ls mettre en ligne et vous mettre une url
Sujet clos
Aller à