Onglet

valix -
valix - 13 janv. 2011 à 15:23

Bonjour, voila je veux des onglet pareil que ca http://team.cybercrimesec.com/
coment je fait?

Afficher la suite

6 réponses

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

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

<!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. ?

Réponse 2 / 6
Webal Messages postés 109 Statut Membre

Salut valix

ajoute ça dans le <head> de ta page :
<link rel="shortcut icon" href="lien vers ton icone" type="image/x-icon" />
0
Réponse 3 / 6
Webal Messages postés 109 Statut Membre

Bien d'accord avec toi Rad

je croyais qu'il parlait du logo dans l'onglet du haut de la page !!!
0
Réponse 4 / 6
valix

merci de vos reponse mais il faut des images pour faire exactement pareil que le site web?
0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 6
RAD ZONE Messages postés 5362 Statut Contributeur 1 360

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. ?
0
1. arthezius Messages postés 3756 Statut Membre 475
  
  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.
  
  0
2. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
  
  ok ;-)) j avais pas capte
  
  0
Réponse 6 / 6
valix

encors merci de vos réponse et ou je pourai recuperer ses image pour l'apliquer pour mon sitez web ou j'aimerai avoir de jolie menu de naviguation pour le site de mon logiciel ;) :D merci encors a vous trés cher grand programeure
0

Onglet

6 réponses

Discussions similaires

Newsletters