28172 sujets

CSS et mise en forme, CSS3

Centrage d'un texte dans une image dans une page

Bonjour à tous et toutes
J'ai une image, je voudrais qu'elle occupe 80% de la largeur de l'écran (quel que soit la taille de l'écran) et qu'elle soit centré sur l'écran
dans cette image il y a un texte (ou tableau) sur fond blanc transparent qui doit être centré sur l'image.

Voici ce que je souhaite obtenir au final
upload/60982-site.JPG

Comment faire pour y arriver, j'arrive à centrer l'image dans la fenetre d'écran, à centrer le fond blanc sur l'image, à centrer le texte sur le fond blanc mais jamais je n'arrive à obtenir les 3 centrés simultanément l'un dans l'autre. Il y a toujours un décalage qui se fait quelque part.
Je dois dire que je me mélange les pinceaux entre 
position:relative
et 
position:absolu


Qu'est ce qui serait le plus indiqué pour faire cela ? des tableaux ? Comment faire quel serait la meilleur façon ?

merci pour votre aide, car la je deviens Smiley biggol
Modifié par le_schti (18 Jan 2016 - 17:50)
Bonjour et bienvenue sur le forum,

Pour faire un truc tout simple, tu utilises deux conteneurs, dans le premier tu as ton image en fond, et dans le deuxième ton fond blanc et ton texte dedans, ce qui donne :
.main {
  position: fixed;
  width: 80%;
  left: 50%;
  margin-left: -40%;
  margin-top: 50px;
  background: transparent url(http://lorempixel.com/g/1900/1600/abstract/4) 0 0 no-repeat;
}
.container {
  margin: 50px; padding: 20px;
  background-color: rgba(255,255,255,0.6);
  text-align: center;
}}

EDIT : LIEN
Modifié par SolidSnake (19 Jan 2016 - 07:55)
Merci pour cette belle réponse.
Après avoir regardé ton code et effectué quelques tests , je me rends compte que celui-ci n'est pas centré verticalement dans la fenêtre, je vais faire des tests de mon côté pour corriger cela.

après je vais faire des tests avec une image plus qu'un background et surtout analyser et bien comprendre là ou pour toi cela fonctionne et pas pour moi.

merci de ton aide Smiley biggrin
Modifié par le_schti (19 Jan 2016 - 12:06)
j'avais effectivement fait sensiblement la même chose que toi, en utilisant un background, mais cette image va varier d'une page à l'autre. J'ai donc besoin que ce soit une image inséré et non pas un background.
tu peut malgré tout te servir d'un fond et passé l'url de l'mage changeante dans l'attribut style de ton conteneur plutôt que l'attribut src de ta balise image. Moi je n'y vois, sur le fond pas de différence, de plus les styles sont plus aisée à gerer.

exemple: http://codepen.io/gc-nomade/pen/YwEjem ou http://codepen.io/anon/pen/mVqjjJ (même feuille de style mais html différent pas d'attribut style au div de la demo 2).

Pour info centrage des démos via flex avec:
html {
  height:100%;
  display:flex;  
}
body {
  margin:auto;
}

Modifié par gc-nomade (19 Jan 2016 - 17:53)
whaoo .... comment dire .... merci beaucoup c'est exactement le rendu que je souhaite obtenir ... et toi tu le fais en 10 mn
bon ne me reste plus qu'à comprendre comment tu as fait et là ou moi j'ai merdé ...

merci bien ...
gc-nomade a écrit :
tu peut malgré tout te servir d'un fond et passé l'url de l'mage changeante dans l'attribut style de ton conteneur plutôt que l'attribut src de ta balise image. Moi je n'y vois, sur le fond pas de différence, de plus les styles sont plus aisée à gerer.

exemple: http://codepen.io/gc-nomade/pen/YwEjem ou http://codepen.io/anon/pen/mVqjjJ (même feuille de style mais html différent pas d'attribut style au div de la demo 2).

Pour info centrage des démos via flex avec:
html {
  height:100%;
  display:flex;  
}
body {
  margin:auto;
}


j'ai bien compris ce que tu avais fait. c'est simple rapide et efficace.
Maintenant j'aimerais utiliser autre chose que box-shadow, j'aimerais mettre un fond blanc transparent pour justement faire ressortir le texte, mais je n'y arrive pas du fait du background.
si tu as une idée je suis preneur
gc-nomade a écrit :
il suffit de modifier la couleur de l'ombrage interne, ainsi que son opacité: ex rgba(255,255,255,0.7) http://codepen.io/gc-nomade/pen/pgdGjM


j'ai testé, mais je n’obtiens pas totalement le rendu que je souhaite, a savoir la photo en clair et juste un fond blanc transparent au niveau de la zone de texte. En fait comme tu as fait mais avec la bordure totalement transparente
le_schti a écrit :


j'ai testé, mais je n’obtiens pas totalement le rendu que je souhaite, a savoir la photo en clair et juste un fond blanc transparent au niveau de la zone de texte. En fait comme tu as fait mais avec la bordure totalement transparente


bordure transparente ? et bien as tu essayé ? http://codepen.io/gc-nomade/pen/gPozEG

là on s’éloigne de ta première question ... maintenant tu devrais avoir suffisament d'exemple pour jouer avec et les remettre à ta sauce.
++
Cdt

<edit> il y a aussi une possibilité avec background-size et accesoirement un gradient http://codepen.io/gc-nomade/pen/Qyaxyz
Modifié par gc-nomade (21 Jan 2016 - 15:25)
Grâce à vos differentes aides, j'ai réussi à 98% à obtenir ce que je voulais. Cela rends bien.

Voilà ce que j'ai réalisé entre autre.
http://codepen.io/anon/pen/vLjzLQ

2 choses que je n'arrive pas à faire.
- centrer le texte dans chaque cases
- faire en sorte qu'il y ait toujours 3 lignes de case quelque soit la taille de la fenêtre. Selon la taille une ou plusieurs cases descendes à la ligne. Comment faire pour que la dimension des cases se réduise ?

merci encore pour tout l'aide apporté Smiley biggrin
Modifié par le_schti (28 Jan 2016 - 19:17)
tu peut te servir de flex pour centrer le contenu de tes block.

une id n'est utilisable qu'une seule fois, donc ici id devient class pour block1

http://codepen.io/anon/pen/bEMmPK?editors=1100

le font-size:1vw devrait en deça d'une certaine largeur repassé en px ou em via les mediaquerie pour que cela reste lisible
Modifié par gc-nomade (28 Jan 2016 - 21:30)
Sujet clos
Aller à