Affichage d'un contenu d'onglet sur 2 colonnes

infoking1 Membre non connecté

Booster Missile

Le 11/10/2010 à 22h35

Oui pegase c'est une tableau à onglet que m'a concocté Swan dans un index.php avec le thème BanqueManager et voici le code si tu peux m'aider à ajouter une seconde colonne.

Caché :

Code PHP :

<!-- Start tableau multi-onglets rollovers -->
<script type="text/javascript">
<!--
function multiMenu(eltId) {
    arrLinkId = new Array('_0','_1','_2','_3','_4');
    intNbLinkElt = new Number(arrLinkId.length);
    arrClassLink = new Array('current','ghost');
    strContent = new String()
    for (i=0; i<intNbLinkElt; i++) {
        strContent = "menu"+arrLinkId[i];
        if ( arrLinkId[i] == eltId ) {
            document.getElementById(arrLinkId[i]).className = arrClassLink[0];
            document.getElementById(strContent).className = 'on content';
        } else {
            document.getElementById(arrLinkId[i]).className = arrClassLink[1];
            document.getElementById(strContent).className = 'off content';
        }
    }    
}
function multiSMenu(eltId,pfxContent,n,m) {
  arrLinkId = new Array();
  for (i=0; i<m; i++) {arrLinkId.push('s'+n+i);}            
    arrClassLink = new Array('scurrent','sghost');
    strContent = new String()
    for (j=0; j<arrLinkId.length; j++) {
        strContent = pfxContent+arrLinkId[j];
        if ( arrLinkId[j] == eltId ) {
            document.getElementById(arrLinkId[j]).className = arrClassLink[0];
            document.getElementById(strContent).className = 'son scontent';            
        } else {
            document.getElementById(arrLinkId[j]).className = arrClassLink[1];
            document.getElementById(strContent).className = 'soff scontent';            
        }        
    }    
}
-->
</script>
 
<?php
/*  Insertion d'un sous-menu
    chaîne $pfxContent  : préfix des div de contenu que l'on fait switcher
    nombre $numMenu     : N° du menu dans le script
    array  $strItems    : Tableau des items de sous-menu
    nombre $bwidth      : on peut modifier la largeur des blocks de sous-menu
  */
function InsertSmenu( $pfxContent, $numMenu, $strItems = array(), $bwidth = 0) 
{
?>
    <div class="ecform_smenu">
        <ul class="smenu">
            <?php
            $bwidth =($bwidth > 0) ? 'style ="width:'.$bwidth.'px;" ' : '';   
            for($i=0; $i<count($strItems); $i++) {
            echo "tt".'<li class="smenu'.$i.'">'."ntt";
            echo '<a id="s'.$numMenu.$i.'" class="'.(($i == 0) ? 'scurrent':'sghost').'" onclick="multiSMenu(this.id,'."'".$pfxContent."'".','.$numMenu.','.count($strItems).')" alt="smenu_'.$numMenu.$i.'" '.$bwidth.'>'.$strItems[$i].'</a>'."n";
            echo "tt".'</li>'."n";}
            ?>
        </ul>
    </div>
<?php
}
?>
<div id="ecform_container">
      <div id="ecform_entete">
            <ul id="menu">
                <li class="menu_0">
                    <a id="_0" class="ghost" onclick="multiMenu(this.id)" alt="menu0">Téléchargements</a>
                </li>
                <li class="menu_1">
                    <a id="_1" class="ghost" onclick="multiMenu(this.id)" alt="menu1">Tutoriels</a>
                </li>
                <li class="menu_2">
                    <a id="_2" class="current" onclick="multiMenu(this.id)" alt="menu2">News</a>
                </li>
                <li class="menu_3">
                    <a id="_3" class="ghost" onclick="multiMenu(this.id)" alt="menu3">Forum</a>
                </li>
                <li class="menu_4">
                    <a id="_4" class="ghost" onclick="multiMenu(this.id)" alt="menu4">Recrutement</a>
                </li>
            </ul>
        </div>
        <div id="ecform_topbar"></div>
 
    <div id="ecform_content">
        <div id="menu_0" class="off content">
            <div class="titcontent"></div>
            <div class="news_top">
                <div style="float:left;padding-left:30px;"><a href="./syndication.php?m=download" title="Rss download"><img class="valign_middle" src="./templates/BanqueManager/images/rss.png" alt="Syndication" title="Syndication" /></a><a class="news_title" href="../download/download.php">  Derniers téléchargements</a></div>
            </div>
            <div class="smcontent">
                <div id="smenus00" class="son scontent">
                <p><?php echo Feed::get_parsed('download', DEFAULT_FEED_NAME, 0, false, 10); ?>
</p>  
                </div>      
             </div>      
        </div>
 
        <div id="menu_1" class="off content">
            <div class="titcontent"> </div>
            <div class="news_top">
                <div style="float:left;padding-left:30px;"><a href="./syndication.php?m=articles" title="Rss articles"><img class="valign_middle" src="./templates/BanqueManager/images/rss.png" alt="Syndication" title="Syndication" /></a><a class="news_title" href="../articles/articles.php">  Derniers tutoriels</a></div>
            </div>
            <div class="smcontent">
                <div id="smenus01" class="son scontent">
                <p><?php echo Feed::get_parsed('articles', DEFAULT_FEED_NAME, 0, false, 10); ?>
</p>  
                </div>      
             </div>  
        </div>      
 
 
        <div id="menu_2" class="on content">
            <div class="titcontent"> </div>
            <div class="news_top">
                <div style="float:left;padding-left:30px;"><a href="./syndication.php?m=news" title="Rss news"><img class="valign_middle" src="./templates/BanqueManager/images/rss.png" alt="Syndication" title="Syndication" /></a><a class="news_title" href="../news/news.php"> Dernières news</a></div>
            </div>
            <div class="smcontent">
                <div id="smenus02" class="son scontent">
                <p><?php echo Feed::get_parsed('news', DEFAULT_FEED_NAME, 0, false, 10); ?>
</p>  
                </div>      
             </div>  
        </div>      
 
        <div id="menu_3" class="off content">
            <div class="titcontent"> </div>
            <div class="news_top">
                <div style="float:left;padding-left:30px;"><a href="./syndication.php?m=forum" title="Rss forum"><img class="valign_middle" src="./templates/BanqueManager/images/rss.png" alt="Syndication" title="Syndication" /></a><a class="news_title" href="../forum/index.php"> Derniers sujets du forum</a></div>
            </div>
            <div class="smcontent">
                <div id="smenus03" class="son scontent">
                <p><?php echo Feed::get_parsed('forum', DEFAULT_FEED_NAME, 0, false, 10); ?>
</p>  
                </div>      
             </div>  
        </div>
 
        <div id="menu_4" class="off content">
            <div class="titcontent"> </div>
 
 
 
            <div class="smcontent">
 
            <div style="float:left;padding-left:10px;">
            <a href="http://web.banquemanager.net/forum/topic-84+recrutement-newser.php"><img src="/upload/Newser.png" /></a>
            <a href="http://web.banquemanager.net/forum/topic-226+recrutement-beta-testeur.php"><img src="/upload/BêtaTesteur.png"/></a>
            <a href="http://web.banquemanager.net/forum/topic-85+recrutement-redacteur.php"><img src="/upload/Rédacteur.png"/></a>
            <a href="http://web.banquemanager.net/forum/topic-188+recrutement-graphiste.php"><img src="/upload/Graphiste.png"/></a></div>
            </div>  
        </div>                
    </div>
      <div id="ecform_btmbar"></div>
</div>
<!-- END tableau multi-onglets rollovers -->

Gérez vos comptes bancaires de façon simple et efficace avec BanqueManager
Téléchargement gratuit ici

infoking1 Membre non connecté

Booster Missile

Le 30/10/2010 à 13h38

#95175

Salut pegase,

c'est ça que tu demandes ?

Caché :

Code CSS :

 
/* #######################################*/
/*             Onglets des rss            */
/* #######################################*/
 
#ecform_container {
margin:0 auto;
position:relative;
text-align:left;
width:684px;
}
#ecform_container * {
margin:0;
padding:0;
}
#ecform_title {
}
#ecform_entete ul#menu {
float:left;
margin-right:0;
position:relative;
}
#ecform_entete ul#menu li {
display:inline;
float:left;
}
#ecform_entete ul#menu li a {
cursor:pointer;
display:block;
height:28px;
line-height:25px;
padding-top:10px;
text-align:center;
text-decoration:none;
width:127px;
}
#ecform_container ul#menu li a.ghost:hover {
-moz-user-select:none;
background:transparent url(images/tr2.png) repeat scroll 0 0;
color:#FFFFFF;
}
#ecform_container ul#menu li a.current:hover {
-moz-user-select:none;
background:transparent url(images/tr4.png) repeat scroll 0 0;
color:#E9E9E9;
cursor:default;
}
#ecform_topbar {
width:684px;
}
#ecform_btmbar {
background:transparent url(images/bot.png) no-repeat scroll 0 0;
font-size:x-small;
height:10px;
padding-left:25px;
padding-top:5px;
width:684px;
}
#ecform_btmbar ul .buttons {
float:right;
margin-right:6px;
position:relative;
}
#ecform_btmbar ul li {
display:inline;
float:left;
}
#ecform_btmbar ul li a {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
background-color:white;
border:thin solid #C0C0C0;
cursor:pointer;
display:block;
font-weight:bold;
height:28px;
line-height:25px;
text-align:center;
text-decoration:none;
width:80px;
}
#ecform_btmbar #btsubmit:hover {
background-color:#B0C4DE;
}
#ecform_btmbar #btcancel:hover {
background-color:#B0C4DE;
}
#ecform_btmbar #btsubmit:active {
background-color:#B0C4DE;
margin-right:-4px;
margin-top:4px;
}
#ecform_btmbar #btcancel:active {
background-color:#B0C4DE;
margin-left:4px;
margin-right:-4px;
margin-top:4px;
}
#ecform_content {
background:#F1F1F1 none repeat scroll 0 0;
border-top:1px solid #444444;
border-left:1px solid lightgrey;
border-right:1px solid lightgrey;
clear:both;
height:auto;
overflow-x:hidden;
padding-bottom:1em;
/*padding-left:10px;
padding-right:5px;*/
}
#ecform_content .titcontent {
float:left;
margin-top:1em;
}
#ecform_entete a.current {
background:transparent url(images/tr3.png) repeat scroll 0 0;
color:#FFFFFF;
}
#ecform_entete a.ghost {
background:transparent url(images/tr.png) repeat scroll 0 0;
color:#000000;
}
#ecform_container .on {
display:block;
}
#ecform_container .off {
display:none;
}
.ecform_smenu {
float:left;
font-size:x-small;
margin-right:-1.4em !important;
position:relative;
}
#ecform_content .smcontent {
clear:both;
padding-left:5px;
padding-top:1em;
position:relative;
}
.ecform_smenu ul.smenu {
float:left;
margin-right:0;
position:relative;
}
.ecform_smenu ul.smenu li {
display:inline;
float:left;
}
.ecform_smenu ul.smenu li a {
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
cursor:pointer;
display:block;
height:20px;
line-height:20px;
text-align:center;
text-decoration:none;
width:120px;
}
#ecform_container ul.smenu li a.sghost:hover {
-moz-user-select:none;
background-color:#000000;
border-bottom:thin solid #F1F1F1;
color:#FFFFFF;
}
#ecform_container ul.smenu li a.scurrent:hover {
-moz-user-select:none;
border-bottom:thin solid #E6E6FA;
cursor:default;
}
a.scurrent {
background-color:#cccccc;
}
a.sghost {
}
.son {
display:block;
}
.soff {
display:none;
}
.floated {
float:left;
margin:auto;
width:250px;
}
.floated a {
color:#000000;
}
.floated a:hover {
color:gray;
}
.floatenews {
float:left;
margin:auto;
width:285px;
}
.floatenews a {
color:#000000;
}
.floatenews a:hover {
color:gray;
}
.floatedf {
float:left;
margin:auto;
width:240px;
}

Gérez vos comptes bancaires de façon simple et efficace avec BanqueManager
Téléchargement gratuit ici

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

infoking1 Membre non connecté

infoking1 Membre non connecté

pegasetkc Membre non connecté

infoking1 Membre non connecté

infoking1 Membre non connecté

Shadow Membre non connecté

infoking1 Membre non connecté

pegasetkc Membre non connecté

infoking1 Membre non connecté

infoking1 Membre non connecté

infoking1 Membre non connecté

infoking1 Membre non connecté

KONA Membre non connecté

infoking1 Membre non connecté

infoking1 Membre non connecté