5545 sujets

Sémantique web et HTML

Problème d'appel de balise css dans le code html

Bonjour, j'ai un devoir à rendre en NSI mais je suis bloquée Smiley sweatdrop ...

ma balise css : 
#gras
{
	font-weight:bold;
}

mon extrait de code html :
<p>
	Les Shadoks possèdent pour tout vocabulaire quatre mots monosyllabiques : « Ga, Bu, Zo, Meu ». Ces mots leur servent également de chiffres pour compter (base 4).<br>
	<div id="gras"> Ga = 0<br>  Bu = 1<br>  Zo = 2<br>  Meu = 3 </div>
</p>


La balise 
<div id="gras">
ne fonctionne pas.

Quelqu'un pourrait-il m'aider svp ? Smiley biggrin
Salut,

Si l'objectif est de mettre en gras le texte contenu dans la div#gras, ça fonctionne Smiley lol

Si tu ne le vois pas, c'est parce que ton CSS a été mis en cache par ton navigateur (pour éviter de le charger à chaque fois).

Y'a pléthore de façon de résoudre ce "problème". Tu peux empêcher la mise en cache

http://www.natsimhan.com/2010/04/18/75-mise-en-cache-css-ca-vous-enerve
https://blog.smarchal.com/mise-en-cache-js-css

Perso, je n'ai jamais été confronté à ce problème. Je crois donc que tu peux empêcher la mis en cache directement dans les options de ton navigateur.

Bon courage Smiley smile
Merci mais même en supprimant la mise en cache ça ne marche pas... Smiley sweatdrop

Et puis le reste de la mise en page fonctionne, il n'y a que mes balises div qui posent problème.

Je ne comprend vraiment pas pourquoi parce que j'avais utilisé exactement la même balise pour un autre projet et ça avait marché Smiley ohwell

Le seul div qui a l'air de fonctionner est celui qui entoure la page complète :

#bloc
{
	width : 800px;
	margin : 0 auto;
	background-color : peachpuff;
	text-align : center;
	font-family : Verdana;
	text-align : center;
	content : center;
}


Pourtant je l'ai introduit exactement de la même manière que les autres :
<div id="bloc">
</div>


Si quelqu'un a une idée... Smiley cligne
Oui bien sûr

Voilà mon code html : 
<!DOCTYPE html>
<html lang="fr_FR">

<head>
	<link rel="stylesheet" href="cssShadock.css">
	<title>La numération Shadock</title>
</head>

<meta charset="utf-8"/>

<body>

<div class="demo official"></div>
<div id="bloc">

	<h1>La numération Shadock</h1>

	<h2>Qu'est ce que le Shadock ?</h2>

	<p>Le Shadok est une méthode de numération en base 4. Il est inspiré d'une série animée de 208 épisodes de deux à trois minutes, créée par Jacques Rouxel : "Les Shadoks". Ce sont des êtres anthropomorphes aux apparences d'oiseaux.</p>

	<img src="img1.jpg">

	<p>
	Les Shadoks possèdent pour tout vocabulaire quatre mots monosyllabiques : « Ga, Bu, Zo, Meu ». Ces mots leur servent également de chiffres pour compter (base 4).<br>
	</p>

	<p id="gras"> Ga = 0<br>  Bu = 1<br>  Zo = 2<br>  Meu = 3 </p>


	<figure>
		<img src="img2.jpg">
		<figcaption><em>Professeur Shadoko enseignant les mathématiques</em></figcaption>
	</figure><br>

	<h2>Programme de Convertions python :</h2>

	<h3>Les fonctions :</h3>

	<p>Le programme se découpe en deux parties : une ou l'on défini les deux fonctions qui effectuent les conversions depuis la base décimale vers le language Shadock et inversement.</p>

	<img src="img6.png">
	<img src="img7.png">

	<h3>Corps du programme :</h3>

	<p>L'autre partie ou l'on crée une interaction avec l'utilisateur et ou l'on appelle les fonctions.</p>

	<img src="img.png">

	<p>On peut appeller les deux fonctions en choississant le sens de convertion, puis on saisi le nombre à convertir et le programme renvoie le nombre converti.</p><br><br>

</div>	
</body>

</html>


Et voici ma feuille de style CSS :
h1 {
	color : salmon;
	font-style :bold;
	font-size : 50px;
	font-family : Arial;
}

h2 {
	color : orange;
	font-style : italic bold;
	text-decoration : underline;
}

h3{
	color : coral;
	font-style : bold;
	font-size : 20px;
}


body {
	background-color : cornsilk;
}

#gras {
	font-weight : bold;
}


#bloc
{
	width : 800px;
	margin : 0 auto;
	background-color : peachpuff;
	text-align : center;
	font-family : Verdana;
	text-align : center;
	content : center;
}

#legende
{
	border : thin silver solid;
	font-weight : italic;
}

.demo {
    max-width: 300px;
    height: 100px;
    background: #eee url(https://upload.wikimedia.org/wikipedia/fr/f/ff/Log_shadok.jpg) no-repeat scroll;
}

.origin {
   padding: 25px;
   background-position: 100% 100%;
}
J'ai peut être pas compris Smiley lol

Qu'est-ce qui ne fonctionne pas, exactement ?

Le code que tu fournis produit bien une mise en forme.
"Ga = 0 Bu = 1 Zo = 2 Meu = 3" est bien affiché en gras, ce n'est pas ce qui devait arriver ?

J'ai joins une image de ce que produit ta page, en pièce jointe. upload/1576342744-78162-screenshot2019-12-14createane.png

Tu vois autre chose de ton côté ?
(hormis les images ^^)
Meilleure solution
Merci pour votre aide ! Smiley biggrin

je me suis perdue dans tous mes fichiers je viens de me rendre compte que j'appelais le mauvais dans mon code html... Smiley sweatdrop Smiley sweatdrop

Encore merci !
[code=html]
<!DOCTYPE html>
<html lang="fr_FR">

<head>
<link rel="stylesheet" href="cssShadock.css">
<title>La numération Shadock </title>
</head>

<meta charset="utf-8"/>

<body>

<div class="demo"></div>
<div id="bloc">

<h1>La numération Shadock</h1>

<h2>Qu'est ce que le Shadock ?</h2>

<p>Le Shadok est une méthode de numération en base 4. Il est inspiré d'une série animée de 208 épisodes de deux à trois minutes, créée par Jacques Rouxel : "Les Shadoks". Ce sont des êtres anthropomorphes aux apparences d'oiseaux.</p>

<img src="img1.jpg">

<p>
Les Shadoks possèdent pour tout vocabulaire quatre mots monosyllabiques : « Ga, Bu, Zo, Meu ». Ces mots leur servent également de chiffres pour compter (base 4).<br>
</p>

<p id="gras"> Ga = 0<br> Bu = 1<br> Zo = 2<br> Meu = 3 </p>


<figure>
<img src="img2.jpg">
<figcaption><em>Professeur Shadoko enseignant les mathématiques</em></figcaption>
</figure><br>

<h2>Programme de Convertions python :</h2>

<h3>Les fonctions :</h3>

<p>Le programme se découpe en deux parties : une ou l'on défini les deux fonctions qui effectuent les conversions depuis la base décimale vers le language Shadock et inversement.</p>

<img src="img6.png">
<img src="img7.png">

<h3>Corps du programme :</h3>

<p>L'autre partie ou l'on crée une interaction avec l'utilisateur et ou l'on appelle les fonctions.</p>

<img src="img.png">

<p>On peut appeller les deux fonctions en choississant le sens de convertion, puis on saisi le nombre à convertir et le programme renvoie le nombre converti.</p><br><br>

</div>
</body>

</html> [/code]
Modifié par ofjp (14 Dec 2019 - 19:34)
<!DOCTYPE html>
<html lang="fr_FR">

<head>
<link rel="stylesheet" href="cssShadock.css
">
<title>La numération Shadock </title>
</head>

<meta charset="utf-8"/>

<body>

<div class="demo"></div>
<div id="bloc">

<h1>La numération Shadock</h1>

<h2>Qu'est ce que le Shadock ?</h2>

<p>Le Shadok est une méthode de numération en base 4. Il est inspiré d'une série animée de 208 épisodes de deux à trois minutes, créée par Jacques Rouxel : "Les Shadoks". Ce sont des êtres anthropomorphes aux apparences d'oiseaux.</p>

<img src="img1.jpg">

<p>
Les Shadoks possèdent pour tout vocabulaire quatre mots monosyllabiques : « Ga, Bu, Zo, Meu ». Ces mots leur servent également de chiffres pour compter (base 4).<br>
</p>

<p id="gras"> Ga = 0<br> Bu = 1<br> Zo = 2<br> Meu = 3 </p>


<figure>
<img src="img2.jpg">
<figcaption><em>Professeur Shadoko enseignant les mathématiques</em></figcaption>
</figure><br>

<h2>Programme de Convertions python :</h2>

<h3>Les fonctions :</h3>

<p>Le programme se découpe en deux parties : une ou l'on défini les deux fonctions qui effectuent les conversions depuis la base décimale vers le language Shadock et inversement.</p>

<img src="img6.png">
<img src="img7.png">

<h3>Corps du programme :</h3>

<p>L'autre partie ou l'on crée une interaction avec l'utilisateur et ou l'on appelle les fonctions.</p>

<img src="img.png">

<p>On peut appeller les deux fonctions en choississant le sens de convertion, puis on saisi le nombre à convertir et le programme renvoie le nombre converti.</p><br><br>

</div>
</body>

</html>
Modifié par ofjp (14 Dec 2019 - 19:35)
pour font-weight ona :
normal
bold
bolder
lighter
number
initial
inherit;

pour font-style ona :
normal
italic
oblique
initial
inherit;
Sujet clos
Aller à