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

  1. #1
    Futur Membre du Club
    Femme Profil pro
    Webdesigner
    Inscrit en
    décembre 2018
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Services à domicile

    Informations forums :
    Inscription : décembre 2018
    Messages : 12
    Points : 7
    Points
    7

    Par défaut Chevauchement et largeur bordure vignettes

    Bonjour

    J'ai un petit souçi a résoudre sur des vignettes.
    Je dois tourner autour du pot depuis deux jours.
    J'ai quatre vignettes dans un bloc donc deux au dessus et deux en dessous et j'ai des bordures en sachant que je voudrais avoir la même épaisseur de bordure pour chaque vignettes.
    donc voici mon code html :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="form-style-8">
    <div id="first"></div>
    <div id="second">
    <div class="vignette float-left"></div>
    <div class="vignette float-left"></div>
    <div class="vignette float-left"></div>
    <div class="vignette float-left"></div></div>
    </div>
    et voici mon code 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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    /*debut bloc 2*/
    .form-style-8{
    	width: 820px;
    	height: 410px;
    	padding: 2px auto;
    	margin: 0px auto;
    }
    #first
    {
        background-image: url('img/saut.jpg');
        height: 400px;
        float:left;
        margin-top:5px;
        border:1px solid #000;
        width:48%;
    }
    #second
    {
        height: 408px;
        float:right;
        margin-top:5px;
        width:48%;
    	border:none;
    }
    .clear {
    	clear: both;
    }
    /*************vignettes*****
    ***************************/
    .vignette {
    	margin:0 auto;
    	height:197px;
    	width:192px;
    	border:2px solid #000;
    }
    .float-left {
    	float:left;
    }
    /**********fin vignettes***********
    /*fin bloc 2*/

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 534
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 534
    Points : 33 068
    Points
    33 068

    Par défaut

    Bonjour,
    tu peux avantageusement utiliser la pseudo-classe:nth-child(an+b) pour cibler tes éléments, cela donnerait
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .vignette:nth-child(even) {
      border-left-width: 1px;
    }
    .vignette:nth-child(n+3) {
      border-top-width: 1px;
    }
    .vignette:nth-child(odd) {
      border-right-width: 1px;
    }
    .vignette:nth-child(-n+2) {
      border-bottom-width: 1px;
    }
    en faisant de la sorte, redistribution de la largeur de bordure, cela te garantie que tes éléments auront même hauteur et même largeur.

    La pseudo-classe :nth-child(an+b)

    Nota: tu pourrais également simplifier ton CSS mais bon ...

  3. #3
    Futur Membre du Club
    Femme Profil pro
    Webdesigner
    Inscrit en
    décembre 2018
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Services à domicile

    Informations forums :
    Inscription : décembre 2018
    Messages : 12
    Points : 7
    Points
    7

    Par défaut Bonjour

    Merci, je vais essayer ce sélecteur.

  4. #4
    Futur Membre du Club
    Femme Profil pro
    Webdesigner
    Inscrit en
    décembre 2018
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Services à domicile

    Informations forums :
    Inscription : décembre 2018
    Messages : 12
    Points : 7
    Points
    7

    Par défaut chevauchement bordure droite

    Bonjour,
    j'ai un sélecteur qui ne fonctionne pas.
    c'est le "nth-child(odd) et je ne comprend pas trop pourquoi?
    j'ai juste fait une petite modif au code sinon j'avais un gros décalage dans mes vignettes.
    Voila ce que j'ai fait en CSS, reste à comprendre pourquoi mon nth-child(odd) ne fonctionne pas :

    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
    18
    19
    20
    21
    22
    23
    24
    .vignette {
    	margin:0 auto;
    	height:196px;
    	width:191px;
    	border:2px solid #295A45;
    }
    .vignette:nth-child(even) {
      border-left-width: 1px solid #295A45;
    }
    .vignette:nth-child(odd) {
      border-right-width: 1px solid #295A45;
    }
    .vignette:nth-child(n+3) {
      border-top-width: 1px;
    }
    .vignette:nth-child(n+1) {
      border-bottom-width: 1px;
    }
    .float-left {
    	float:left;
    }
    .clear {
    	clear: both;
    }

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 534
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 534
    Points : 33 068
    Points
    33 068

    Par défaut

    Attention à la déclaration de tes propriétés
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .vignette:nth-child(even) {
      border-left-width: 1px solid #295A45;
    }
    c'est la width que tu définies et non la bordure compléte, donc
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .vignette:nth-child(even) {
      border-left: 1px solid #295A45;
    }
    ou encore
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .vignette:nth-child(even) {
      border-left-width: 1px;
      border-left-style: solid;
      border-left-color: #295A45;
    }

  6. #6
    DMC
    DMC est déconnecté
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2002
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : avril 2002
    Messages : 21
    Points : 32
    Points
    32

    Par défaut

    Bonjour kira1981,

    J'arrive peut être un peu tardivement pour te proposer deux autres solutions différentes (par forcement meilleurs juste différentes) :
    - bordures avec décalage de marges
    - bordures fait avec les espaces entres les vignettes

    https://codepen.io/Zonecss/pen/VOaBdp

  7. #7
    Futur Membre du Club
    Femme Profil pro
    Webdesigner
    Inscrit en
    décembre 2018
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Services à domicile

    Informations forums :
    Inscription : décembre 2018
    Messages : 12
    Points : 7
    Points
    7

    Par défaut Probleme résolu

    J'ai finallement adapté la formule de no-smoking.
    Ca marche.
    Encore Merci.
    Maintenant, j'ai un autre souci car je dois centrer des images dans la vignette.
    j'ai essayer la position absolu et relative mais quelque chose ne fonctionne pas.

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 534
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 534
    Points : 33 068
    Points
    33 068

    Par défaut

    Maintenant, j'ai un autre souci car je dois centrer des images dans la vignette.
    Cela aurait mérité l'ouverture d'un nouvelle discussion !
    Une discussion = une question

    Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

    Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous. Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

    j'ai essayer la position absolu et relative mais quelque chose ne fonctionne pas.
    Il existe plusieurs méthodes pour y arriver, montre au moins le code que tu as essayé.

  9. #9
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 516
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 516
    Points : 29 390
    Points
    29 390

    Par défaut

    Bonjour,

    une solution, avec flexbox : https://codepen.io/jreaux62/pen/KLWpwb
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. Probleme de longueur en CSS
    Par Morpheus262 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 02/04/2007, 14h55
  2. [CSS] Probleme avec mon menu css
    Par otagun dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 13/05/2006, 14h37
  3. Problème de Bordure en CSS, avec I.E
    Par Stitchover dans le forum Mise en page CSS
    Réponses: 13
    Dernier message: 25/04/2006, 16h17
  4. [CSS] Probleme de bordure de la div globale
    Par Elmilouse dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 21/07/2005, 23h02
  5. probleme d'intergration du CSS
    Par ThitoO dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 19/01/2005, 17h45

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