Css affichage texte et image dans une div [Résolu/Fermé]

Signaler
-
 marydee -
Bonjour, j'ai toujours le même problème dans tous les sites que je fais. J'ai du louper quelques choses dans mon cours de css.
Constatez par vous même en faisant Ctrl+, ou Ctrl- plusieurs fois sur ce site http://verte-cm.com/socaepe . Vous voyez qu'il n'y a aucune harmonie entre les images, les div et les textes. Quelqu'un peut il m'aider ? Merci.



5 réponses

Messages postés
99
Date d'inscription
mercredi 2 novembre 2011
Statut
Membre
Dernière intervention
26 juin 2012
11
Ouh là c'est le bordel dans ton code =D ! tu as plein de CSS de partout ! Difficile de t'aide quand c'est ordré comme cela ! Je te conseil de mieux trier ton code, comme sa tu arriverais mieux a trouver les erreurs après !

L'habit ne fait pas le moine, donc Dreamweaver ne fait pas de vous un webmaster !
@babane5, ce n'est pas dreamweaver mais plus tôt joomla. Mais, j'ai moi même fait le template. Donc j'ai à peu près tous codé à la main.
Messages postés
99
Date d'inscription
mercredi 2 novembre 2011
Statut
Membre
Dernière intervention
26 juin 2012
11
Ahh dans se cas là c'est difficile de dire le prk de ta faute, car faudrait juste avoir le code de ton template !

PS: Le truc pour dreamweaver c'est ma signature qui a ma fonctionné, donc sa te visait pas ;)
Je vais reformuler la question. Comment fait tu pour qu'une image s'adapte avec la résolution de l'écran. Surtous, qu'elle reste proportionnelle à sa div
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 326
Salut

meme nettoye c est quand meme charge ,pourquoi tout ces css et js externe ? !!
je suis sur que tu peux en supprimer pas mal :-))
mais bon , voila a quoi devrait ressembler ton code html nettoye !

il faut aussi changer dans la css ( je l ai fait dans le html )le
id="hd-articlemod
en
class="hd-articlemod
( donc dans la CSS #hd-articlemod en .hd-articlemod)

car une "id" par definition ne peu etre utilise qu une seule fois !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr" dir="ltr">
  <head>
    <base href="http://verte-cm.com/socaepe/" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="robots" content="index, follow" />
    <meta name="generator" content="Joomla! 1.7 - Open Source Content Management" />
    <title>
      Accueil
    </title>
    <link href="/socaepe/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title=
    "RSS 2.0" />
    <link href="/socaepe/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title=
    "Atom 1.0" />
    <link href="/socaepe/templates/socaepetemplate/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
    <link rel="stylesheet" href="/socaepe/plugins/system/modalizer/modals/colorbox/style1/colorbox.css" type=
    "text/css" />
    <link rel="stylesheet" href="/socaepe/modules/mod_lofarticlescroller/assets/style.css" type="text/css" />
    <link rel="stylesheet" href="/socaepe/templates/socaepetemplate/css/perso/template.css" type="text/css" />
    <link rel="stylesheet" href="/socaepe/plugins/content/thickbox/includes/smoothbox.css" type="text/css" media=
    "screen" />
    <link rel="stylesheet" href="/socaepe/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="/socaepe/templates/socaepetemplate/css/position.css" type="text/css" media=
    "screen,projection" />
    <link rel="stylesheet" href="/socaepe/templates/socaepetemplate/css/layout.css" type="text/css" media=
    "screen,projection" />
    <link rel="stylesheet" href="/socaepe/templates/socaepetemplate/css/print.css" type="text/css" media="print" />
    <link rel="stylesheet" href="/socaepe/templates/socaepetemplate/css/general.css" type="text/css" />
    <link rel="stylesheet" href="/socaepe/templates/socaepetemplate/css/general_mozilla.css" type="text/css" />
    <link rel="stylesheet" href="/socaepe/templates/socaepetemplate/css/nature.css" type="text/css" />
    <link rel="stylesheet" href="/socaepe/plugins/content/thickbox/includes/slimbox.css" type="text/css" media=
    "screen" /><!--[if lte IE 6]>
   <link href="/socaepe/templates/socaepetemplate/css/ieonly.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <!--[if IE 7]>
   <link href="/socaepe/templates/socaepetemplate/css/ie7only.css" rel="stylesheet" type="text/css" />
    <![endif]-->

    <style type="text/css">
/*<![CDATA[*/
    .lbLoading{
      background:#fff url(/socaepe/plugins/content/thickbox/images/loading.gif) no-repeat center;
    }

    #lbPrevLink:hover{
      background:transparent url(/socaepe/plugins/content/thickbox/images/prevlabel.gif) no-repeat 0% 15%;
    }

    #lbNextLink:hover{
      background:transparent url(/socaepe/plugins/content/thickbox/images/nextlabel.gif) no-repeat 100% 15%;
    }

    #lbCloseLink{
      display:block;
      float:right;
      width:66px;
      height:22px;
      background:transparent url(/socaepe/plugins/content/thickbox/images/closelabel.gif) no-repeat center;
      margin:5px 0;
    }

    #cboxLoadedContent{
      background-color:#fff;
    }

    p.c9{
      text-align:justify;
    }

    h3.c8{
      text-align:justify;
    }

    div.c7{
      height:348px;
      width:320px;
    }

    div.c6{
      height:348px;
      width:320px;
    }

    div.c5{
      width:99.9%;
    }

    p.c4{
      text-align:left;
    }

    img.c3{
      float:right;
    }

    h3.c2{
      text-align:left;
    }

    img.c1{
      float:left;
    }
    /*]]>*/
    </style>
    <script src="/socaepe/media/system/js/core.js" type="text/javascript">
</script>
    <script src="/socaepe/media/system/js/mootools-core.js" type="text/javascript">
</script>
    <script src="/socaepe/media/system/js/caption.js" type="text/javascript">
</script>
    <script src="/socaepe/plugins/system/modalizer/modals/jquery.min.js" type="text/javascript">
</script>
    <script src="/socaepe/plugins/system/modalizer/modals/colorbox/jquery.colorbox-min.js" type="text/javascript">
</script>
    <script src="/socaepe/media/system/js/mootools-more.js" type="text/javascript">
</script>
    <script src="/socaepe/templates/socaepetemplate/javascript/md_stylechanger.js" type="text/javascript" defer=
    "defer">
</script>
    <script src="/socaepe/modules/mod_lofarticlescroller/assets/script_12.js" type="text/javascript">
</script>
    <script type="text/javascript" src="/socaepe/plugins/content/thickbox/includes/smoothbox.js">
</script>
    <script type="text/javascript" src="/socaepe/plugins/content/thickbox/includes/slimbox.js">
</script>
    <script type="text/javascript" src="/socaepe/templates/socaepetemplate/javascript/hide.js">
</script>
    <script type="text/javascript">
//<![CDATA[
    var homepath="/socaepe";
    //]]>
    </script>
    <script type="text/javascript">
//<![CDATA[
    $j(document).ready(function(){
    $j('a.modalizer_link,a.modal,a.modalizer').colorbox({
    width:'80%',height:'80%',iframe:true}
    );
    $j('a.modalizer_link_image').colorbox({
    }
    );
    $j('a.modalizer_link_external').colorbox({
    width:'80%',height:'80%',iframe:true}
    );
    }
    );
    //]]>
    </script>
    <script type="text/javascript">
//<![CDATA[
    var big='72%';
    var small='53%';
    var altopen='TPL_BEEZ2_ALTOPEN';
    var altclose='TPL_BEEZ2_ALTCLOSE';
    var bildauf='/socaepe/templates/socaepetemplate/images/plus.png';
    var bildzu='/socaepe/templates/socaepetemplate/images/minus.png';
    var rightopen='TPL_BEEZ2_TEXTRIGHTOPEN';
    var rightclose='TPL_BEEZ2_TEXTRIGHTCLOSE';
    var fontSizeTitle='TPL_BEEZ2_FONTSIZE';
    var bigger='TPL_BEEZ2_BIGGER';
    var reset='TPL_BEEZ2_RESET';
    var smaller='TPL_BEEZ2_SMALLER';
    var biggerTitle='TPL_BEEZ2_INCREASE_SIZE';
    var resetTitle='TPL_BEEZ2_REVERT_STYLES_TO_DEFAULT';
    var smallerTitle='TPL_BEEZ2_DECREASE_SIZE';
    //]]>
    </script>
  </head>
  <body>
    <div id="tous">
      <div id="partie0">
        <div class="custom" id="mlogo">
          <p>
            <img src="/socaepe/images/logo.png" border="0" width="350" height="91" class="c1" alt="img" />
          </p>
        </div>
        <div id="mmenu">
          <ul class="menu menuperso">
            <li class="item-101 current active">
              <a href="/socaepe/">Accueil</a>
            </li>
            <li class="item-102">
              <a href="/socaepe/index.php/socaepe">Socaepe</a>
            </li>
            <li class="item-103">
              <a href="/socaepe/index.php/nous-contacter">Nous Contacter</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="clr"></div>
      <div id="barverte"></div>
      <div id="partie1"></div>
      <div id="partie2">
        <div class="hd-articlemod" id="partie2a">
          <h3 class="c2">
            <a href="/socaepe/index.php/component/content/article?id=2&amp;ml=1" class="modalizer_link">Carte de
            fidelité</a>
          </h3>
          <p class="c4">
            <img src="/socaepe/images/cartefidelite.jpg" border="0" class="c3" alt="img" />SOCAEPE Card est un
            programme de fidélité sympathique et convivial. Avec votre carte de fidélité épargnez des points et
            recevez des remises en moins de temps.
          </p>
          <p class="c4">
            <a href="/socaepe/index.php/component/content/article?id=2&amp;ml=1" class="modalizer_link">La suite...</a>
          </p>
        </div>
        <div class="hd-articlemod" id="partie2b">
          <h3 class="c2">
            <a href="/socaepe/index.php/component/zhgooglemap/?view=zhgooglemap&amp;id=1&amp;ml=1" class=
            "modalizer_link">Station service</a>
          </h3>
          <p class="c4">
            <a href="/socaepe/index.php/component/zhgooglemap/?view=zhgooglemap&amp;id=1&amp;ml=1" class=
            "modalizer_link"><img src="/socaepe/images/socaepe.jpg" border="0" width="144" height="109" class="c3" alt=
            "img" /></a>Les stations réparties dans tout le térritoire camerounais. Grâce à notre outil de
            localisation, retrouver la station la plus proche de chez vous.
          </p>
          <p class="c4">
            <a href="/socaepe/index.php/component/zhgooglemap/?view=zhgooglemap&amp;id=1&amp;ml=1" class=
            "modalizer_link">La suite...</a>
          </p>
        </div>
        <div class="hd-articlemod" id="partie2c">
          <h3 class="c2">
            <a href="/socaepe/index.php/component/content/article?id=5&amp;ml=1" class="modalizer_link">Produits et
            Services</a>
          </h3>
          <p class="c4">
            <img src="/socaepe/images/produits-services.jpg" border="0" width="116" height="109" class="c3" alt=
            "img" />SOCAEPE vous donne un aperçu de son éventail de service:
            <br />
            Des carburants et lubrifiants aux services de graissage en passant par la vidange, la mécanique et le
            lavage.
          </p>
          <p class="c4">
            <a href="/socaepe/index.php/component/content/article?id=5&amp;ml=1" class="modalizer_link">La suite...</a>
          </p>
        </div>
      </div>
      <div class="clr"></div>
      <div id="partie3">
        <div id="system-message-container"></div>
        <div class="blog-featured"></div>
        <div id="partie31">
          <div class="hd-articlemod" id="partie3a1">
            <p>
              Actualités...
            </p>
          </div>
          <div class="hd-articlemod" id="partie3b1">
            <p>
              <a href="/socaepe/index.php/component/content/article?id=20&amp;ml=1" class="modalizer_link">Focus...</a>
            </p>
          </div>
          <div class="hd-articlemod" id="partie3c1">
            <p>
              <a href="/socaepe/index.php/component/content/article?id=22&amp;ml=1" class="modalizer_link">Nos
              Promotions...</a>
            </p>
          </div>
        </div>
        <div class="clr"></div>
        <div id="partie32">
          <div id="partie3a">
            <div id="lofarticlessroller25" class="lof-articlessroller c7">
              <div class="lof-bottom lof-vertical lof-container">
                <!-- NAVIGATOR -->
                <div class="lof-navigator-outer">
                  <ul class="lof-navigator lof-bullets">
                    <li>
                      <span>1</span>
                    </li>
                    <li>
                      <span>2</span>
                    </li>
                    <li>
                      <span>3</span>
                    </li>
                  </ul>
                </div><!-- MAIN CONTENT of ARTICLESCROLLER MODULE -->
                <div class="lof-main-wapper c6">
                  <div class="lof-main-item page-1">
                    <div class="lof-row lof-inner c5">
                      <a class="lof-title" target="_parent" title="31 oct. 011" href=
                      "/socaepe/index.php/7-actualite/8-31-oct-011">31 oct. 011</a> Forum sur les produits pétroliers
                      au Cameroun:Les enjeux sur pour les acteurs du secteur de la grande distribution des...
                    </div>
                    <div class="lof-clearfix"></div>
                    <div class="lof-row lof-inner c5">
                      <a class="lof-title" target="_parent" title="29 oct. 011" href=
                      "/socaepe/index.php/7-actualite/9-29-oct-011">29 oct. 011</a> Sécurisation des sites:L'impact
                      de la non prise en charge des condition de sécurité dans les différents
                      d'approvisionnement...
                    </div>
                    <div class="lof-clearfix"></div>
                    <div class="lof-row lof-inner c5">
                      <a class="lof-title" target="_parent" title="25 oct. 011 (6)" href=
                      "/socaepe/index.php/7-actualite/15-25-oct-16">25 oct. 011 (6)</a> La régularisation des prix:Le
                      secteur des hydrocarbures réamenager avec une nouvelle grille de prix pour chacune des gammes...
                    </div>
                  </div>
                  <div class="lof-main-item page-2">
                    <div class="lof-row lof-inner c5">
                      <a class="lof-title" target="_parent" title="25 oct. 011 (4)" href=
                      "/socaepe/index.php/7-actualite/13-25-oct-14">25 oct. 011 (4)</a> La régularisation des prix:Le
                      secteur des hydrocarbures réamenager avec une nouvelle grille de prix pour chacune des gammes...
                    </div>
                    <div class="lof-clearfix"></div>
                    <div class="lof-row lof-inner c5">
                      <a class="lof-title" target="_parent" title="25 oct. 011 (5)" href=
                      "/socaepe/index.php/7-actualite/14-25-oct-15">25 oct. 011 (5)</a> La régularisation des prix:Le
                      secteur des hydrocarbures réamenager avec une nouvelle grille de prix pour chacune des gammes...
                    </div>
                    <div class="lof-clearfix"></div>
                    <div class="lof-row lof-inner c5">
                      <a class="lof-title" target="_parent" title="25 oct. 011 (2)" href=
                      "/socaepe/index.php/7-actualite/11-25-oct-12">25 oct. 011 (2)</a> La régularisation des prix:Le
                      secteur des hydrocarbures réamenager avec une nouvelle grille de prix pour chacune des gammes...
                    </div>
                  </div>
                  <div class="lof-main-item page-3">
                    <div class="lof-row lof-inner c5">
                      <a class="lof-title" target="_parent" title="25 oct. 011 (3)" href=
                      "/socaepe/index.php/7-actualite/12-25-oct-13">25 oct. 011 (3)</a> La régularisation des prix:Le
                      secteur des hydrocarbures réamenager avec une nouvelle grille de prix pour chacune des gammes...
                    </div>
                    <div class="lof-clearfix"></div>
                    <div class="lof-row lof-inner c5">
                      <a class="lof-title" target="_parent" title="25 oct. 011 " href=
                      "/socaepe/index.php/7-actualite/10-25-oct-011">25 oct. 011</a> La régularisation des prix:Le
                      secteur des hydrocarbures réamenager avec une nouvelle grille de prix pour chacune des gammes...
                    </div>
                  </div>
                </div>
              </div><!-- END MAIN CONTENT of ARTICLESCROLLER MODULE -->
            </div><script type="text/javascript">
//<![CDATA[
                  var _lofmain=$('lofarticlessroller25');
                  var object=new LofSlideshow(_lofmain,
                  {
                  fxObject:{
                  transition:Fx.Transitions.Sine.easeInOut,
                  duration:500}
                  ,
                  startItem:0,
                  interval:2000,
                  direction:'vrup',
                  navItemHeight:32,
                  navItemWidth:32,
                  navItemsDisplay:3,
                  navPos:'bottom'
                  }
                  );
                  object.start(1,null);
            //]]>
            </script>
          </div>
          <div class="hd-articlemod" id="partie3b">
            <h3 class="c8">
              <a href="/socaepe/index.php/component/content/article?id=20&amp;ml=1" class="modalizer_link">Regard sur
              le marché</a>
            </h3>
            <p class="c9">
              international (Texte à titre indicatif)...
              <br />
              Les cours du marché mondial ont connus un bond fulgurant ces derniers, mettant ainsi l'or noir parmi
              les produits les plus en vue sur la place mondiale déclanchant ainsi un surballance au niveau des places
              boursières que ce soit aux Etats Unis, en Asie (Chine, Japon, etc.), en Europe avec toute la panoplie
              des bourses occidentales.
              <br />
              <br />
              Les explorations pétrolières ont aussi connues une avancée considérable, de nos jours, il ezst
              possible par des technologies nouvelles de pouvoir trouver de nouveaux sites d'exploration même
            </p>
            <p class="c9">
              <a href="/socaepe/index.php/component/content/article?id=20&amp;ml=1" class="modalizer_link">La
              suite...</a>
            </p>
          </div>
          <div class="hd-articlemod" id="partie3c">
            <p>
              <a href="/socaepe/index.php/component/content/article?id=22&amp;ml=1" class="modalizer_link"><img src=
              "/socaepe/images/promo.jpg" border="0" alt="" width="312" height="344" /></a>
            </p>
          </div>
        </div>
      </div>
      <div class="clr"></div>
      <div id="partie4">
        <div class="custom" id="partie4a">
          <p class="c4">
            En bref:
            <br />
            Accueil, Socaepe, Stations service,
            <br />
            Nos produits &amp; services, Actualités,
            <br />
            Focusm Nos Promotions,
            <br />
            Nous contacter,
            <br />
            Ressources Humaines,
            <br />
            Publications,
            <br />
            Dossiers.
          </p>
        </div>
        <div class="custom" id="partie4b">
          <p class="c4">
            Les engagements SOCAEPE:
            <br />
            Répondre aux besoins énergétiques
            <br />
            Respecter l'envirennement
            <br />
            Santé et sécurité des personnes
            <br />
            Accompagner les initiatives
            <br />
            au niveau social et éducatif
            <br />
            <br />
            Nos énergies:
            <br />
            Pétrole, gaz naturel,
            <br />
            énergies complémentaires
          </p>
        </div>
        <div id="partie4c">
          <div id="partie4c1">
            <div class="custom" id="partie4c1twiter">
              <p>
                <a href="https://twitter.com/bonjour0500"><img src="/socaepe/images/twiter.jpg" border="0" alt="" /></a>
              </p>
            </div>
            <div class="custom" id="partie4c1face">
              <p>
                <a href="http://www.facebook.com/AR.Internegoce" target="_blank"><img src="/socaepe/images/face.jpg"
                border="0" alt="" /></a>
              </p>
            </div>
            <div class="clr"></div>
          </div>
          <div class="custom" id="partie4c2">
            <p>
              SOCAEPE 2011, Mentions Légales, Fils RSS, Alerte e-mail, Contact, Plan du site
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>


ensuite il faudrait voir aussi tout le CSS pour optimiser , mais vue le nombre .... bon courage ! :-)

cela dit , revise un peu le CSS et HTML, ta quand meme due louper quelque chapitres dans ton apprentissage !! ;-))

a+
Merci beaucoup pour le soutien. J'ai pu résoudre le problème.
Il fallait utiliser les pixels au lieu du % et mettre les margins en auto.

width:1054px;
margin: auto;
et pour les images background: url(../../images/perso/bg2.png) repeat-x scroll center top;

Je ferais la mise à jour en ligne tout à l'heure.