IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

J'ai un cadre avec une image à l'intérieur qui n'épouse pas les bords


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Juin 2007
    Messages
    116
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juin 2007
    Messages : 116
    Par défaut J'ai un cadre avec une image à l'intérieur qui n'épouse pas les bords
    Bonjour,

    J'ai besoin d'aide pour mon site e-commerce.

    Sur ma page d'accueil, j'ai la photo de mes produits qui est dans un cadre.
    Je n'arrive pas à faire agrandir l'image pour qu'elle épouse parfaitement les bords du cadre. Voir copie d'écran en pièce jointe.

    Je pense avoir trouvé la partie des codes à modifier dans les 2 fichiers .css suivants:

    Fichier widgets.css:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    /* Widget: Catalog New Proructs List */
    .widget-new-products { display:block; }
    .col-main .widget-new-products { margin:7px 0; }
    .widget-new-products .products-grid .product-image,
    .widget-new-products .products-list .product-image { width:85px; height:85px; }
    .widget-new-products .products-list .product-shop { margin-left:100px; }

    Fichier styles.css:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /* View Type: Grid */
    .products-grid { position:relative; }
    .products-grid.last { border-bottom:0; }
    .products-grid li.item { float:left; width:171px; padding:0 0 90px; }
    .products-grid .product-image { display:block; width:170px; height:170px; border:1px solid #ddd; border-width:1px 1px 1px 0; margin:0 0 10px; }
    .products-grid.first .product-image { border-top:0; }
    .products-grid li.last .product-image { border-right:0; }
    .products-grid .product-name { font-size:12px; margin:0 0 6px; }
    .products-grid .product-name a { color:#444; text-decoration:underline; }
    .products-grid .product-name a:hover { text-decoration:none; }
    .products-grid .price-box { margin:5px 0; }
    .products-grid .availability { line-height:21px; }
    .products-grid .actions { position:absolute; bottom:25px; }
    .col2-left-layout .products-grid,
    .col2-right-layout .products-grid { width:684px; margin:0 auto; }
    .col1-layout .products-grid,
    .page-empty .products-grid { width:684px; margin:0 auto; }

    Mais par contre je n'ai aucune idée de ce que je dois modifier !!!
    Merci d'avance pour votre aide.
    Images attachées Images attachées  

  2. #2
    Expert confirmé
    Avatar de vodiem
    Homme Profil pro
    Vivre
    Inscrit en
    Avril 2006
    Messages
    2 895
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Vivre
    Secteur : Conseil

    Informations forums :
    Inscription : Avril 2006
    Messages : 2 895
    Par défaut
    salut et bienvenu guillaume7684,

    il faudrait l'html pour savoir qu'elles sont les style utilisés.
    pourrais tu donner sinon un lien ce serait plus simple.
    sans cela c'est difficile de deviner ce qui cloche.
    essaie à tout hasard de sortir '.product-image' de l'ensemble des class en le mettant dans une nouvelle ligne:
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    .product-image { width:100%; height:100%; }

  3. #3
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Juin 2007
    Messages
    116
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juin 2007
    Messages : 116
    Par défaut
    Salut vodiem,

    Merci de vouloir m'aider.
    Ce serait vraiment cool si on pouvait trouver une solution à mon problème, car même sur le forum de mon site e-commerce, on a pas encore trouvé.

    Pour plus d'infos concernant ce problème, tout est ici: http://www.fragento.org/Questions-d-...-le-cadre.html

    Par contre si tu veux un lien URL de mon site, je ne peux te le donner qu'en MP car mon site est encore en dév.

    Merci par avance.

    Guillaume.

  4. #4
    Membre éclairé
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2008
    Messages : 557
    Par défaut
    si tes images sont toutes proportionnées de la même façon, je dirais pareil, mais en mettant en plus un "float:left"

  5. #5
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Juin 2007
    Messages
    116
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juin 2007
    Messages : 116
    Par défaut
    Citation Envoyé par Marc22 Voir le message
    si tes images sont toutes proportionnées de la même façon, je dirais pareil, mais en mettant en plus un "float:left"
    Oui elles ont toutes la même taille.

Discussions similaires

  1. cadre d'une image avec un lien
    Par kelyly dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 31/05/2010, 17h45
  2. (Gimp) créer un cadre avec une couleur de l'image.
    Par byloute dans le forum Imagerie
    Réponses: 0
    Dernier message: 05/04/2010, 18h34
  3. [CSS] Problème avec cadre sur une image lien
    Par Strix dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 24/12/2006, 10h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo