Adapter la largeur du conteneur lorsque je passe la souris (over) - balise pre (suite)

**friendofweb** · 24/09/2015, 19h07

Bonjour,

Voilà, je reviens vers vous, car je crois avoir besoin d'aide. J'expérimente (quand j'ai le temps) des propriétés css et j'hésite toujours finalement à continuer à utiliser la balise pre pour exprimer du code. Je vais voir avec l'expérience...

Soit, tout ça pour dire, que dans une balise pre, j'exprime un code avec des commentaires pour mon apprentissage du css...
Comme parfois, je discute du code avec des amis, je me suis dis, pourquoi ne pas agrandir la taille de la police, lorsque je passe la souris sur le commentaire via over.

Voici l'essentiel du code :

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
 
 
		<h1>Balise pre avec code, puis commentaire</h1>
		<div id="main"><pre><code>
<code class="selecteur">body</code><!-- Désolé, pour l'indentation, mais la balise pre m'y oblige -->
	{
 	font: 11px verdana, sans-serif;
 	background: #AFA99B;
 	<code class="commentaire">/* Pour que la page colle aux bords de la fenêtre du navigateur on met 0 à margin et padding */</code>
 	margin: 0;
 	padding: 0;
	}</code></pre>
	</div>
	<p id="question">
		Pensez-vous qu'il soit possible que la largeur de l'id <em>main</em> s'adapte lorsque l'on passe avec la souris, sur un commentaire (id commentaire) ?
	</p>

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
 
h1 {text-align: center; color: #F2D7F0;}
		body
			{
		 	font: 11px verdana, sans-serif;
		 	color: white;
		 	background: #AFA99B;
		 	margin: 0; /* Pour que la page colle aux bords de la fenêtre du navigateur on met 0 à margin et padding */
	 		padding: 0;
			}
		#main {clear: both;margin: auto; width: 721px; border: 0px solid black; background: #76C9C1;}
		.selecteur {color: #ED510E;}
		.commentaire {color: #3661A5;}
		.commentaire:hover {
			font-weight: bold;
			font-size: 14px;
			/* word-wrap: break-word; */ /* Je ne vois pas de différence à voir sur le net */
			/* white-space: pre-wrap; */ /* Passe à la ligne, pas mal, mais pas convaincant. */
			}
		#question {color: #D65E8C; font-size: 14px;}
		p {width: 721px; margin: auto; background: #E6E6E6; text-align: center;}

Vous pouvez avoir un aperçu

ici
Pensez-vous qu'il soit possible en CSS que la largeur de l'id main s'adapte lorsque l'on passe avec la souris, sur un commentaire (id commentaire) ?

Pour l'instant, j'ai essayé avec ceci (ce que j'ai mis en commentaire) :

Code css :

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

1
2
3
4
5
6
7
 
.commentaire:hover {
			font-weight: bold;
			font-size: 14px;
			/* word-wrap: break-word; */ /* Je ne vois pas de différence à voir sur le net */
			/* white-space: pre-wrap; */ /* Passe à la ligne, pas mal, mais pas convaincant. */
                       }

Cordialement,

**friendofweb** · 25/09/2015, 08h26

Début de solution,

Il faut définir le conteneur à :

Code css :

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

1
2
3
4
5
6
7
8
 
#main {
	clear: both;
	margin: auto;
	border: 0px solid black;
	background: #76C9C1;
	display: inline-block; /* Solution au problème ! */
	}

Il ne reste plus qu'à centrer le conteneur, pour cela, je pense inclure le conteneur dans une autre conteneur et le centrer.

**friendofweb** · 25/09/2015, 10h02

Codes finaux :

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
 
<!DOCTYPE html>
<!-- norme html5 -->
<html lang="fr">
	<head>
		<meta http-equiv ="content-type" content="text/html; charset=UTF-8" />
		<title>Balise pre avec commentaire</title>
		<link rel="stylesheet" type="text/css" href="precommenttest.css" />
	</head>
	<body>
		<h1>Balise pre avec code, puis commentaire</h1>
		<div id="main">
		<div id="divcode"><pre><code><code class="selecteur">body</code>	{
 	font: 11px verdana, sans-serif;
 	background: #AFA99B;
 	<code class="commentaire">/* Pour que la page colle aux bords de la fenêtre du navigateur on met 0 à margin et padding */</code>
 	margin: 0;
 	padding: 0;
	}</code></pre>
		</div></div>
		<br />
		<p id="question">
		Solution: <code>display: inline-bloc;</code> au conteneur et pour centrer ce conteneur, l'inclure dans un conteneur en ajoutant <code>text-align: center;</code>
		</p>
	</body>
</html>

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
 
h1 {
	text-align: center;
	color: #F2D7F0;
	}
body{
	font: 11px verdana, sans-serif;
	color: white;
	background: #AFA99B;
	margin: 0; /* Pour que la page colle aux bords de la fenêtre du navigateur on met 0 à margin et padding */
	padding: 0;
	}
#main {text-align: center;/* Permet de centrer l'id divcode qui est en inline-block */}
#divcode {
			text-align: left; /* remet le texte à gauche */
			background: #76C9C1;
			display: inline-block; /* Le conteneur s'adapte à son contenu, à sa largeur*/
			}
.selecteur {color: #ED510E;}
.commentaire {color: #3661A5;}
.commentaire:hover {
					font-weight: bold;
					font-size: 14px;
					}
#question {
			color: #D65E8C;
			font-size: 14px;
			width: 52.5%;
			margin: auto; /* Centre le paragraphe */
			background: #E6E6E6;
			text-align: justify;
			padding: 5px;
			}
#question code { color: green;}

Aperçu ici

Invité · 25/09/2015, 11h01

onjour,

à mon avis, ce n'est pas une bonne idée.

Teste en :

allongeant une ligne de code (grand nombre de caractères sur une même ligne)
réduisant la taille de la fenêtre

Il vaut mieux mettre des barres de scroll (comme ici sur DVP).

N.B. white-space: pre-wrap; n'était pas une mauvaise idée (mais à mettre sur toutes les balises <code>) :

Code css :

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

code{ white-space: pre-wrap; }

Par contre, ça ne permet plus de visualiser le code d'origine "tel qu'il est écrit" (on ne respecte plus le nombre de lignes du code original).

**friendofweb** · 25/09/2015, 12h19

En fait, je crée des synthèses de ce que j'apprends, dans un premier temps mes pages qui restent en local, sont très simples et la largeur ne pose pas de souci pour l'instant. Mais ta remarque est la bienvenue, ne fût-ce que par ton expérience, ensuite, je verrai au fur et à mesure... Pour info, j'ai testé et vais encore tester, mais par la suite ce que tu me proposes, car je dois terminer une autre synthèse (sur un menu déroulant) dans laquelle je vais utiliser la balise pre et pour l'instant j'ai besoin d'un visuel complet du code pour l'analyser.

En tout cas, merci !

Cordialement,

Adapter la largeur du conteneur lorsque je passe la souris (over) - balise pre (suite)

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager