28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

Je suis nouvelle ici donc je ne sais pas trop s'il faut que je me présente quelque part (c'est pas faute d'avoir chercher, j'ai trouvé un sujet dans le bar du forum mais je doute que ça soit le sujet officiel enfin bref héhé), si c'est le cas désolée xD

Donc, voilà mon problème. J'aimerais mettre des onglets dans mes messages sur forumactif, mais FA interdit le javascript dans les messages, du coup je suis obligée de me rabattre sur du css.

J'ai réussi à trouver un code :

Partie html

<table><tr><td><div class="ctab-container">
	<div class="ctab-nav">
		<div class="ctab"><a href="#content1">Content 1</a></div><br>
		<div class="ctab"><a href="#content2">Content 2</a></div><br>
<div class="ctab"><a href="#content3">Content 3</a></div>
	</div></td><td>
	<div class="ctab-main">
		<div class="ctab-content" id="content1">
			<p>This is content 1. Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.</p>
		</div>
		<div class="ctab-content" id="content2">
			<p>This is content 2.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.</p>
		</div>
<div class="ctab-content" id="content3">
			<p>This is content 3.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.</p>
		</div>
	</div>

</div></td></tr></table>



Partie CSS :

.ctab-nav {
width: 500px;
height: 35px;
margin-left: 1px;
}

.ctab{
float: left;
height: 35px;
padding-left: 7px;
padding-right: 7px;
text-align: center;
line-height: 35px;
border: 1px solid #777777;
border-bottom: none;
margin-left: -1px;
 

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
  
}

.ctab:hover {
background: #eeeeee;
}


.ctab-container {
width: 500px;
height: 335px;
}
.ctab-main {
width: 500px;
height: 300px;
overflow: hidden;
border: 1px solid #777777;

-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

.ctab-content{
width: 500px;
height: 300px;
margin-top: -14px;
font-family: arial;
font-size: 14px;
line-height: 21px;
}


Mais mon problème c'est qu'avec ce système, quand on clique sur l'onglet pour afficher le contenu, ça "scroll" et c'est vraiment pas agréable. J'ai essayé d'adapter mon code au tutoriel de css3create : http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target Mais je comprends pas trop comment procéder, sur quelle partie du css insérer le ":target", à quoi le rattacher, enfin bref comment bidouiller mon code pour ne plus avoir ce problème.

Donc voilà, est-ce que vous pouvez m'aider ?

Merci à tous ceux qui liront et répondront ^^