Forum : Problème en CSS

Bonjour à tous,

Je fais à nouveau appel à vous car j'ai un soucis au niveau CSS. En effet je voudrais faire une galerie d'image; Mes éléments s'affichaient bien, c'est à dire comme sur , mais après avoir touché une autre partie du code qui n'aurait pas du affecté les thumbs, les images se sont misent les unes en dessous des autres au lieu de 2 côtes à côtes.

Voici le code HTML pour deux thumbs et le CSS qu'elles utilisent:

.thumb{
    margin-right: 30px;
    padding-bottom: 20px;
    float: left; }
    .thumbimage{
      width: 380px;
      height: 149px;
      background-color: #E2E0DC; }
      .thumbimage a{
        width: 380px;
        height: 149px;
        display: block; }
    .thumbtitle, .thumbtitle a{
      color: black;
      font-size: 16px;
      text-decoration: none; }
    .thumbsubtitle, .thumbsubtitle a{
      color: rgb(128, 128, 128);
      font-size: 13px;
      text-decoration: none; 
      text-transform: lowercase; }
    .thumbtitle, .thumbtitle a:hover{ color: rgb(245, 70, 150); }

<div class="wrap">
    <div class="folio">
      <h1 class="pagename"><span class="pagename">Le Portfolio</span></h1>
      <div id="thumbx" class="thumb">
        <div class="thumbimage">
          <a href="#" title="Titre de l'image"><img src="css/img/almomail.jpg" ></a>
        </div>
          <div class="thumbtitle">
            <a href="#"> Almomail Pêche Project</a>
          </div>
          <div class="thumbsubtitle">
            <a href="#"> Description rapide de la création exposée.</a>
          </div>
      </div>
      <div id="thumbx" class="thumb">
        <div class="thumbimage">
          <a href="#" title="Titre de l'image"><img src="css/img/almomail.jpg" ></a>
        </div>
          <div class="thumbtitle">
            <a href="#"> Almomail Pêche Project</a>
          </div>
          <div class="thumbsubtitle">
            <a href="#"> Description rapide de la création exposée.</a>
          </div>
      </div>
    </div>
</div>

Ce qui est bon de préciser c'est que dans l'inspection des éléments sur Chrome, je clique sur la <div class="thumb">images</div> et là je vois qu'il n'y a pas de style pris en compte, ce qui m'arrive assez souvent.
Je travail en LOCAL sur WAMP, j'intègre la maquette en HTML/CSS avant le traitement en PHP.

Merci pour votre aide, si il vous manque quoique ce soit n'hésitez pas à me le dire,

Cordialement, Kévin.

12 réponses

maoubi

Réponse acceptée

Voici ton code actuel:
html:

<div class="thumb" style="float: left; margin-right: 20px">

css:

color: #4698f5; } a.more:hover{ text-decoration: underline;};

/* ---------------------------------------------------- */
/* PORTFOLIO CONTENT
/* ---------------------------------------------------- */
    .thumb{ 
      margin-right: 10px;
      padding-bottom: 20px;
      float: left !important;}

Voici la version corrigé.
html:

<div class="thumb">

css:(intégration de tes styles mise dans le html)

color: #4698f5; } a.more:hover{ text-decoration: underline;}

/* ---------------------------------------------------- */
/* PORTFOLIO CONTENT
/* ---------------------------------------------------- */
    .contentfolio .thumb {
        float: left;
        margin-right: 20px;
      padding-bottom: 20px;}

Ce qui causait réellement le problème: c'est le «;» de trop a la fin de a.more:hover{ text-decoration: underline;} ; <-- celui-ci

ycostes

Bonsoir,
il faudrait plus d'infos concernant tes classes .wrap et .folio

agrafik

Auteur

BOnjour ycostes,

Voici les informations supplémentaires et manquantes , j'y avais pas pensé du tout .

.wrap {margin: 25px auto 25px 84px;
      width: 960px;
      position: relative;
      margin: 0 auto; }
  .folio{
    width: 820px;
    margin: 25px auto 25px 84px;
    overflow: hidden; }

Merci pour l'aide que tu m'apportera;

Kévin.

ycostes

Bonsoir Xeron,
Bizarrement, je n'ai pas ton problème.
=> http://ycostes.net/test/toto.html (copier/coller de ton code)

Tu aurais un exemple en ligne ?

Yvan.

agrafik

Auteur

Bonsoir ycostes;

Non aucun exemple en ligne mon nom de domaine a eu du mal pendant la création je dois d'ailleurs téléphoner demain.
Je vais te faire un screen de ce que ça me donne :

Comme tu le vois l'inspecteur CHROME ne détecte pas le style, du coup le WRAP prend le dessus, et moi j'aimerais le centrer par rapport à la ligne colorée, ce qui serait le cas si mon .FOLIO serait pris en compte.

Les images sont à nouveau côtes à côtes et pour pas le cacher je ne sais pas pourquoi . Enfin je suis sur que si je remet le FOLIO centré par je ne sais quel moyen, les image resterons les unes en dessous des autres.

Voilà , j'espère trouver une solution, en CSS les problèmes sont toujours petits mais pas évident à régler ^^ .

Merci pour ton aide,
Kévin .

P.S.: Ton site web est cool ;).

ycostes

Salut Kévin,
malheureusement je ne vois pas de screenshot, mais voir ton pb en ligne serait plus confortable.

ps: merci pour mon site, il se fait vieux maintenant.

agrafik

Auteur

BOnsoir Yxoste,

Arrie-tu à me joindre sur ce lien : Local

ycostes

non :)

si tu veux, on se retrouve sur irc (Serveur: irc.freenode.net // Channel : #Grafikart )ce soir à partir de 21h, je t'ouvrirais un ftp sur mon hébergeur, et on essaiera de régler ton problème.

agrafik

Auteur

Bonjour à tous,

J'aimerais vous signaler que mon soucis de centralisation fonctionne bien. J'ai en effet comme ycoste l'a dit, mis enplace une DIV qui englobe tout le site, et ça fonctionne.

Par contre j'ai toujours un soucis: Parfois, quand j'inspecte avec CHROME mes éléments je n'ai pas de STYLE qui s'affiche pour ces éléments , hors dans mon CSS il y a le style. Par exemple, c'est le cas que dans mon portfolio, je code " .thumb{ mon style; }" et je met une DIV .thumb. Mon style n'est pas pris en compte pour cet élément, hors si je le met directement dans la div de ce type:

<div class="thumb" style=" mon:style;" ></div>

Et là miracle ça fonctionne. Mais si j'ai un style.css c'est pas pour mettre mon style dans le code HTML vous comprenez...
7Voilà, j'espère avoir été assez clair car le soucis n'est pas évident à exposer.

Merci pour votre aide,

Cordialement, Kévin.

maoubi

Je pense que tes style dans .thumb manque de poids.
Il doit y avoir un style qui écrase les styles de .thumb {poids: 0010} dans ton css du genre .folio .thumb {poids: 0020}

pour comprendre le poids des selecteurs, regarde ceci: http://openweb.eu.org/articles/cascade_css (voir: Etape 3 : le tri par priorité calculée des sélecteurs)

Est-ce que cela fonctionne si tu mets !important apres ton style qui «bug»?

agrafik

Auteur

Bonjour Maoubi,

Merci pour cette réponse, en effet plusieurs éléments de même noms auraient pu affecter cette nouvelle classe mais non il n'y a pas de classe ".thumb" qui traîne, il n'y en a qu'une paramétré. Pour ce qui est du paramètre !important, c'est un echec...

Pour avoir une idée j'ai pu enfin mettre en ligne la page pour se rendre compte de l'erreur: http://ingraphis.fr/portfolio.php .

Vous pouvez vous même inspecter les éléments, ma classe .thumb est présente dans le CSS mais n'agis et n'est déctécté...

Merci pour votre aide. Ce problème commence à me prendre les neurones ^^ .

agrafik

Auteur

Bonsoir Maoubi,

Merci pour ton aide, j'en reviens pas de ne pas avoir vu cette erreur si flagrante :O .
Maintenant tout va pour le mieux, ma classe est enfin détecté et tout se positionne très bien

Merci encore, ça me fait un soucis en moins :).