Organisation par onglets. Bouton_activeOrganisation par onglets. Bouton_hoverOrganisation par onglets. Fb-hoverOrganisation par onglets. Fb-active
AccueilForumÉquipe 
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Organisation par onglets. EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Organisation par onglets. EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Organisation par onglets. EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Organisation par onglets. EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Organisation par onglets. EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Organisation par onglets. EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Organisation par onglets. EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Organisation par onglets. EmptySam 11 Fév 2023, 06:04 par Krager

-20%
Le deal à ne pas rater :
Sony PULSE Elite – Casque PS5 sans fil (blanc) à 119€
119 € 149 €
Voir le deal

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

Organisation par onglets.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://iansomerhalderfan.forumactif.fr
Margaux
Margaux
{ Membre }
{ Membre }

Féminin Messages : 40



Organisation par onglets. Empty
      HEY!


J'ai un petit soucis avec le tutoriel sur l'organisation par onglets, très bien expliqué pourtant. J'ai dû beguer quelque part. D'ailleurs vous allez vite comprendre mon problème : IAN FAN TEST. Mes onglets sont entassés les uns sur les autres.

Voici mon template.

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">{LAST_VISIT_DATE}

{CURRENT_TIME}

</span>
<!-- END switch_user_logged_in -->
<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>

<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>

<!-- DEBUT MODIF ONGLETS -->

<script type="text/javascript">
<!--

var i = 0;

document.write('<div align="center">
<ul class="onglet">

 
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Home</li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Ian</li>
<li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Carrière</li>
<li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">Galerie</li>
<li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">Vidéos</li>
<li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">Flood</li>
<li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">WWW</li>



</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4','5','6');

 
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
 document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="forumline" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="forumline" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
}
compteur_cat++;
}

//-->
</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
capture_cat();
//-->
</script>   

<!-- FIN MODIF ONGLETS -->

<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="50">{L_TOPICS}</th>
<th nowrap="nowrap" width="50">{L_POSTS}</th>
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

</span>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<!-- BEGIN forum_link_no -->
<td class="row3" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.TOPICS}</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.POSTS}</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>
<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

& Mon CSS

Code:
body {
background-repeat: no-repeat;
}

.text {
color:#FFFFFF; /*Couleur du texte de vos onglets*/
cursor:pointer;
}

#cat_Home,#cat_Ian,#cat_Carrière,#cat_Galerie,#cat_Vidéos,#cat_Flood,#cat_WWW {
padding-top:4px;
}

.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }

.cat_forum {
background-color: #000000;
margin: auto;
margin-bottom:30px;
width:800px;
}

.onglet {
display:inline-block;
margin-top:30px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li {
float:left;
list-style-type:none;
margin-bottom:-22px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li:hover {
text-decoration:none; !important
cursor:pointer;
}

.onglet li a {
display:block;
text-decoration:none; !important
list-style-type: none;
cursor:pointer;
}

.onglet li a: hover {
text-decoration:none;
list-style-type:none;
cursor:pointer;
}

.onglet_actif {
background-color : #FF0000; /*URL de l'onglet étant actif*/
width:70px; /*Largeur de l'onglet étant actif*/
height:20px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
}

.onglet_nactif {
background-color : #FF0000; /*URL de l'onglet étant inactif*/
width:70px; /*Largeur de l'onglet étant inactif*/
height:20px; /*Hauteur de l'onglet étant inactif*/
cursor:pointer;
}

Merci d'avance pour votre aide! Wink


Dernière édition par Margaux le Ven 22 Oct 2010, 12:12, édité 2 fois
MessageSujet: Organisation par onglets.   Organisation par onglets. EmptyMer 20 Oct 2010, 05:28
Revenir en haut Aller en bas
http://ensomnia.co.nr
Sui
Sui
{ Membre actif }
{ Membre actif }

Féminin Messages : 346



Organisation par onglets. Empty
Bonjour, je ne vois qu'un seul onglet alors ce que tu veux dire est que tes onglets sont tous un par dessus l'autre ? Parce que je ne vois que WWW... XD
MessageSujet: Re: Organisation par onglets.   Organisation par onglets. EmptyMer 20 Oct 2010, 10:18
Revenir en haut Aller en bas
http://iansomerhalderfan.forumactif.fr
Margaux
Margaux
{ Membre }
{ Membre }

Féminin Messages : 40



Organisation par onglets. Empty
Oui, ils sont tous les uns sur les autres. Je me suis peut-être mal expliqué. Désolé Laughing
MessageSujet: Re: Organisation par onglets.   Organisation par onglets. EmptyMer 20 Oct 2010, 10:55
Revenir en haut Aller en bas
http://kobehs.chocoforum.net
Liliana
Liliana
{ Membre actif }
{ Membre actif }

Féminin Messages : 997



Organisation par onglets. Empty
Bonjour,

Alors après avoir bataillé avec le template, finalement c'était le CSS --'
J'ai rajouté un "padding" et pouf, ça a marché Laughing
J'ai aussi rajouté une marge entre les onglets, que tu peux retirer sans problème (je ne savais pas trop comment tu les voulais xD)

Code:
.text
{color: #FFFFFF;
cursor: pointer;}

#cat_Home,#cat_Ian,#cat_Carrière,#cat_Galerie,#cat_Vidéos,#cat_Flood,#cat_WWW
{padding-top:4px;}

.spoiler_content {display: block;}
.hidden .spoiler_content {display: none;}

.cat_forum
{background-color: #000000;
margin: auto;
width: 100%;}

.onglet
{display: inline-block;
margin-top: 20px;
text-decoration: none; !important
cursor: pointer;}

.onglet li
{float: left;
list-style-type: none;
text-decoration: none; !important
cursor: pointer;}

.onglet li:hover
{text-decoration: none; !important
cursor: pointer;}

.onglet li a
{display: block;
text-decoration: none; !important
list-style-type: none;
cursor: pointer;}

.onglet li a: hover
{text-decoration: none;
list-style-type: none;
cursor: pointer;}

.onglet_actif
{background-color : #FF0000;
width: 70px; /* Largeur de l'onglet */
height: 15px; /* Hauteur de l'onglet */
cursor: pointer;
cursor:crosshair;
text-align : center;
color: #ffffff;
padding: 5px;
margin: 5px;}

.onglet_nactif
{background-color : #FF0000;
width: 70px; /* Largeur de l'onglet */
height: 15px; /* Hauteur de l'onglet */
cursor: pointer;
text-align : center;
color: #000000;
padding: 5px;
margin: 5px;}


J'ai donc rajouter quelques petits trucs dans les deux dernières class "onglet_actif" et "onglet_nactif" :
color = pour la couleur du texte normale, et au passage de la souris. J'ai mis blanc & noir; mais ça se change xD
padding = bon bah il est là pour que tes onglets ne se chevauchent pas apparemment Laughing
margin = c'est pour faire un espace entre les onglets. Si tu le retires ça te fera une barre en fait


Dis moi si quelque chose ne va pas =)

Liliana
MessageSujet: Re: Organisation par onglets.   Organisation par onglets. EmptyVen 22 Oct 2010, 11:48
Revenir en haut Aller en bas
http://iansomerhalderfan.forumactif.fr
Margaux
Margaux
{ Membre }
{ Membre }

Féminin Messages : 40



Organisation par onglets. Empty
Ah super. Merci beaucoup d'avoir pris le temps de m'aider. Ca marche super bien!
I love you Calins
MessageSujet: Re: Organisation par onglets.   Organisation par onglets. EmptyVen 22 Oct 2010, 12:11
Revenir en haut Aller en bas
http://kobehs.chocoforum.net
Liliana
Liliana
{ Membre actif }
{ Membre actif }

Féminin Messages : 997



Organisation par onglets. Empty
De rien Wink
Je classe donc, bonne continuation avec ton forum =)
MessageSujet: Re: Organisation par onglets.   Organisation par onglets. EmptyVen 22 Oct 2010, 12:17
Revenir en haut Aller en bas
Contenu sponsorisé




Organisation par onglets. Empty
MessageSujet: Re: Organisation par onglets.   Organisation par onglets. Empty
Revenir en haut Aller en bas
 

Organisation par onglets.

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Organisation par Onglets
» [Résolu] Organisation par Onglets
» Organisation des sous-forums
» [Résolu] Organisation par Onglets - Effet de transition
» Inclusion d'un header et d'un tableau à onglets dans le premier onglet d'une navigation à onglets

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

Partenaires Or

← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit