HELLO PETITE COMMUNAUTÉ DE CSS-ACTIF !

me revoici pour quémander de l'aide en effet, j'ai voulu essayer un système d'onglets dans un message sans avoir recourt au Javascript, grâce à un tuto que j'avais trouvé. j'ai ensuite souhaité agrémenter mon code à la sauce de mon forum et tout m'avait l'air nickel mis à part un minuscule détail que je vous expose.

donc comme vous pouvez le voir ici, mes onglets sont correctement fait je pense. le seul petit truc qui m'exaspère est que, lorsque vous cliquez qu'un onglet à l'autre, un léger décalage entre les deux contenus est remarquable : le premier est beaucoup plus collé aux bords que le second. j'ai d'abord cru que c'était un problème de padding dans mon css, mais je ne pense pas, et je ne vois pas où ça peut venir d'autre.

donc voici mon code css en hide


ainsi que mon html en hide aussi


à savoir que je ne désire pas utiliser de Java, ni de page HTML, parce que je veux que le contenu soit modifiable par des membres ! donc j'aimerais garder le CSS/HTML quoi xD
j'espère que vous pourrez m'aider, donc merci d'avance

merci de te pencher sur mon problème, c'est gentil j'attends donc ton edit, ou ton post, btw

• sortir la div "content2" et la mettre à la suite de "content1" ;
  
• englober "content1" et "content2" dans une seule div, par exemple "content_box" ;
  
• appliquer toute la mise en forme des "content" à "content_box" : c'est elle qui aura la mise en forme (taille, fond de couleur, bordure, overflow, padding, etc.) ;
  
• pour "content1" et "content2", et tous leurs états avec :target, tu peux alors te contenter de déterminer les "display".

Code:

#accueil2:target #content2 {
  display: block;
}

Code:

/* j'affiche le contenu de l'onglet 2 */
#accueil2:target #content2 {
  display: block;
}
/* dans le même temps, je masque le contenu de l'autre onglet */
#accueil2:target #content1 {
  display: none;
}

• tes deux onglets ont exactement le même style, inutile de leur donner un nom de class différent
  
• le :hover de tes onglets ne sert à rien, il s'agit de la même couleur de fond
  
• lorsque tu utilises des propriétés à extension (-moz-, -webkit-), place ces propriétés AVANT la propriété en question
  

  Code:

  /* au lieu de... */
  .class1 {
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  }
  /* je fais... */
  .class1 {
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  }

HAN PUREE
merci beaucoup, j'ai lu attentivement ton post, et je me sens bête de ne pas avoir fait attention à cette erreur idiote en fait, le code du tuto était comme ça, le content2 était inséré dans le content1, et quand j'avais essayé de les mettre l'une après l'autre, le content2 était doublé. enfin bref (à) donc j'ai fait ce que tu m'as dit, j'ai essayé aussi de rectifier les erreurs que tu avais noté et voilà ce que j'ai

HTLM :


CSS



donc le problème des padding est réglé je crois (à) j'ai simplement une petite question supplémentaire qui m'a été demandé : j'ai voulu essayé de mettre des transition, c'est à dire qu'en cliquant d'un onglet à l'autre, y'ait un effet, mais j'avoue que je n'ai pas su le placer au bon endroit :/ saurais-tu où le mettre ? (à)

après concernant le Java, j'avais lu sur divers topics que c'était pas possible, donc je n'ai pas cherché bien loin j'avoue, mais si c'est possible, je veux bien une petite explication (à)

Code:

$(function(){
  $('.onglet').click(function(){ //quand je clique sur un onglet, les actions suivantes se déclenchent
      $('#content_box > div').hide(); //tous les contenus sont masqués
      var tab = $(this).attr('id'); //je récupère l'id de l'onglet pour pouvoir cibler le contenu correspondant
      $('#content_' + tab).fadeIn(); //le contenu qui correspond à l'onglet s'affiche
  });
});

Code:

<span class="onglet" id="ongl1">ID CARD</span><span class="onglet" id="ongl2">REAL LIFE</span>

Code:

<div id="content_box"><div id="content_ongl1"></div><div id="content_ongl2"></div></div>