Gestion des images et textes dans une div

**SerialFF** · 02/08/2017, 15h11

Bonjour à tous,

Ca fait très longtemps que je n'ai pas fait de CSS et j'aurai besoin de votre aide svp concernant la mise en page d'images et textes dans une div.

J'ai une bande grise width 100% height 5% tout en haut.
Puis un bloc à gauche qui doit recouvrir la hauteur restante 95%.

1) Je suis assez surpris que je dois renseigner 100% et pas 95% pour la heigh de div#menu. Si je comprends bien CSS lit comme instruction "J'ai une page de 100% je retire 5%. Il m'en reste 95%. div#menu s'applique sur 100% de ce qu'il me reste soit 95% restant." C'est bien ca ? Je trouve ca un peu étrange.
2) Autre point comment faire pour que tout le contenu de ma page s'affiche sans scroll ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
div#bande_grise{
	width:100%;
	height:5%;
	background-color:#7F7F7F;
	}
div#menu {
	width:20%;
	height:100%;
	float:left;
	background-color:#262626;
	}

J'aimerai diviser ce menu gauche en plusieurs "blocs" qui seront d'une hauteur de 10-15% chacun.
Dans chaque bloc j'aimerai avoir une image avec un texte en dessous :
- L'image et le texte doivent être centrés verticalement et horizontalement dans le bloc
- La taille doit s'adapter en fonction de la taille du bloc
- Chaque bloc devra avoir un lien vers une page différente.

3) Comment faire ca proprement ? L'image se redimensionne pas en conséquence. Le rendu est presque la sur IE mais pas sur firefox par exemple

index.html

Code html :

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

1
2
3
4
5
6
<div class="bloc_gauche">
 <div> <img class="display" img src="monImage1.png"></div>
	<div>
		<center><font color="#BFBFBF" type="bold" face="arial" size="2" align="center">Questions</font><center>
	</div>
</div>

main.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
div.bloc_gauche{
	position:relative; /* absolute */
	display:block;
	float:left;
/*	border-style: solid;
	border-color: grey;*/
	width:100%;
	height:15%;
}
img.display {
    display: block;
    margin-left: auto;
    margin-right: auto;
	}

Je vous remercie pour votre aide,
SerialFF

Invité · 03/08/2017, 11h13

Bonjour,

ce serait bien de nous donner du code CSS + HTML exploitable (= qu'on peut tester).

Pour les hauteurs, c'est plus délicat que pour les largeurs : il faut que TOUS les parents aient une hauteur définie (depuis html, body,...)

On attend ton code pour pouvoir en dire plus...

N.B. Vouloir définir des hauteurs est un non-sens si on considère le nombre de médias différents (PC, tablettes, smartphones), aux dimensions tout aussi variées...

**SerialFF** · 03/08/2017, 14h45

Hello,

Je souhaite tout gérer en % pour que justement ca puisse s'adapter à tout support et tout écran.
Vis à vis de l'utilité cela sera utilisé à 90% des cas sur PC. 8% tablettes. 2% téléphones.

Voici ci-dessous le code 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
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="main.css"/>
<title>Title</title>
</head>
<body>
<div id="bande_grise"></div>
<div id="menu">
		<div class="bloc_gauche">
			<img class="display" src="logo.png">
		</div>
		<div class="bloc_gauche">
			<center><font color="#BFBFBF" type="bold" face="arial" size="5" align="center">Title</font><center>
		</div>
		<div class="bloc_gauche">
			<img class="display" src="questions.png">
			<div class="legende_image">
				<center><font color="#BFBFBF" type="bold" face="arial" size="2" align="center">Questions</font><center>
			</div>
		</div>
		<div class="bloc_gauche">
			<div><img class="display" src="dashboard.png"></div>
			<div class="legende_image">
				<center><font color="#BFBFBF" type="bold" face="arial" size="2" align="center">Questions</font><center>
			</div>
		</div>
		<div class="bloc_gauche">
			<div> <img class="display" img src="report.png"></div>
			<div>
				<center><font color="#BFBFBF" type="bold" face="arial" size="2" align="center">Questions</font><center>
			</div>
		</div>
</div>
<div id="contenu_centre">
	<div id="bandeau_haut">Previous Question</div>
	<div id="bandeau_centre">
		<div id="question">My long question</div>
		<div id="numero_question">Question 1</div>
		<div id="listeReponses">
			<div class="reponse">
					<img class="reponse" src="a.png">
					<span>Ma réponse</span>
			</div>
			<div class="reponse">
					<img class="reponse" src="b.png">
					<span>Ma réponse</span>
			</div>
			<div class="reponse">
					<img class="reponse" src="c.png">
					<span>Ma réponse</span>
			</div>
			<div class="reponse">
					<img class="reponse" src="d.png">
					<span>Ma réponse</span>
			</div>
			<div class="reponse">
					<img class="reponse" src="e.png">
					<span>Ma réponse</span>
			</div>
		</div>
	</div>
</div>
<div id="menu_avancement"></div>
</body>
</html>

Et ici le 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
html, body { 
	margin:0; 
	height: 100%;
	background-color:#FCF7F6;
	font-family:calibri;
	}
div#bande_grise{
	width:100%;
	height:5%;
	background-color:#7F7F7F;
	}
div#menu {
	width:20%;
	height:100%;
	float:left;
	background-color:#262626;
	}
div#contenu_centre{
	width:55%;
	height:95%;
	float:left;
	}
div#bandeau_haut{
	width:100%;
	height:15%;
	background-color:#FFFFFF;
	}
div#bandeau_centre{
	width:100%;
	height:85%;
	background-color:#FCF7F6;
	text-align:justify;
	}
div#menu_avancement {
	width:25%;
	height:100%;
	float:left;
	background-color:#404040;
	}
 
div#question, #numero_question, #listeReponses{
	width:80%;
	font-weight:bold;
	margin:3%;
	margin-left:auto;
	margin-right:auto;
	font-family:calibri;
	}
div#question{
	color:#3E1547;
	font-size:large;
	}
div#numero_question{
	color:#00B0F1;
	font-size:medium;
	}
div#listeReponses{
	height:60%;
	font-size:medium;
	background-color:#FFFFFF;
	}
 
div.bloc_gauche{
	position:relative; /* absolute */
	display:block;
	float:left;
/*	border-style: solid;
	border-color: grey;*/
	width:100%;
	height:15%;
}
img.display {
    display: block;
    margin-left: auto;
    margin-right: auto;
	}
div.reponse{
	height:20%;
	background-color:#00B0F1;
	}
img.reponse{
	height:85%;
	background-color:#FFFFFF;
	}

Merci

Invité · 03/08/2017, 16h14

Bonjour,

1/

Code :

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

<center><font color="#BFBFBF" type="bold" face="arial" size="5" align="center">.....

Bon. Ça, tu oublies : ça se gère dans le CSS.

2/ regarde l'utilisation des flexbox (display:flex)

3/ tu peux voir aussi du côté de Bootstrap CSS.

Gestion des images et textes dans une div

CSS

Discussions similaires

Partager

Partager