28106 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai suivi cet article à la ligne :
https://www.alsacreations.com/tuto/lire/1032-Comment-centrer-verticalement-sur-tous-les-navigateurs-.html mais cela ne fonctionne pas Smiley hum
Je pense que cela est dû au fait que les images se trouvent dans un slider Smiley murf
Je vous donne mes CSS (parent et enfants) au cas où :

#content
{
	margin:0em auto;
	width:100%;
	overflow:hidden;
	position:relative;
	padding-top:0em;
	text-decoration: none;
	height: 100vh;
	background-color: #cab2a3;
}

#slide
{
	/* initialisé en javascript */
	/*position:relative;
	/**/
	/*width:400%;
	/* contient 4 éléments donc 4x100 = 400% */
}

.article
{
	/* initialisé en javascript */
	/*width:25%;
	/* il y a 4 éléments donc 100/4 = 25% */
	/*float:left;
	/**/
}

#imagasiat
{
	bottom: 0;
	position: absolute;
	z-index: 999;
	-webkit-transition: -moz-transform .3s ease-out;
	-moz-transition: -webkit-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: transform .3s ease-out;
	vertical-align: middle;
}

.imagasiat
{
	height: 100vh;
	float: right;
	top: 0px !important;
	max-width: 100%;
	bottom: 0px!important;
	position: relative;
	z-index: 9999;
	vertical-align:middle!important;
	border: 1vw solid #000000;
	vertical-align: middle;
	-webkit-transition: -moz-transform .3s ease-out;
	-moz-transition: -webkit-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: transform .3s ease-out;
}

.imagasiat2
{
	max-height: 100vh;
	text-align: center;
	top: 0px !important;
	max-width: 100%;
	bottom: 0px!important;
	position: relative;
	z-index: 9999;
	vertical-align:middle!important;
	border: 1vw solid #000000;
	opacity: 0;
	transition: all 1.5s ease-in-out;
	vertical-align: middle;
}



Merci pour votre aide et bonne journée Smiley cligne
P.
Bonjour Hermann,
Merci pour ta réponse. Désolé, c'est un oubli Smiley rolleyes
Voici le HTML :
<div class="article">
	<ul id="textasiat" class="niveau1 textasiat">
		<li><a href="#">Sabrina</a></li>
	</ul>
	<img class="niveau2 imagasiat" src="images/Sabrina.jpg" alt="Sabrina">
</div>


Merci à toi,
P.
PLGPPUR a écrit :
Bonjour Hermann,
Merci pour ta réponse. Désolé, c'est un oubli Smiley rolleyes
Voici le HTML :
&lt;div class="article"&gt;
	&lt;ul id="textasiat" class="niveau1 textasiat"&gt;
		&lt;li&gt;&lt;a href="#"&gt;Sabrina&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	&lt;img class="niveau2 imagasiat" src="images/Sabrina.jpg" alt="Sabrina"&gt;
&lt;/div&gt;


Merci à toi,
P.


C'est pas clair du tout, ton image fait height: 100vh;
Ensuite il faut savoir que la valeur de display calculée d'un élément flottant passe à block et que par conséquent, la propriété vertical-align est sans effet (elle ne s'applique que des éléments en-ligne).
Modifié par Hermann (30 Mar 2023 - 14:33)
Bonjour Hermann,
Tu as raison, pour le height, il est bien de 100vh Smiley smile
C'est en mode mobile que l'image n'est plus centrée, elle se retrouve à top: 0 (avec un width de 100%) Smiley decu
Désolé de ne pas avoir été plus clair Smiley ohwell
Merci pour ton aide et bonne journée Smiley cligne
P.
Modérateur
Hermann a écrit :
C'est pas clair du tout, ton image fait height: 100vh;

Bonjour Hermann , long time no see, salutations


@PLGPPUR , pour faire suite,
Et puis , ton css nous donne quelques regle pour ces sélecteur :
#content{}
#imagasiat{}
.imagasiat{}
.imagasiat2{}

Mais ton HTML est incomplet rapport aux styles que tu partages et qui posent problèmes, de plus rien en rapport avec ul, son id ou class, qui reste invariablement dans ce contexte de style, un block!.

#content et #slide absent du code, CSS de article commenté et JavaScript incriminé inconnu , ratio et taille images aussi inconnus mais en height:100vh.
En final avec toutes ces inconnues, on se dit , mais c'est quoi qui doit être aligné verticalement à quoi, c'est pas l'image si elle occupe déjà la hauteur de la fenêtre !?! ul alignée sur img , en superposition , ... à coté?? Smiley cligne

En proposant aux cotés de ta question un jsfiddle, un codepen ou autre editeur en ligne ton code en live et représentatif reproduisant ton soucis, cela t'aiderais à obtenir des réponses bien orientées, voir t'aider à découvrir seul ta solution. Smiley smile

cdt
Modifié par gcyrillus (04 Apr 2023 - 21:31)
Modérateur
PLGPPUR a écrit :
reBonjour gcyrillus Smiley biggrin
Voici le codepen :
https://codepen.io/herde2/pen/WNaeYVZ
J'ai juste retiré le height :100 vh car sinon, l'image est déformée... s'adapte à la hauteur (contrairement à ma page !!!???????) Smiley hum Pourquoi ????
Bonne journée,
P.


Bonsoir, difficile de te suivre et de t'aider car .
1. à priori , tu as un soucis avec un alignement vertical dans un slider , n'est ce pas ?
2. dans le codepen, le ul a disparu
3. le js s'applique à un nav inexistant
4. problème pour apparemment 4 articles si l'on en croit les commentaires.

Ton codepen ne démontre pas ton vrai problème Smiley decu
enfin height:100vh + float +vertical-align sur image ne vont pas ensemble , c'est soit les deux premiers éventuellement ou le dernier seul , ça s'est déjà dit précedement.

Cdt
Bonjour gcyrillus,
Le codepen montre bien le problème : image non centrée verticalement Smiley cligne
Mais je peux en refaire un Smiley smile
Bonne journée et merci^^
P.
Bonjour gcyrillus Smiley smile
Désolé de ne répondre que maintenant mais je n'avais plus d'ordinateur.
Erreur de JS dans mon codepen Smiley murf Pardon !
Je tente d'en faire un nouveau, mais le js n'agit pas. Je suppose que je m'y prends mal Smiley decu
Que faut-il mettre dans la case dédiée ?
Voici le JS provenant de la page :
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
// les liens doivent être ordonnés
$(function () {
  var listLien = $('#nav a'),
      enCours  = 0,
      oSlide   = $('#slide'),
      lstSlide = oSlide.children(),  // $('#slide div')
      nbrSlide = lstSlide.length;
 
  // affectation dynamique du CSS
  oSlide.css(
    { 'width' [decu]100 *nbrSlide) +'%',
      'position': 'relative'
    });
  lstSlide.each( function(){
    $(this).css(
      { 'width': 100/nbrSlide +'%',
        'float': 'left'
      });
  });
 
  // fct de déplacement commune
  function moveSlide(pos){
    // déplacement conteneur
    oSlide.animate({
        'left': ( -pos *100) +'%'
      }, 'slow');
     // mémorise position en cours
     enCours = pos;
     // affichage ou non des fléches
     $('.gauche')[enCours === 0 ? 'hide' : 'show']('slow');
     $('.droite')[enCours === nbrSlide-1 ? 'hide' : 'show']('slow');
  }
 
  // gestion des clics sur les liens
  listLien.on( 'click', function(){
    // déplace le conteneur à la position de l'ancre
    moveSlide( listLien.index(this));
    // inibe le lien
    return false;
  });
 
  // gestion des clics sur les flèches
  $('.fleche').on('click',function(){
    var inc  = $(this).hasClass('droite') ? 1 : -1,   // incrément suivant cas
        next = enCours + inc;
    // si déplacement autorisé
    if( next > -1 && next < nbrSlide){
      moveSlide( next);
    }
  });
  // uniquement pour l'affichage des fléches
  moveSlide(enCours);
});
</script>

Après, le codepen devrait fonctionner Smiley biggrin
Merci pour ton aide et bon week-end,
P.
gcyrillus a écrit :

Bonjour Hermann , long time no see, salutations

Salut camarade, en effet ! (Pense à regarder tes mp Smiley cligne )

@PLGPPUR Dsl mais je ne peux pas vous aider sur le JS.
Modérateur
Oups, pas vu le mp Smiley confused

@PLGPPUR
Ton soucis est-il toujours d'actualité ? car, plus de codepen en ligne et les morceaux de codes restant dans le fil ne n'ont pas franchement l'air d'être raccord entre eux.

++
Modérateur
Bonjour,

j'ai retirer les balise html de la boite pour le js

Rapidement: je t'ai ajouter
un margin:0 à body
un box-sizing pour tout (à toi de voir si necessaire
quelques hauteur , (si pas de hauteur=pas de centrage)
un grid sur l'article avec un align-items pour le centrage (grid simplifie le centrage)
et du clamp sur les font-size (juste parce-que j'avais une fenêtre pas bien haute)

ton pen forké https://codepen.io/gc-nomade/pen/yLRvwVX

Cela ressemble à ce que tu tentais de faire.

Pour mieux visualisé la place qu'occupe tes éléments , tu peut leur ajouter temporairement un ombrage ou un outline avec une couleur différente pour chacun d'eux.

Retire le height de #slide, et ton centrage est perdu.
Le lien vers le tutoriel d'alsa est toujours pertinent, mais pour faire un centrage vertical, il faut que le contenu soit moins haut que le contenant Smiley cligne

Cdt
Modifié par gcyrillus (08 May 2023 - 16:01)
Meilleure solution
Bonjour gcyrillus,
J'étais passé à côté de cette réponse datant de plus d'un mois Smiley decu
Super, UN GRAND MERCI... TOP !
Bonne journée,
P.
Bonjour gcyrillus,
Encore merci pour tout.
De graves problèmes ont fait que je n'ai pas touché l'ordi depuis très longtemps Smiley decu
Le display:grid de ta solution fait que les images se retrouvent à droite.
Le grid est-il obligatoire ?
Je ne peux tester le site actuellement.
C'est pas de chance.
Bonnes vacances si tu n'es pas encore parti,
P.
Modérateur
PLGPPUR a écrit :

Le display:grid de ta solution fait que les images se retrouvent à droite.
Le grid est-il obligatoire ?


Le grid simplifie grandement l'alignement en laissant le navigateur faire les calculs de lui-même. L'alignement à droite des images n'est pas forcément du au display, mais aux styles que tu leur appliques ou pas . Dans le codepen repris, ce défaut n'apparait pas mais tu as plusieurs exemples d'affichages que tu appliques via différente class. Tu utilises probablement la mauvaise class.

Je te conseille fortement d'apprendre à te servir de la touche F12 de ton navigateur pour pister les styles appliqués à chaque élément ainsi que d'autres erreur ou message . Cela te permettra de suite de savoir si il y a une erreur (un script, un fichier qui ne se charge pas,..) et quels styles sont appliqués a qui et d'où dans les styles.

Cdt