Superposer du texte sur des cercles

**FloCAD** · 28/04/2015, 15h12

Bonjour,

Je souhaiterai mettre du texte centré dans plusieurs cercles disposés où je le souhaite (pas alignés côte à côte ou autre) que je créé en CSS mais je n'arrive pas à centrer ce texte correctement dans mon cercle en plaçant ces mêmes cercles aux endroits que je souhaite...

Mon HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="crcl_jaune">
    <div id="txt_crcl_jaune">
        <h1>Présentation de <br /><strong>MOI</strong></h1>
        <p>Salut tout le monde !<p>
    </div>
</div>

Mon 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
 
div#crcl_jaune{
    position: absolute;
    background: rgb(250,190,60);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    top: 25%;
    left: 5%;
    border: 1px rgba(255,255,255,0.7) solid;
}
 
div#txt_crcl_jaune{
    position: absolute;
    color: white;
    text-align: center;
 
}

Merci d'avance pour votre aide ! =)

**Bovino** · 28/04/2015, 15h15

#txt_crcl_jaune va prendre uniquement la largeur dont il a besoin, centrer son contenu n'a pas vraiment de sens. C'est sur #crcl_jaune qu'il faut placer le text-align.

**FloCAD** · 28/04/2015, 15h21

Ok, mais du coup est-ce que j'ai réellement besoin d'avoir deux div, une pour le cercle et l'autre pour le texte ou est-ce que ça serait mieux de ne mettre qu'une seule div par cercle que je veux placer ?

**Bovino** · 28/04/2015, 15h23

J'imagine que si tu testes, tu auras rapidement la réponse...

**FloCAD** · 28/04/2015, 15h36

Pas vraiment, je ne serais pas ici sinon malheureusement...

Je m'explique plus clairement avec un code de démo :
Mon HTML :

Code html :

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
 
<body>
  <div id="crcl_jaune">
    <h1>Ma présentation</h1>
    <p>blablablablablablabla blablablablablablabla blablablablablablabla</p>
  </div>
  <div id="crcl_bleu">
    <h1>coucou</h1>
  </div>
 
</body>
</html>

Mon 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
#crcl_jaune{
	position:relative;
	top: 100px;
	left: 70px;
	display:inline-block;
	vertical-align:middle;
	background: rgb(250,190,60);
	border-radius: 50%;
	width: 220px;
	height: 220px;
	line-height:1em;
	border: 2px solid rgba(255,255,255,0.7);
	color: rgb(255, 255, 255);
	text-align: center;
	z-index: 0;
}
 
#crcl_bleu{
	position:relative;
	top: 200px;
	left: -2px;
	display:inline-block;
	vertical-align:middle;
	background: rgb(65,190,238);
	border-radius: 50%;
	width: 150px;
	height: 150px;
	line-height:1em;
	border: 2px solid rgba(255,255,255,0.7);
	color: rgb(255, 255, 255);
	text-align: center;
	z-index: -1;
}

Mon problème est que soit, j'utilise une position relative mais je perds le vertical-align, soit j'utilise une position absolue et rien ne bouge, ne me permettant pas de placer mes cercles où je le souhaite...

Mon objectif est que cela ressemble à ça : http://jsbin.com/pahubiwufa/1/edit mais avec le texte centré dans le cercle !

Merci d'avance =)

Invité · 28/04/2015, 16h41

Bonjour,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<nav id="crcl_menu">
    <div id="crcl_jaune">
    <div>
      <h1>Ma présentation</h1>
      <p>blablablablablablabla blablablablablablabla blablablablablablabla</p>
    </div>
    </div>
    <div id="crcl_bleu">
     <div>
     <h1>Coucou la praline</h1>
    </div>
    </div>
</nav>

Code CSS :

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
#crcl_menu{
	position:relative;
	margin-top: 50px;
	margin-left: 20%;
}
#crcl_jaune{
	position:absolute;
	display:table;
	top: 0;
	left: 0;
	background: rgb(250,190,60);
	border-radius: 50%;
	width: 220px;
	height: 220px;
	line-height:1em;
	border: 2px solid rgba(255,255,255,0.7);
	color: rgb(255, 255, 255);
	text-align: center;
	z-index: 0;
}
#crcl_bleu {
	position:absolute;
	display:table;
	top: 130px;
	left: 180px;
	background: rgb(65,190,238);
	border-radius: 50%;
	width: 150px;
	height: 150px;
	border: 2px solid rgba(255,255,255,0.7);
	color: rgb(255, 255, 255);
	z-index: -1;
}
#crcl_jaune > div, #crcl_bleu > div {
	position:relative;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
 }

**FloCAD** · 28/04/2015, 16h52

Oh excellent ! C'est exactement ce qu'il me fallait ! Merci !
Par contre c'était quoi mon erreur du coup ? J'aimerai comprendre...
Il fallait placer l'intégralité des cercles dans une div globale de navigation qui dispose d'une position relative puis mettre tout le reste en absolute pour que cela fonctionne ? Je ne comprends pas très bien la dernière partie du CSS non plus...

Merci d'avance pour les explications et pour la solution à mon problème !

Invité · 28/04/2015, 17h08

Un exemple plus complet :

http://codepen.io/jreaux62/pen/YXPRBg

Le "secret" réside dans les display:table; et display:table-cell; !

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<nav id="crcl_menu">
    <div id="crcl_jaune">
    <div>
      <h1><span>Ma</span><br />présentation</h1>
      <p>Denique vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti.</p>
    </div>
    </div>
    <div id="crcl_bleu">
     <div>
     <h1>Coucou<span><br />la <img src="http://www.developpez.net/forums/images/smilies/icon_wink.gif" alt=""/></span><br />praline</h1>
    </div>
    </div>
</nav>

Code css :

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
41
42
43
44
45
46
47
48
49
50
#crcl_menu {
	position:relative;
	margin-top: 50px;
	margin-left: 20%;
}
/* cercles */
#crcl_menu > div {
	position:absolute;
	display:table;
	border-radius: 50%;
}
#crcl_jaune {
	top: 0;
	left: 0;
	background: rgb(250,190,60);
	width: 220px;
	height: 220px;
	border: 2px solid rgba(255,255,255,0.7);
	color: rgb(255, 255, 255);
	z-index: 2;
}
#crcl_bleu {
	top: 130px;
	left: 180px;
	background: rgb(65,190,238);
	width: 150px;
	height: 150px;
	border: 2px solid rgba(255,255,255,0.7);
	color: rgb(255, 255, 255);
	z-index: 1;
}
#crcl_menu > div:hover {
	box-shadow:5px 5px 20px #666;
  z-index:9;
}
#crcl_menu > div > div {
	position:relative;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
  padding:0 10px;
}
/* textes */
#crcl_menu > div > div h1 { 
  font-size:140%; 
  line-height:120%; 
  margin:0;
  padding:0;
}
#crcl_menu > div > div h1 span { font-size:180%; }

La balise <nav> englobante sert à positionner ensuite par rapport au reste du site.

**FloCAD** · 28/04/2015, 17h25

Envoyé par jreaux62

Le "secret" réside dans les display:table; et display:table-cell; !

Nickel, je vais creuser un peu par là pour comprendre tout ça !
En tout cas merci pour le coup de main et les explications !
Du coup si je souhaite que les cercles ainsi que les textes à l'intérieur s'adapte à la résolution de chaque écran, j'ai juste à remplacer tous les px par des % ?

(je suis un peu débutant et autodidacte en dév...)

Invité · 28/04/2015, 17h30

Envoyé par FloCAD

Du coup si je souhaite que les cercles ainsi que les textes à l'intérieur s'adapte à la résolution de chaque écran, j'ai juste à remplacer tous les px par des % ?

Il faudra en effet adapter aux résolutions, voire même le remplacer par autre chose :
ce type de menu est difficile a faire tenir sur un smartphone !

**FloCAD** · 28/04/2015, 17h33

Ok ça marche ! Merci beaucoup encore une fois !

Superposer du texte sur des cercles [CSS 3]

CSS

Discussions similaires

Partager

Partager