Image/texte aligné horizontalement

didouchy
Les bases HTML/CSS

Bonjour,

J'ai modifier un MODs provenant du CMS nuked klan, et j'ai un souci avec. Je souhaiterai aligné les images suivit du texte horizontalement.
J'ai réussi à tout positionné a peut prêt correctement mais même avec un float left sa décale tout. Je pense que le code php y es pour quelque chose aussi.

function color_txt($txt) {
        switch ($txt) {
            case '0':
            return '<b style="color: rgb(255, 0, 0);">'. _CLOSE .'</b>';
            break;
            case '1':
            return '<b style="color: rgb(7, 185, 7);">'. _OPEN .'</b>';
            break;
        }
}
echo '<div class="ctn-recrute">';
$sql = mysql_query("SELECT classes, icone, role_1, role_2, role_3 FROM ". SWTOR_RECRUTERMENT_TABLE ." WHERE block = '1' AND status = '1' ORDER BY classes DESC");
while ($RR = mysql_fetch_array($sql, MYSQL_ASSOC)) {
        $r_1 = explode('|', $RR'role_1']);
        $aff_role_1 = stripslashes($r_1[0]) .': '. color_txt(stripslashes($r_1[1])) .'';
        $r_2 = explode('|', $RR'role_2']);
        $aff_role_2 = stripslashes($r_2[0]) .': '. color_txt(stripslashes($r_2[1])) .'';
        $r_3 = explode('|', $RR'role_3']);
        $aff_role_3 = stripslashes($r_3[0]) .': '. color_txt(stripslashes($r_3[1])) .'';
        echo "<img src=\"modules/Ctn_recrutement/img/icone/". $RR'icone'] ."\" alt=\"\" />". $aff_role_1 . $aff_role_2 . $aff_role_3;
}
echo "</div>";

role_1, role_2 et role_3 font référence à éclaireur, commando et spécialiste. aff_role_1,2 et 3 affiche le rôle a savoir s'il es sur recrutement ouvert ou fermé. Le souci est que la fonctione color_txt($txt) donne la couleur vert/rouge afin que les visiteur/membre voient que les recrutement son ouvert/fermer.

Le rendu que sa donne:

Merci pour votre aide.

4 réponses

s4p
Réponse acceptée

Adapté à ton code :

<?php
    function color_txt($txt){
        $class = ($txt == '1') ? 'open' : 'close';
        $text = ($txt == '1') ? _OPEN : _CLOSE;
        return '<b class="' . $class . '">' . $text . '</b>';
    }
    $html = '<div class="ctn-recrute">';
    $sql = mysql_query("SELECT classes, icone, role_1, role_2, role_3 FROM ". SWTOR_RECRUTERMENT_TABLE ." WHERE block = '1' AND status = '1' ORDER BY classes DESC");
    while ($RR = mysql_fetch_array($sql, MYSQL_ASSOC)) {
        $r_1 = explode('|', $RR'role_1']);
        $aff_role_1 = stripslashes($r_1[0]) .': '. color_txt(stripslashes($r_1[1])) .'';
        $r_2 = explode('|', $RR'role_2']);
        $aff_role_2 = stripslashes($r_2[0]) .': '. color_txt(stripslashes($r_2[1])) .'';
        $r_3 = explode('|', $RR'role_3']);
        $aff_role_3 = stripslashes($r_3[0]) .': '. color_txt(stripslashes($r_3[1])) .'';
        $html .= '<div class="item">'; 
        $html .= '<img src="modules/Ctn_recrutement/img/icone/' . $RR'icone'] . '" alt="" />'; 
        $html .= '<div class="content">';
        $html .= '<div>' . $aff_role_1 . '</div>';
        $html .= '<div>' . $aff_role_2 . '</div>';
        $html .= '<div>' . $aff_role_3 . '</div>';
        $html .= '</div>'; 
        $html .= '</div>';
    }
    $html .= "</div>";
    echo $html;
?>
<style type="text/css">
    .item { min-height: 200px; float: left; margin-right: 20px; }
    .item>img { width: 200px; height: 200px; float: left; }
    .item>.content { margin-left: 220px; }
    .item>.content>div { height: 60px; line-height: 60px }
    .item>.content .open { color: #07B907; }
    .item>.content .close { color: #FF0000; }
</style>
coloo

Bonjour, on peut avoir la version html que génère le code php ? ou un lien de ton site d essai ça ira plus vite avec firebug :)

s4p 
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .item { min-height: 200px; float: left; margin-right: 20px; }
            img { width: 200px; height: 200px; float: left; }
            .content { margin-left: 220px; }
            .content>div { height: 60px; line-height: 60px }
            .opened { color: green; }
            .closed { color: red; }
        </style>
    </head>
    <body>
        <div class="recrutement">
            <div class="item">
                <img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_256.png" alt="">
                <div class="content">
                    <div>
                        Eclaireur: 
                        <span class="opened">Ouvert</span>
                    </div>
                    <div>
                        Commando: 
                        <span class="opened">Ouvert</span>
                    </div>
                    <div>
                        Spécialiste: 
                        <span class="closed">Fermé</span>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_256.png" alt="">
                <div class="content">
                    <div>
                        Eclaireur: 
                        <span class="opened">Ouvert</span>
                    </div>
                    <div>
                        Commando: 
                        <span class="opened">Ouvert</span>
                    </div>
                    <div>
                        Spécialiste: 
                        <span class="closed">Fermé</span>
                    </div>
                </div>
            </div>

            <div class="item">
                <img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_256.png" alt="">
                <div class="content">
                    <div>
                        Eclaireur: 
                        <span class="opened">Ouvert</span>
                    </div>
                    <div>
                        Commando: 
                        <span class="opened">Ouvert</span>
                    </div>
                    <div>
                        Spécialiste: 
                        <span class="closed">Fermé</span>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_256.png" alt="">
                <div class="content">
                    <div>
                        Eclaireur: 
                        <span class="opened">Ouvert</span>
                    </div>
                    <div>
                        Commando: 
                        <span class="opened">Ouvert</span>
                    </div>
                    <div>
                        Spécialiste: 
                        <span class="closed">Fermé</span>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
didouchy
Auteur

Merci beaucoup s4p. Il me semblé bien que le code php y été pour quelque chose là dedans ^^. J'ai pu remettre le morceau de css dans mon fichier css en y attribuant d'autre nom parce que item est déjà utilisé, j'ai remit les bonne côte et disposé comme je le souhaité. Après avoir vue tes modification, je comprendrai pour la prochaine fois, encore merci de ton aide :).