28234 sujets

CSS et mise en forme, CSS3

Centrer un SVG

Hey !

J'ai un léger soucis lorsque je veux centrer un SVG dans une div.
Le texte présent dans cette div se centre bien : tout est nickel, mais le SVG qui vient pas la suite n'en fait qu'à sa tête et se décale (voir photo ci dessous).

Voici la structure :
      <a href="mesprojets/alive2017.php">
        <div class="pro">
          <img src="../Images/dp_carre.png"/>
            <div id="title">
              <h2>ALIVE 2017</h2>
              <h4>Communication</h4>
              <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="500px" height="500px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                <polygon fill="none" stroke="#F59331" stroke-width="0.7" stroke-miterlimit="10" points="41.366,77.484 26.605,65.247 23.26,46.498
                 32.894,30.012 51,23.5 69.106,30.012 78.74,46.498 75.394,65.247 60.635,77.484 "/>
              </svg>
            </div>
        </div>
      </a>


Et voici le style :


* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}


#conteneur {
  padding-top: 56px;
  width: 100%;
  background: #333;
}

.pro {
  position: relative;
  float: left;
  width: 33.33333%;
  height: auto;
  overflow: hidden;
  cursor: pointer;
  left: 0.1px; /* Bug d'affiche des images pas compris */
}

#conteneur img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  float: left;
  border: none;

#title {
  left: 0;
  right: 0;
  position:absolute;
  text-align:center;
  width: 100%;
  opacity: 0;
}

#title svg {
  margin-top: -72px;
}


J'ai l'impression que tout est bien centré...qu'il n'y a rien d'autres à faire.

Merci d'avance pour vos éclaircissements Smiley cligne

upload/59838-svg.png
Modifié par HexaGo (25 May 2016 - 22:39)
Salut,

A ce que j'en vois, au niveau de ton css la déclaration #conteneur img n'est pas fermée.

De plus tu personnalise une ancre #conteneur qui n'apparaît pas ici dans ton Html. S'agit-il de la classe qui doit être appliquée sur le lien ?

Je ne comprends pas non plus pourquoi tu fais de ton image un élément flottant avec une largeur égale à 100% de son conteneur. Si elle fait 100% de large l'image ne flotte ni à gauche, ni à droite et n'est pas non-plus centrée par définition.

Tu définis aussi un width à 1/3 (33.33...%). J'attire ton attention sur ce point car d'une part, pense aux marges (directes et héritées).
Pour plus de précision tu peux remplacer par width: calc(100% / 3);.

Étrange aussi que de rencontrer margin-top: -72px;. Elle vient d'où cette valeur ? Cela ressemble fort à une valeur magique.
En règle générale les valeurs magiques sont le reflets d'une conception perfectible.


Bon courage !

Edit : Inutile de préciser la taille du svg en son sein propre. L'utilisation d'une viewBox permet le dimensionnement en Css.
Modifié par Greg_Lumiere (26 May 2016 - 07:04)
Merci pour tous ces bons conseils Smiley lol
Pour la balise non fermée c'était une erreur lors du post.
Et #conteneur s'applique au conteneur qui gère le tout et qui n'est pas présent dans le HTML.

J'ai appliqué tes remarques, le SVG se centre bien...mais maintenant l'image ne prend pas toute la surface de son conteneur et prend ses dimensions normales.

La solution serait donc de passer par des marges pour gérer la dimension de mes images ?
Le soucis c'est que je ne vois pas comment puisque mon but est d'afficher entièrement 3 images sur une seule ligne (cette ligne prendra toute la largeur de ma page).
C'est pourquoi le width était ma seule solution Smiley ohwell 


.pro {
  position: relative;
  float: left;
  width: calc(100% / 3);
  height: auto;
  overflow: hidden;
  cursor: pointer;
  left: 0.1px; /* Bug d affiche des images pas compris */
}

#conteneur img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  float: left;
  border: none;

}

Modifié par HexaGo (26 May 2016 - 19:52)
Je suis en train d'y regarder via Codepen.

Je n'ai pas encore LA solution mais je remarque déjà ceci : (mes remarques sont mises en commentaire du code)

<div id="conteneur"><!-- <= je le rajoute car tu me dis que tu ne le fais pas apparaître ; pourtant il est personnalisé donc on en a besoin ; PS : préférer l'utilisation d'une classe plutôt qu'un ID -->

<a href="mesprojets/alive2017.php">
        <div class="pro">
          <img src="../Images/dp_carre.png"/>
            <div id="title">
              <h2>ALIVE 2017</h2>
              <h4>Communication</h4><!-- Un H4 qui suit un H2, c'est pas bon ça ; prends H3 et personnalise-le soit en direct (h3 {}) ou par l'attribution d'une classe OU encore mieux vire les titres et mets des balises neutres -->

              <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="500px" height="500px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><!-- J'en avais parlé, pas de taille ici, tu utilise une viewBox ; pourquoi définir x et y ici ? -->
                <polygon fill="none" stroke="#F59331" stroke-width="0.7" stroke-miterlimit="10" points="41.366,77.484 26.605,65.247 23.26,46.498
                 32.894,30.012 51,23.5 69.106,30.012 78.74,46.498 75.394,65.247 60.635,77.484 "/><!-- Ici le fill:none risque de nous ennuyer ; autant le virer, on s'occupera de la couleur en Css -->
              </svg>
            </div>
        </div>
      </a>
</div><-- Fermeture balise div#conteneur -->
* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  -moz-box-sizing: border-box;/* il vaut mieux relever cette instruction d'une ligne ; On commence par les préfixes propriétaires (ms, webkit, moz, o etc) et on finit par la syntaxe définitive (dernière version de l'écriture généralement en Release Candidate auprès du W3C. */
}


#conteneur {
  padding-top: 56px;/* valeur magique */
  width: 100%;
  background: #333;
}

.pro {
  position: relative;/* inutile sans l'utilisation d'élément placé en absolu  sinon c'est bien de le préciser */
  float: left; /* Pourquoi float:left ici ? Le comportement naturel d'une boite est justement de se placer à gauche */

  width: calc(100% / 3);
  height: auto;
  overflow: hidden;
  cursor: pointer;
  left: 0.1px; /* Bug d affiche des images pas compris *//* Là moi je n'ai pas compris non-plus ; obsolète à mon sens */
}

#conteneur img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;

  float: left;/* Encore un float-:left, mais pourquoi donc s'enquiquiner avec un élément flottant qui implique de nettoyer après son passage (propriété clear) */

  border: none;
}

#title {
  left: 0;
  right: 0;
  position:absolute;
  text-align:center;
  width: 100%;
  opacity: 0;/* heu... ça me laisse dubitatif ; je ne comprends pas ce choix */
}

#title svg {
  margin-top: -72px;/* valeur magique */
}
Voici pour les remarques.

Afin qu'elles restent constructives, je te propose de partir sur la base suivante :

<div class="conteneur">
 <a href="mesprojets/alive2017.php">
  <div class="pro">
   <img src="../Images/dp_carre.png"/>
   <div class="title">
    <h2>ALIVE 2017</h2>
    <h3>Communication</h3>
    <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
      <polygon stroke="#F59331" stroke-width="0.7" stroke-miterlimit="10" points="41.366,77.484 26.605,65.247 23.26,46.498
                 32.894,30.012 51,23.5 69.106,30.012 78.74,46.498 75.394,65.247 60.635,77.484 "/>
    </svg>
   </div>
  </div>
 </a>
</div>

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.conteneur {
  padding-top: 56px;
  width: 100%;
  background: #333;
}

.pro {
  position: relative;
  width: calc(100% / 3);
  height: auto;
  overflow: hidden;
  cursor: pointer;
}

.conteneur img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  border: none;
}

.title { /* A quoi te sers cette classe ? */
  left: 0;
  right: 0;
  position:absolute;
  text-align:center;
  width: 100%;
  opacity: 0;/* heu... ça me laisse dubitatif ; je ne comprends pas ce choix */
}

.title svg {
  margin-top: -72px;
}

Voici la base sur laquelle je pars. Maintenant que notre zone de travail est propre, je vais procéder à quelques tests de mon côté.

On se retrouvera ici pour faire le point.
Modifié par Greg_Lumiere (27 May 2016 - 12:46)
C'est bien se qui me semblait c'est la propriété opacity: 0 appliquée sur ta classe .title qui empêche l'affichage de son contenu donc l'affichage de ton svg.


Voici ma correction :

<div class="conteneur">
 <a href="mesprojets/alive2017.php">
  <div class="pro">
   <img src="http://cdnf.alsacreations.net/avatars/59838-1095224210.jpg"/>
   <div class="title">
    <h2>ALIVE 2017</h2>
    <h3>Communication</h3>
    <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
      <polygon points="41.366,77.484 26.605,65.247 23.26,46.498
                 32.894,30.012 51,23.5 69.106,30.012 78.74,46.498 75.394,65.247 60.635,77.484 "/>
    </svg>
   </div>
  </div>
 </a>
</div>

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.conteneur {
  padding-top: 56px;
  width: 100%;
  background: #333;
}

.pro {
  position: relative;
  width: calc(100% / 3);
  height: auto;
  overflow: hidden;
  cursor: pointer;
}

.conteneur img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}

.title {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;/* inutile, voir Edit */
}

.title svg {
  margin-top: -72px;
  width: 500px;
  height: 500px;
  fill: none;
  stroke: #F59331;
  stroke-width: .7;
  stroke-miterlimit: 10;
}


Qu'en dis-tu ? Bien sûr l'organisation est perfectible mais pour coller au mieux à ta structure de départ, voici ma proposition. Si certains points méritent d'être éclaircis, n'hésite pas.

PS : Les titres => ta partie "titres" (H2 + H3) doit être revue. Si aucun sens sémantique n'est recherché, préférer des balises neutres (span ou div) et les personnaliser par css.
Un H3 signifie obligatoirement que tu as un H2 en guise de titre du parent.
Un H2 implique obligatoire que ta page porte un H1, titre du parent qui contient ton ou tes H2.
Un H3 ne peut suivre directement un H2, du contenu doit être inséré entre les deux
Etc et c'est Terra !

PS : Les SVG => Le svg est un élément intégrant la partie Html. Dans un soucis de séparation de la forme et du graphisme, il est fortement recommander de personnaliser les svg via css.
Demain tu veux changer une couleur : facile c'est dans le css que ça se passe.
Après-demain tu veux changer le path de ton svg : facile, c'est dans la partie html.
Mais tu avouera qu'il est plus probable à en venir à une situation comme Demain que celle du sur-lendemain, non ?


Edit: Préciser width: 100% à l'élément .title est superflue car la classe title est placée absolument (top et right définissent la largeur implicite de l'objet).
Modifié par Greg_Lumiere (27 May 2016 - 13:01)
Encore une remarque: sur le choix des pixels. Essaye de plutôt utiliser des unités relatives. Par exemple le couple rem et em fonctionne du tonnerre et permet un design adaptatif.

Quand tu auras fixé ton soucis de svg, je te suggère de prêter attention à cette remarque.


Le codepen de ma suggestion (je l'ai un peu modifier en incluant des valeurs relatives)
Modifié par Greg_Lumiere (27 May 2016 - 13:02)
Je n'y avais pas prêté attention mais overflow: hidden; ne devrait pas être indispensable.

Tout comme img { display: block; }.

D'autre part, suivant le niveau de compatibilité désiré sache que la propriété calc() peut nécessiter des préfixes propriétaires.
Modifié par Greg_Lumiere (27 May 2016 - 13:03)
Wouah ! Merci Greg_Lumiere pour toutes ces remarques ! Smiley eek
Je vais tenter de les appliquer plus souvent Smiley cligne

Concernant le float: left du conteneur .pro, j'ai dû tout de même le rajouter car sans cette propriété mes images étaient les unes sous les autres et non pas alignés.


J'utilise beaucoup les %, penses-tu qu'un site de qualité et responsif se doit d'utiliser seulement les em et rem ?

Et en effet overflow: hidden; n'est pas nécessaire, mais img { display: block; } oui car sans cette propriété j'ai une marge en bas de mes images.
HexaGo a écrit :
Wouah ! Merci Greg_Lumiere pour toutes ces remarques ! Smiley eek
Ben de rien.

HexaGo a écrit :
Je vais tenter de les appliquer plus souvent Smiley cligne
Il vaudrait mieux Smiley cligne

HexaGo a écrit :
Concernant le float: left du conteneur .pro, j'ai dû tout de même le rajouter car sans cette propriété mes images étaient les unes sous les autres et non pas alignés.
Peut-être un effet lié à l'héritage. On ne peut en juger qu'en ayant une vison globale du code.

HexaGo a écrit :
J'utilise beaucoup les %, penses-tu qu'un site de qualité et responsif se doit d'utiliser seulement les em et rem ?
C'est très bien continue alors. L'idée n'est pas de te faire remplacer des % par des em (c'est sensiblement la même chose, seul le référent change) mais d'oublier l'usage des pixels.

HexaGo a écrit :
Et en effet overflow: hidden; n'est pas nécessaire, mais img { display: block; } oui car sans cette propriété j'ai une marge en bas de mes images.
Théoriquement ça ne devrait pas (perso je n'ai pas ce genre de désagrément pourtant mes images sont dans des ensembles complexes). Encore une fois peut-être un effet lié à l'héritage. De toute façon ça ne mange pas de pain de le laisser Smiley lol


En optimisant ton code css de l'amont vers l'aval tu ne peux qu'améliorer la façon dont le navigateur va interpréter tes instructions.
Ça peut fonctionner même bourré de bugs mais certains navigateurs ou versions sont plus sensibles et génèreront des erreurs (qui peuvent conduire au clash).
C'est pourquoi il est nécessaire de confronter son code à différents navigateurs dans différentes versions afin de vérifier la robustesse du code (sa bonne interprétation en somme).
L'effet en cascade est très puissant et évite nombre de redondance dans les instructions mais c'est un effet à décortiquer et à vraiment cerner afin de lui donner toute sa puissance sans qu'elle soit parasitée par des erreurs de codes ou d'autres choses (comme des instructions contradictoires par exemple).
Modifié par Greg_Lumiere (27 May 2016 - 13:24)
Greg_Lumiere a écrit :

C'est très bien continue alors. L'idée n'est pas de te faire remplacer des % par des em (c'est sensiblement la même chose, seul le référent change) mais d'oublier l'usage des pixels.

C'est vrai que j'ai tendance à faire un peu trop de "bricolage" ^^



Greg_Lumiere a écrit :

C'est pourquoi il est nécessaire de confronter son code à différents navigateurs dans différentes versions afin de vérifier la robustesse du code (sa bonne interprétation en somme).
L'effet en cascade est très puissant et évite nombre de redondance dans les instructions mais c'est un effet à décortiquer et à vraiment cerner afin de lui donner toute sa puissance sans qu'elle soit parasitée par des erreurs de codes ou d'autres choses (comme des instructions contradictoires par exemple).

Je n'ai pas encore ce reflex de tester ses productions sur différents navigateurs...faut que je m'y mette.
T'inquiète on commence tous comme "Joe la bricole".

Tester sous différent navigateur est, à mon sens, une chose pour laquelle il ne faille pas trop tarder. Difficile de debugger quand t'as plusieurs centaines lignes de css et ça on y est vite (sans s'en rendre compte en plus).
Sujet clos
Aller à