Sujet Précédent Sujet Suivant

Css affichage texte et image dans une div

Résolu/Fermé
marydee - 9 nov. 2011 à 09:14
 marydee - 9 nov. 2011 à 10:17
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.



A voir également:

5 réponses

Réponse 1 / 5
babane5 Messages postés 99 Date d'inscription mercredi 2 novembre 2011 Statut Membre Dernière intervention 26 juin 2012 11
9 nov. 2011 à 09:21
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 !
0
Réponse 2 / 5
marydee
9 nov. 2011 à 09:30
@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.
0
Réponse 3 / 5
babane5 Messages postés 99 Date d'inscription mercredi 2 novembre 2011 Statut Membre Dernière intervention 26 juin 2012 11
9 nov. 2011 à 09:32
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 ;)
0
marydee
9 nov. 2011 à 09:41
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
0
Réponse 4 / 5
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
9 nov. 2011 à 10:09
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+
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
marydee
9 nov. 2011 à 10:17
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.
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
retrouver un texte caché dans une image jpg
iamborg8of9 -
Haldas -

13 réponses
Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Modifier le texte d'une image
maximedu57 -
Sonia -

10 réponses
Comment enlever le rouge sur la photo svp ?
lucas0909 -
Benji -

20 réponses