Réduire espacement entre titre et texte+ centrage

novis -
canvas Messages postés 50 Date d'inscription Statut Membre Dernière intervention - 17 août 2017 à 15:02

Bonjour,

J'ai fait plusieurs test sur mon code css mais je n'arrive pas à réduire l'espacement entre mon titre (item a et b) et la description (item p)
De plus, j'ai insérer un code afin que tout cela se retrouve au centre de ma vignette mais cela ne fonctionne pas.
Pouvez-vous m'aider?

Mon code inséré est:

<script>

$(document).ready(function() {

 //move the image in pixel
 var move = -15;
 
 //zoom percentage, 1.2 =120%
 var zoom = 1.2;

 //On mouse over those thumbnail
 $('.item').hover(function() {
  
  //Set the width and height according to the zoom percentage
  width = $('.item').width() * zoom;
  height = $('.item').height() * zoom;
  
  //Move and zoom the image
  $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
  
  //Display the caption
  $(this).find('div.caption').stop(false,true).fadeIn(200);
 },
 function() {
  //Reset the image
  $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100}); 

  //Hide the caption
  $(this).find('div.caption').stop(false,true).fadeOut(200);
 });

});

</script>
<style>
body 
 {<strong>></strong>
  <link href='http://fonts.googleapis.com/css?family=raleway' rel='stylesheet' type='text/css'>
<strong>></strong>}


.item {
 width:250px;
 height:250px; 
 border:2px solid #222; 
 margin:5px 5px 5px 0;
 
 /* required to hide the image after resized */
 overflow:hidden;
 
 /* for child absolute position */
 position:relative;
 
 /* display div in line */
 float:left;
}

.item .caption {
 width:250px;
 height:250px;
 background:#000;
 color:#fff;
 font-weight:light;
        
      
  
 /* fix it at the bottom */
 position:absolute;
 left:0;

 /* hide it by default */
 display:none;

 /* opacity setting */
 filter:alpha(opacity=80);    /* ie  */
 -moz-opacity:0.8;    /* old mozilla browser like netscape  */
 -khtml-opacity: 0.8;    /* for really really old safari */  
 opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
 text-decoration:none;
 color:#9400D3;
 font-size:20px; 
 font-weight:normal;
        text-align:center;
        line-height:65px;

 /* add spacing and make the whole row clickable*/
 padding:5px;
 display:INLINE-BLOCK;
}

.item .caption b {
 text-decoration:none;
 color:#9400D3;
 font-size:20px; 
 font-weight:bold;
        text-align:center;
        line-height:65px;

 /* add spacing and make the whole row clickable*/
 padding:5px;
 display:INLINE-BLOCK;
}

.item .caption p {
 padding:5px; 
 margin:0;
 font-size:16px;
        font-weight:light;
        text-align:center;
        line-height:65px
         
}

.item img {
 border:0;
 
 /* allow javascript moves the img position*/
 position:absolute;
}

.clear {
 clear:both; 
}
</style>>

EDIT : Ajout des balises de code (la coloration syntaxique).

Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.
Jordane45

Afficher la suite

A voir également:

Réduire espacement entre titre et texte+ centrage
Comment réduire la taille d'un fichier - Guide
Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
Reduire taille image - Guide
Trouver un film sans le titre - Télécharger - Divers TV & Vidéo
Reduire clavier iphone - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

J'ai fait plusieurs test sur mon code css mais je n'arrive pas à réduire l'espacement entre mon titre (item a et b) et la description (item p)

Quels tests as tu effectué ?
As tu essayé de jouer avec les attributs PADDING et MARGIN de tes différents éléments ??

PS: NB : Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Cela fait deux fois que j'édite tes messages pour les ajouter.
Merci d'y penser la prochaine fois.

canvas

oui, j'ai joué avec les margin mais pas avec les padding. je vais faire le test.
Merci d'avoir mis le lien pour expliquer comment colorer script dans le forum, je ne savais pas...
novis

Réponse 2 / 3

canvas Messages postés 50 Date d'inscription Statut Membre Dernière intervention

Bonjour,

J'ai effectué quelques modifications de mon code.
J'ai donc réussi à réduire l'espacement entre mon titre et mon texte. J'ai réussi à centrer mon titre et mon texte.
Néanmoins, j'aimerai descendre le titre et le texte afin qu'ils se trouvent plus au milieu de la vignette.

J'ai testé le code:

margin: auto;

ainsi que différents padding mais je n'y arrive pas.

Où alors peut-être que je ne l'indique pas au bon endroit...
Peut-être avez vous une idée?

mon code est:

<code><script>

$(document).ready(function() {

 //move the image in pixel
 var move = -15;
 
 //zoom percentage, 1.2 =120%
 var zoom = 1.2;

 //On mouse over those thumbnail
 $('.item').hover(function() {
  
  //Set the width and height according to the zoom percentage
  width = $('.item').width() * zoom;
  height = $('.item').height() * zoom;
  
  //Move and zoom the image
  $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
  
  //Display the caption
  $(this).find('div.caption').stop(false,true).fadeIn(200);
 },
 function() {
  //Reset the image
  $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100}); 

  //Hide the caption
  $(this).find('div.caption').stop(false,true).fadeOut(200);
 });

});

</script>
<style>
body 
 {<strong>></strong>
  <link href='http://fonts.googleapis.com/css?family=raleway' rel='stylesheet' type='text/css'>
<strong>></strong>}


.item {
 width:250px;
 height:250px; 
 border:2px solid #222; 
 margin:5px 5px 5px 0;
 
 /* required to hide the image after resized */
 overflow:hidden;
 
 /* for child absolute position */
 position:relative;
 
 /* display div in line */
 float:left;
}

.item .caption {
 width:250px;
 height:250px;
 background:#000;
 color:#fff;
 font-weight:light;
        text-align:center;
        
       
      
  
 /* fix it at the bottom */
 position:absolute;
 left:0;

 /* hide it by default */
 display:none;

 /* opacity setting */
 filter:alpha(opacity=80);    /* ie  */
 -moz-opacity:0.8;    /* old mozilla browser like netscape  */
 -khtml-opacity: 0.8;    /* for really really old safari */  
 opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
 text-decoration:none;
 color:#9400D3;
 font-size:20px; 
 font-weight:normal;
        text-align:center;
        line-height:normal;

 /* add spacing and make the whole row clickable*/
 padding:5px; 5px; 20px; 5px;
 display:INLINE-BLOCK;
}

.item .caption b {
 text-decoration:none;
 color:#9400D3;
 font-size:20px; 
 font-weight:bold;
        text-align:center;
        line-height:normal;

 /* add spacing and make the whole row clickable*/
 padding:5px; 5px; 20px; 5px;
 display:INLINE-BLOCK;
}

.item .caption p {
 padding:2px; 2px; 5px; 2px;
 margin:2;
 font-size:16px;
        font-weight:light;
        text-align:center;
        line-height:normal;
         
}

.item img {
 border:0;
 
 /* allow javascript moves the img position*/
 position:absolute;
}

.clear {
 clear:both; 
}
</style>
>

</code>

merci de votre aide
canvas

Réponse 3 / 3

canvas Messages postés 50 Date d'inscription Statut Membre Dernière intervention

Juste pour info, et après de nombreuses recherches j'ai trouvé quel code ajouter afin de modifier le centrage vertical du texte:

position: relative;
        top: 40%;

et cela fonctionne!!

merci de vos conseils;)

Discussions similaires

Espace entre les mots

Tous les paragraphes sont considérés comme des titres

Explications disponibles ici :ICI

Votre réponse

Discussions similaires