27859 sujets

CSS et mise en forme, CSS3

Bonjour,
De retour déjà... désolé Smiley cligne
Je suis parti de cette démo :
https://tympanus.net/Blueprints/OnScrollEffectLayout/
et je tente de remplacer une image par un ensemble de div.
Seulement, je n'arrive pas à donner une hauteur de 100% à cette div dont voici le HTML :
<figure class="cbp-so-side cbp-so-side-left">
<div id= "chien"><div class="title">Titre</div>
<div class="rond">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
</figure>

et les CSS :
#chien {
	width: 100%;
	height: 50px;
	background-color: red;
}
#chien img{
	width: 150px;
}

@keyframes circle {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(8)
    }
}
.circle {
	margin: 0 auto;
	width: 300px;
	height: 300%;
	border: 10px solid #000000;
	border-radius: 50%;
	position: absolute;
	top: 15%;
	left: 60%;
	overflow-y: hidden;
}
.fond{
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}
.title{
	width: 100%;
	height: 100%;
	color: #EC990D;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-style: normal;
	font-weight: bolder;
	font-size: 10em;
	z-index: 999999;
	position: absolute;
	top: 0px;
	left: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.one {
  animation: circle 4s infinite linear;
}
.two {
  animation: circle 3s infinite linear;
}
.three {
  animation: circle 2s infinite linear;
}
.rond{
	width: 100%;
	height: 100%;
	position: absolute;
	overflow-y: hidden;
}

J'ai tenté de mettre les parents à height: 100%, mais cela ne change rien Smiley murf
Problème récurrent, je sais Smiley confused
Merci,
D.
Bonjour,

Avant tout, il y a plein d'erreurs dans le HTML :
- plusieurs div ne sont pas fermées,
- en l'absence d'images, la balise figure n'a plus lieu d'être.

Ensuite :
- height: 100% veut dire 100% de la hauteur de l'élément
- pour avoir un élément faisant 100% de la hauteur de la fenêtre du navigateur il faut utiliser les unités "vh".

Exemple :
.monElement {
  height: 100vh;
}
Bonjour Olivier C,
Merci pour ta réponse.
Malheureusement je suis obligé de garder le <figure> pour sa classe (cbp-so-side cbp-so-side-left) Smiley murf
<figure class="cbp-so-side cbp-so-side-left">
<div id= "chien"><div class="title">bolo</div>
<div class="rond">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div></div>
</figure>

Pour ce qui est de la hauteur, je souhaiterais celle de l'élément, et non un vh.
Pour le moment, seule l'unité px fonctionne.
Merci beaucoup Olivier,
P.
PLGPPUR a écrit :
Malheureusement je suis obligé de garder le &lt;figure&gt; pour sa classe (cbp-so-side cbp-so-side-left) Smiley murf

Et bien dans ce cas vous mettez une div... et il manque toujours la fermeture d'un élément. Serait-ce ceci qui est recherché ? :
<!-- avec de l'indentation on s'en sort tout de suite mieux -->
<div class="cbp-so-side cbp-so-side-left">
  <div id="chien">
    <div class="title">bolo</div>
    <div class="rond">
      <div class="circle one"></div>
      <div class="circle two"></div>
      <div class="circle three"></div>
    </div>
  </div>
</div>

Et si oui : qu'est-ce qui doit faire 100% de haut (#chien) ? et par rapport à quoi ? l'élément parent (.cbp-so-side) ?
Modifié par Olivier C (19 Aug 2022 - 19:25)
Merci pour les corrections Olivier C Smiley murf
a écrit :
Et si oui : qu'est-ce qui doit faire 100% de haut (#chien) ? et par rapport à quoi ? l'élément parent (.cbp-so-side) ?

Oui, mais je ne sais pas si cela est possible, d'où la publication de la démo.
#chien remplace une image...
C'est se compliquer la vie, mais si il n'y avait pas des gens sympas comme vous, je ne le ferais pas Smiley cligne
Bon week-end,
P.
Modifié par PLGPPUR (19 Aug 2022 - 20:03)
De rien Smiley cligne

Bon alors si #chien remplace l'image, on ne va pas faire comme ça, on va mettre directement l'image sur la div parente et on donnera un ratio à cette div :
<div id="chien" class="cbp-so-side cbp-so-side-left">
  <div class="title">bolo</div>
  <div class="rond">
    <div class="circle one"></div>
    <div class="circle two"></div>
    <div class="circle three"></div>
  </div>
</div>

#chien {
  max-width: 20em;
  background-image: url("https://images.com/maPhoto.jpg");
  background-size: cover;
  aspect-ratio: 16/9;
}

Exemple en ligne : CodePen
Merci Olivier pour ton aide et ton CodePen, mais mon cas est vraiment compliqué. J'ai testé pas mal de choses depuis ton post, essayant de partir de tes CSS/HTML Smiley murf
L'idée est que le background soit cela (height: 100%) :
<head>
<style>
* {
	margin: 0;
	overflow-x: hidden;
}
body {
	background-color: #FFFFFF;
}
@keyframes circle {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(8)
    }
}
.circle {
	margin: 0 auto;
	width: 300px;
	height: 300px;
	border: 10px solid #000000;
	border-radius: 50%;
	position: absolute;
	top: 15%;
	left: 60%;
	overflow-y: hidden;
}
.fond{
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}
.title{
	width: 100%;
	height: 100%;
	color: #EC990D;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-style: normal;
	font-weight: bolder;
	font-size: 10em;
	z-index: 999999;
	position: absolute;
	top: 0px;
	left: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.one {
  animation: circle 4s infinite linear;
}
.two {
  animation: circle 3s infinite linear;
}
.three {
  animation: circle 2s infinite linear;
}
.rond{
	width: 100%;
	height: 100%;
	position: absolute;
	overflow-y: hidden;
}
</style>
<body>
<div class="title">bolo</div>

<div class="rond">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>

<body>

et le chien vient dessus, en premier plan dans la div.
J'ai testé les z-index (en retirant le background)... testé bcp de choses Smiley hum
Bonne soirée,
P.
Alors il faut que le chien soit sur l'élément body ? -> CodePen
Mais je ne pense pas que ce soit cela qui est recherché car, plus haut, il fallait absolument préserver certaines classes :
PLGPPUR a écrit :
Malheureusement je suis obligé de garder le &lt;figure&gt; pour sa classe (cbp-so-side cbp-so-side-left).

Du coup je n'y comprends rien... On pourrait avoir une image du résultat final attendu dans la page web ?
Bonjour Olivier,
Oui, une image du résultat attendu est la meilleure des choses à faire Smiley smile
Bon week-end,
P. upload/1660991857-48192-chien.jpg
En mettant un fond blanc à width et height 100%, on obtient la taille désirée Smiley biggrin
Par contre, impossible de faire passer le chien en premier plan (devant les circles).

			<div class="cbp-so-section">
<div class="cbp-so-side cbp-so-side-left">
    <div class="title">bolo</div>

				  <div id= "chien"><img class="" src="fond_blanc.jpg" alt="moi">

    <div class="rond">
      <div class="circle one"></div>
      <div class="circle two"></div>
      <div class="circle three"></div>
	  <div class="chien"><img src="./imgs/chien.jpg" alt="img03"></div>


    </div>
  </div>
	</div>
J'y suis arrivé avec ces CSS :
#chien img{
	width: 100%;
	height: 100%;

	}
.chien {
	margin-top: 25%;
	width: 20%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	}

Une question de position.
Par contre, je 'ai pas réussi à centrer le chien verticalement, je suis passé par un
	margin-top: 25%;

Pour ce qui est de la hauteur de la div, un background ne fonctionnait pas, j'ai donc triché en mettant une image blanche pour faire office de fond, et conserver la hauteur initiale.
Merci beaucoup Olivier.
Bonne fin de week-end,
P.
Modifié par PLGPPUR (20 Aug 2022 - 17:09)
Tant mieux si tu y es arrivé ! C'est laborieux, mais c'est bien de tâtonner aussi, on apprend beaucoup ainsi.
PLGPPUR a écrit :
Pour ce qui est de la hauteur de la div, un background ne fonctionnait pas, j'ai donc triché en mettant une image blanche pour faire office de fond, et conserver la hauteur initiale.

Je comprends que tu ne veuilles pas revenir sur ton code si le résultat attendu est atteint sur le plan visuel, mais à l'avenir, pour ce genre de problème, penche toi sur la propriété css aspect-ratio
Modifié par Olivier C (21 Aug 2022 - 09:30)
Merci beaucoup Olivier, je vais m'y pencher.
Une aide pour le centrage verticale du chien ?
Pour comprendre, même si j'ai trouvé une solution.
Et une réponse à mon problème de font Smiley lol (précédente discussion) ?
a écrit :
Pour comprendre, même si j'ai trouvé une solution.

Je profite de ta gentillesse Smiley cligne
Bonne soirée et MERCI !
P.
PLGPPUR a écrit :
Merci beaucoup Olivier, je vais m'y pencher.
Une aide pour le centrage verticale du chien ?
Pour comprendre, même si j'ai trouvé une solution.

L'image dans la boite est un élément et se comporte donc comme un élément. Du coup ta solution en regard de ce problème est ok, bien que cette solution ne soit pas la plus propre, car on bouge l’élément pour arriver à nos fins. Peut-être aurait-il fallut utiliser cette règle sur l'image :
object-fit: cover;

Si un background-image avait été utilisé l'élément n'aurait pas bougé, on le laisse calé comme il est prévu, et on aurait bougé le background au sein de l'élément avec des règles css qui lui sont dédiés.

Deux manières de faire donc, il n'y en n'a pas une meilleure que l'autre : tout dépend du contexte. En principe, les images représentent un contenu (référencable), les background-image sont plutôt dédiés à la décoration du site.