18008 sujets

Questions générales et questions de débutants

[Résolu] Mettre une bordure noire autour du cadre d'un Carrousel.

Pages :
Bonjour,
Je désire mettre une bordure noire autour du cadre d'un Carrousel.
Mon code, semble t-il ne fonctionne pas.
Pouvez-vous me dire où est l'erreur je vous prie ?
Merci.

<div style="color:{{col_text}};background-color:{{col_bg}};padding:10px">
<h1 style> .carrousel { border: 15px #000 solid ; } </style>
<h1 style="font-weight:bold;">{{title}}<img style="border-color:#01BBFE;" border="10" src="image0.jpg"/></h1>
	<p style="font-size: smaller;">{{desc}}</p>
Salut
cette syntaxe la
<h1 style> .carrousel { border: 15px #000 solid ; } </style>
je ne la connais pas.
Tu utilise quelque chose de spécial pour générer ton code ? ou tu l'écris manuellement ?
je veux bien qu'il y ait une balise </style> fermante, mais où est l'ouvrante ?
<h1 style> ? non
mais plutôt comme cela
<style>.carrousel { border: 15px #000 solid ; }</style>
et tu peux mettre cette balise en tout début de ton html (en début de ton <body> ou pas comme tu veux).
Après, tu utilises du "style" inline, c'est à dire directement dans les balises html en tant qu'attribut... normalement cette technique est réserve au mail et c'est une technique qui est complètement ancienne et à ne surtout plus utilisé. Je te conseil de regarder un petit tuto sur le web pour générer du html/css proprement et facilement maintenable.
Bonjour,
Oui, c'est manuellement,
Oui, c'est ça l'ouvrante : <h1 style>
J'ai rectifié comme tu mas dit, mais ce n'est pas ça encore.
Je connais l'AS (Flash), et je refais mon Site afin d'être vu sur les tablettes et smartphones …
Je suis débutant en html/css
C'est le souci ….
Jack54 a écrit :

J'ai rectifié comme tu mas dit, mais ce n'est pas ça encore.
*
Quand ça marche pas, on partage le code, comme ça nous on peut voir Smiley smile
Bonjour,
Désolé, je n'ai pas pu revenir plus tôt …
Voici donc le code :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<style>.carrousel { border: 15px #000 solid ; }</style>
</head>
<body>
<div style="color:{{col_text}};background-color:{{col_bg}};padding:10px">
<h1 style="font-weight:bold;">{{title}}</h1>
<p style="font-size: smaller;">{{desc}}</p>
</div>
</body>
</html>


J'ai ajouté ta ligne, mais rien de plus ...
oui normal, aucun élement html ne porte ta classe carrousel
Je te renvoi à ce petit tuto sur les classe : ici
Modifié par JENCAL (27 Nov 2018 - 12:17)
Si tu reprend les bases du html et des attributs html, tu peux vite comprendre que les classe s'applique comme un attribut normal

je donne un nom de classe à mon éléments html (je nomme ma classe comme je veux bien sûr, ici carrousel comme toi)
<h1 class="carrousel">{{title}}</h1>


Comme ça, en css, je peux cibler cet élément là
<style>
.carrousel 
{ 
   border: 15px #000 solid ; 
}
</style>

dans mon css je cible la classe carrousel grâce au "." (point) devant le nom de ma classe ".carrousel".
Ok, appliqué sur mon code, ça devrait être comme ça ? :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<h1 class="carrousel">{{title}}</h1>
<style>
.carrousel 
{ 
   border: 15px #000 solid ; 
}
</style>
<body>
<div style="color:{{col_text}};background-color:{{col_bg}};padding:10px">
<h1 style="font-weight:bold;">{{title}}</h1>
<p style="font-size: smaller;">{{desc}}</p>
</div>
</body>
</html>

Modifié par Jack54 (27 Nov 2018 - 13:04)
non.
tu as ajoutés
<h1 class="carrousel">{{title}}</h1>
dans la balise <head></head> alors que le but est juste de cibler le <h1> qui est dans ton <body> au dessus de <p>
Modifié par JENCAL (27 Nov 2018 - 13:06)
Comme ça ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>

<style>
.carrousel 
{ 
   border: 15px #000 solid ; 
}
</style>
</head>
<body>
<div style="color:{{col_text}};background-color:{{col_bg}};padding:10px">
<h1 style="font-weight:bold;">{{title}}</h1>
<p style="font-size: smaller;">{{desc}}</p>
</div>
</body>
</html>
Presque, Il faut ajouter ta classe (carrousel) à ton élement HTML maintenant pour que le css appliquer à cette classe puisse prendre effet sur ton élements
Modifié par JENCAL (27 Nov 2018 - 13:24)
Oui, la vidéo est intéressante, mais il va trop vite le monsieur … lol
J'ai fait ça :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<h1 class="carrousel">{{title}}</h1>
<style>
.carrousel 
{ 
   border: 15px #000 solid ; 
}
</style>
</head>
<body>
<h1>carrousel</h1>
<div style="color:{{col_text}};background-color:{{col_bg}};padding:10px">
<h1 style="font-weight:bold;">{{title}}</h1>
<p style="font-size: smaller;">{{desc}}</p>
</div>
</body>
</html>
trop vite ou pas, il faut vraiment que tu suives un cours, car là tu essayes sans comprendre....
car là "<h1>carrousel</h1>" ton navigateur va afficher le mot "carrousel" en format H1. rien à voir avec ce que tu veux.

comme je te l'ai dit il faut ajouter la classe carrousel à ton H1 déjà existant
Tu as déjà ton h1 ici : 
<h1 style="font-weight:bold;">{{title}}</h1>


il suffit de lui rajouter une classe
<h1 class="carrousel" style="font-weight:bold;">{{title}}</h1>


et basta. je te l'ai expliqué dans mon message plus haut.
A 64 ans, je n'apprends pas aussi vite qu'à 30, c'est certain ….
C'est une première leçon en html/css ....
Moi, c'était AS Flash mon truc ….
Quoi qu'il en soit, j'ai rectifié le code, mais je n'ai toujours pas de bordure autour de mon carrousel …
C'est dommage.
Tu as bien raison et je ne juge pas, j'essaye de conseiller. tant bien que mal Smiley smile
Jack54 a écrit :

Quoi qu'il en soit, j'ai rectifié le code, mais je n'ai toujours pas de bordure autour de mon carrousel …

Partagez son code, encore et toujours Smiley langue 
<html>
<head>
<h1 class="carrousel">{{title}}</h1>
<style>
.carrousel 
{ 
   border: 15px #000 solid ; 
}
</style>
</head>
<body>
<div style="color:{{col_text}};background-color:{{col_bg}};padding:10px">
<h1 class="carrousel" style="font-weight:bold;">{{title}}</h1>
<p style="font-size: smaller;">{{desc}}</p>
</div>
</body>
</html>

Modifié par JENCAL (27 Nov 2018 - 14:12)
Voici une capture d'écran du carrousel …. pas de bord noir. C'est pénible, à force … lol

upload/1543324985-73322-project1.jpg
Pages :
Sujet clos
Aller à