5465 sujets

Sémantique web et HTML

Bonjour,
Je n'arrive pas à mettre des photos dans les classes ci-dessous (extrait) :
@media only screen and (min-width: 769px) and (max-width: 1920px)
{
.bg-img-1
	{
		background-image: url(‘../images/1920w/PBal.jpg’);
	}

.bg-img-2
	{
		background-image: url(‘../images/1920w/PBal1.jpg’);
	}

.bg-img-3
	{
		background-image: url(‘../images/1920w/PBal1.jpg’);
	}
.bg-img-4
	{
		background-image: url(‘../images/1920w/PBal1.jpg’);
	}
.bg-img-5
		background-image: url(‘../images/1920w/PBal1.jpg’);

Pourtant mes images sont bien dans le dossier 1920w qui se trouve dans le dossier images.
Voici le html :
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-1">
<h2>Regula aurea.</h2>
</div>
						</div>

						
			  </div>

Cela doit-être du au media queries car cela fontionne avec ces CSS :
.lddc .bg-img-1 {
	background-image: url(../images/PBal.jpg);
}
.lddc .bg-img-2 {
	background-image: url(../images/2.jpg);
}
.lddc .bg-img-3 {
	background-image: url(../images/3.jpg);
}
.lddc .bg-img-4 {
	background-image: url(../images/4.jpg);
}
.lddc .bg-img-5 {
	background-image: url(../images/5.jpg);
}

Je n'arrive pas à comprendre Smiley confus
Merci pour votre aide,
P.
A tous les coups c'est les guillemets bizarres de ton premier bloc
‘../images/1920w/PBal.jpg’
(pas identiques en début et en fin, genre guillemets typographiques anglais)
Bonjour kerlutinoec Smiley smile
Bien vu !
Mais ce n'est pas ça Smiley hum malgré un code valide maintenant Smiley cligne
@media only screen and (min-width: 576px) and (max-width: 768px)
{
.lddc .bg-img-1 {
	{
		background-image: url('../images/960w/PBal.jpg');
	}

.lddc .bg-img-2
	{
		background-image: url('../images/960w/PBal1.jpg');
	}

.lddc .bg-img-3
	{
		background-image: url('../images/960w/PBal1.jpg');
}
.lddc .bg-img-4
	{
		background-image: url('../images/960w/PBal1.jpg');
	}
.lddc .bg-img-5 {
		background-image: url('../images/960w/PBal1.jpg');
}
}

Merci et bonne journée,
P.
Modifié par PLGPPUR (30 Sep 2022 - 12:06)
Bonjour,
effectivement, on ne peut pas panacher les guillemets.
La class bg-img dans le html, que fait-elle ? Ça fonctionne avec le css et là, elle n'y est pas. Et tu as ajouté la class lddc, y compris dans ton nouvel exemple.
Le html complet, au moins pour les images, serait le bienvenu.
Je vois que tu as fermé }} .bg-img-5, qui ne l'était pas sur le premier code.
Regarde bien tes accolades autour de :
.lddc .bg-img-1 {
	{ /* il n'y a pas un problème là ? */
		background-image: url('../images/960w/PBal.jpg');
	}
/* ... */

De manière générale, il faut toujours décomposer un problème. Dans ce cas présent tu aurais dû tester sans media-queries, puis avec. Ça t'aurait permis de voir le problème déjà sans le media querie.
Bonjour Bongota,
Voici les CSS de lddc et bg-img :
.lddc .sl-slider-wrapper {
	width: 100%;
	height: 650px;
	overflow: hidden;
	position: relative;
	left: 0px;
	margin: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
}

.lddc .sl-slider h2,
.lddc .sl-slider blockquote {
	padding: 300px 30px 10px;
	width: 80%;
	max-width: 960px;
	color: #fff;
	margin: 0 auto;
	position: relative;
	z-index: 100;
	text-align: center;
}

.lddc .sl-slider h2,
.lddc .sl-slider {
	font-family: 'Holtwood One SC';
	}


.lddc .sl-slider h3 {
	width: 100%;
	color: #fff;
	margin: 0 auto;
	position: relative;
	z-index: 100;
	text-align: center;
	font-size: 10vw;

}

	
.lddc .sl-slider h2 {
	font-size: 100px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}

.lddc .sl-slider blockquote {
	padding-top: 10px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
	font: 300 28px Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

.lddc .sl-slider blockquote cite {
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 5px;
	padding-top: 30px;
	display: inline-block;
}

.lddc .bg-img {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: 100vh !important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
		background-color: black;

}
/* Media Queries for custom slider */

	.lddc .sl-slider-wrapper {
	height: 800px;
	position: relative;
	top: 0px;
	}

	.lddc .sl-slider h2 {
		font-size: 36px;
	}

	.lddc .sl-slider blockquote {
		font-size: 16px;
	}

le html :
        <div class="container">

            <header class="lddc">

            
<div id="logo"><img src="images/logoblanc_cut.gif"  alt="" class="lddc logo"/></div>
<div id="slider" class="sl-slider-wrapper">

<div id="menu" class="navbar navbar-default navbar-fixed-top">
  <ul class="nav">
            <li><a href="#test">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Contact</a></li>
    </ul>
    </div>

	<div class="sl-slider" data-midnight="white">
				
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-1">
<h2>Regula aurea.</h2>
</div>
						</div>

						
			  </div>
					
	<div class="sl-slide" data-orientation="vertical"
				
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-2">
<video autoplay loop muted="" playsinline="">
    <source src="./videos/levres.webm"
            type="videos/webm">

    <source src="./videos/levres.mp4"
            type="video/mp4">
</video></div>		<h3>Titre
							<div class="marquee-rtl">    <!-- le contenu défilant -->
    <div>LeDav</div></h3>
						</div>
			  </div>
					
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-3">
<video autoplay loop muted="" playsinline="">
    <source src="./lddc.webm"
            type="video/webm">

    <source src="./videos/lddc.mp4"
            type="video/mp4">
</video></div>		<h2>Titre1</h2>
							<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
						</div>
			  </div>
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-4">
<video autoplay loop muted="" playsinline="">
    <source src="/media/cc0-videos/lddc.webm"
            type="video/webm">

    <source src="./videos/lddc.mp4"
            type="video/mp4">
</video></div>		<h2>Titre2</h2>
							<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
						</div>
			  </div>
			  					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-1">
<video autoplay loop muted="" playsinline="">
    <source src="/media/cc0-videos/lddcrock.webm"
            type="video/webm">

    <source src="./videos/lddcrock.mp4"
            type="video/mp4">
</video></div>		<h2>Titre3</h2>
							<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
						</div>
			  </div>
</div></div></div></header>
					
					

Comme tu peux le voir, cela ne concerne que la première image (pour commencer, mais cela va être aussi le cas pour les futures images)^^
Merci beaucoup,
P.
Bien joué Olivier !
J'ai honte Smiley confused
Pourtant cela ne fonctionne toujours pas avec les media queries (mais tout roule sans).
Mes dernières CSS :

@media only screen and (max-width: 575px)
{
.lddc .bg-img-1 
	{
		background-image: url('../images/640w/PBal.jpg');
	}

.lddc .bg-img-2
	{
		background-image: url('../images/640w/PBal1.jpg');
	}

.lddc .bg-img-3
	{
		background-image: url('../images/640w/PBal1.jpg');
}
.lddc .bg-img-4
	{
		background-image: url('../images/640w/PBal1.jpg');
	}
.lddc .bg-img-5 {
		background-image: wurl(‘../images/640w/PBal1.jpg’);
}
	}

@media only screen and (min-width: 576px) and (max-width: 768px)
{
.lddc .bg-img-1
	{
		background-image: url('../images/960w/PBal.jpg');
	}

.lddc .bg-img-2
	{
		background-image: url('../images/960w/PBal1.jpg');
	}

.lddc .bg-img-3
	{
		background-image: url('../images/960w/PBal1.jpg');
}
.lddc .bg-img-4
	{
		background-image: url('../images/960w/PBal1.jpg');
	}
.lddc .bg-img-5 {
		background-image: url('../images/960w/PBal1.jpg');
}
}
@media only screen and (min-width: 769px) and (max-width: 1920px)
{
.lddc .bg-img-1
	{
		background-image: url('../images/1920w/PBal.jpg');
	}

.bg-img-2
	{
		background-image: url('../images/1920w/PBal1.jpg');
	}

.bg-img-3
	{
		background-image: url('../images/1920w/PBal1.jpg');
	}
.bg-img-4
	{
		background-image: url('../images/1920w/PBal1.jpg');
	}
.bg-img-5 {
		background-image: url('../images/1920w/PBal1.jpg');

}
}
@media only screen and (min-width: 1921px)
{
.lddc .bg-img-1
	{
		background-image: url('../images/PBal.jpg');
	}

.lddc .bg-img-2
	{
		background-image: url('../images/PBal1.jpg');
	}

.lddc .bg-img-3
	{
		background-image: url('../images/PBal.jpg');
	}
.lddc .bg-img-4
	{
		background-image: url('../images/PBal.jpg');
	}
.lddc .bg-img-5 {
		background-image: url('../images/PBal.jpg');
}
	}


Merci à toi Smiley cligne
P.
Après avoir tout corrigé (toutes les réponses sont bonnes, merci), relu, et corrigé de nouveau, et changé encore des erreurs grossières... ça fonctionne Smiley biggrin Je ne peux malheureusement pas dire ce qui bloquait, excepté des erreurs (nombreuses, pardon) de code. Je ne travaillerais plus le code sur InDesign Smiley lol
Encore merci à vous Smiley cligne
Bon week-end,
P.
Olivier C a écrit :
Regarde mieux : il y a encore un couple de guillemets obliques...


C'était le vent Smiley lol
PLGPPUR a écrit :
Après avoir tout corrigé (toutes les réponses sont bonnes, merci), relu, et corrigé de nouveau, et changé encore des erreurs grossières... ça fonctionne Smiley biggrin Je ne peux malheureusement pas dire ce qui bloquait, excepté des erreurs (nombreuses, pardon) de code. Je ne travaillerais plus le code sur InDesign Smiley lol
Encore merci à vous Smiley cligne
Bon week-end,
P.

Tant mieux, alors.
Si je peux me permettre pour la suite, tu devrais aussi voir les valeurs en px pour les font-size et même certaines autres. Par exemples des mélanges entre des % et des px sur la même balise.
width: 80%;
max-width: 960px;

Ça peut fonctionner, mais pour le responsive, les valeurs en px ne sont pas conseillées.
Par contre j'ai une question à poser qui ne mérite pas d'ouvrir une discussion. Problème résolu d'une façon pas très (pas du tout) propre. Je ne comprends pas le soucis.
Puis-je m'étendre ? Encore une fois, juste pour comprendre le pourquoi Smiley murf
Bon week-end à vous et encore merci,
P.