A voir également:
- Onglet
- Rouvrir onglet fermé - Guide
- Onglet privé - Guide
- Onglet (informatique) - Guide
- Excel nom onglet dans cellule ✓ - Forum Excel
- Onglet disposition excel ✓ - Forum Word
6 réponses
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
Modifié par RAD ZONE le 13/01/2011 à 00:56
Modifié par RAD ZONE le 13/01/2011 à 00:56
salut
tu as du te tromper Webal
walix pour ton menu tab cela depend de ce que tu veux faire !
pour le faire sur une seule page il faut du javascript avec un getelementbyid
exemple
maintenant pour faire un menu de navigation entre page pas besoin de js
tu peux tres bien le faire juste en CSS et html
exemple
telecharge cette exemple
fait attention a l "id :current" donnee uniquement au <li> de la page ouverte pour que l onglet reste en hover !!
A+
? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
tu as du te tromper Webal
walix pour ton menu tab cela depend de ce que tu veux faire !
pour le faire sur une seule page il faut du javascript avec un getelementbyid
exemple
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> RAD ZONE Webcreation Tab menu </title> <style type="text/css"> /*<![CDATA[*/ .tabs { position:relative; height: 20px; margin: 0; padding: 0; overflow: hidden; } .tabs li { display:inline; } .tabs a { height: 16px; background: #c2ceda; position:relative; padding: 8px; font-size : 11px; font-weight : bold; color : #fff; font-family : Verdana, arial, helvetica, sans-serif; text-decoration : none; } .tabs a.tab-visited { background-color:#6898d0; border-right: 1px solid #fff; font-size : 11px; font-weight : bold; color : #fff; font-family : Verdana, arial, helvetica, sans-serif; text-decoration : none; } .tabs a:hover { background-color:#80A0C6; font-size : 11px; font-weight : bold; color : #fff; font-family : Verdana, arial, helvetica, sans-serif; text-decoration : none; } .tabs a.tab-active { background-color:#6898d0; border-right: 1px solid #fff; font-size : 11px; font-weight : bold; color : #fff; font-family : Verdana, arial, helvetica, sans-serif; text-decoration : none; } .tab-panes { width: 98%; margin: 0px; } .divtabs { padding: 6px; background-color: #fff; border: 1px solid #B9CFE1; font-size : 12px; font-weight : normal; color : #2a2a2a; font-family : Verdana, arial, helvetica, sans-serif; text-decoration : none; } .contenu { margin-top: 6px; padding-top: 3px; padding-bottom: 4px; background-color: #fff; } .entete { font-size : 14px; font-weight : bold; color : #2C5885; font-family : verdana, arial, helvetica, sans-serif; text-decoration : none; } /*]]>*/ </style> <script language="JavaScript" type="text/javascript"> //<![CDATA[ var panes = new Array(); function setupPanes(containerId, defaultTabId) { panes[containerId] = new Array(); var maxHeight = 0; var maxWidth = 0; var container = document.getElementById(containerId); var paneContainer = container.getElementsByTagName("div")[0]; var paneList = paneContainer.childNodes; for (var i=0; i < paneList.length; i++ ) { var pane = paneList[i]; if (pane.nodeType != 1) continue; if (pane.offsetHeight > maxHeight) maxHeight = pane.offsetHeight; if (pane.offsetWidth > maxWidth ) maxWidth = pane.offsetWidth; panes[containerId][pane.id] = pane; pane.style.display = "none"; } paneContainer.style.height = maxHeight + "px"; paneContainer.style.width = maxWidth + "px"; document.getElementById(defaultTabId).onclick(); } function showPane(paneId, activeTab) { for (var con in panes) { activeTab.blur(); activeTab.className = "tab-active"; if (panes[con][paneId] != null) { var pane = document.getElementById(paneId); pane.style.display = "block"; var container = document.getElementById(con); var tabs = container.getElementsByTagName("ul")[0]; var tabList = tabs.getElementsByTagName("a") for (var i=0; i<tabList.length; i++ ) { var tab = tabList[i]; if (tab != activeTab) tab.className = "tab-disabled"; } for (var i in panes[con]) { var pane = panes[con][i]; if (pane == undefined) continue; if (pane.id == paneId) continue; pane.style.display = "none" } } } return false; } //]]> </script> </head> <body onload='setupPanes("containerprincipal", "tab1");'> <div align="left"> <div id="containerprincipal"> <ul class="tabs"><li> <a title="PANEL 1" href="#" onclick="return showPane('pane1', this)" id="tab1" name="tab1">PANEL 1</a></li><li> <a title="PANEL 2" href="#" onclick="return showPane('pane2', this)">PANEL 2</a></li><li> <a title="PANEL 3" href="#" onclick="return showPane('pane3', this)">PANEL 3</a></li><li> <a title="PANEL 4" href="#" onclick="return showPane('pane4', this)">PANEL 4</a></li><li> <a title="RAD ZONE Webcreation Web development" href="#" onclick="return showPane('pane5', this)">PANEL 5</a></li> </ul> <div class="tab-panes"> <div class="divtabs" id="pane1"> <div class="contenu"> <span class="entete">PANEL 1 </span> </div><br /> <p> RAD ZONE Webcreation </p><br /><br /> </div> <div class="divtabs" id="pane2"> <div class="contenu"> <span class="entete">PANEL 2 </span> </div><br />PANEL 2<br /><br /> </div> <div class="divtabs" id="pane3"> <div class="contenu"> <span class="entete">PANEL 3 </span> </div><br />PANEL 4<br /><br /> </div> <div class="divtabs" id="pane4"> <div class="contenu"> <span class="entete">RAD ZONE Webcreation </span> </div><br /> <br /><br /> </div> <div class="divtabs" id="pane5"> <div class="contenu"> <span class="entete">PANEL 5 </span> </div><br />PANEL 5<br /><br /> </div> </div> </div> </div> </body> </html>
maintenant pour faire un menu de navigation entre page pas besoin de js
tu peux tres bien le faire juste en CSS et html
exemple
telecharge cette exemple
fait attention a l "id :current" donnee uniquement au <li> de la page ouverte pour que l onglet reste en hover !!
A+
? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
Webal
Messages postés
99
Date d'inscription
mercredi 12 mars 2008
Statut
Membre
Dernière intervention
29 juin 2015
12 janv. 2011 à 23:38
12 janv. 2011 à 23:38
Salut valix
ajoute ça dans le <head> de ta page :
<link rel="shortcut icon" href="lien vers ton icone" type="image/x-icon" />
ajoute ça dans le <head> de ta page :
<link rel="shortcut icon" href="lien vers ton icone" type="image/x-icon" />
Webal
Messages postés
99
Date d'inscription
mercredi 12 mars 2008
Statut
Membre
Dernière intervention
29 juin 2015
13 janv. 2011 à 01:18
13 janv. 2011 à 01:18
Bien d'accord avec toi Rad
je croyais qu'il parlait du logo dans l'onglet du haut de la page !!!
je croyais qu'il parlait du logo dans l'onglet du haut de la page !!!
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
Modifié par RAD ZONE le 13/01/2011 à 14:25
Modifié par RAD ZONE le 13/01/2011 à 14:25
non pas oblige !sur le site c est a peu pres la meme chose que mon 1 exemple ,mais avec la librairie js ,jquery !
une seule page il faut du javascript avec un getelementbyid
https://forums.commentcamarche.net/forum/affich-20508736-onglet#2
A+
? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
une seule page il faut du javascript avec un getelementbyid
https://forums.commentcamarche.net/forum/affich-20508736-onglet#2
A+
? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
arthezius
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
475
13 janv. 2011 à 14:33
13 janv. 2011 à 14:33
Je pense qu'il parlait surtout du rendu visuel de l'onglet avec l'arrondi et l'effet de relief.
Dans ce cas, oui le plus simple serait d'utiliser une image.
Dans ce cas, oui le plus simple serait d'utiliser une image.
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
13 janv. 2011 à 14:42
13 janv. 2011 à 14:42
ok ;-)) j avais pas capte