Sujets similaires

Bonjour,
Encore moi avec mes questions, toujours, et mes bugs What a Face

Cette fois-ci je viens à vous pour modifier un code. Je ne sais comment faire pour obtenir le rendu souhaiter. En fait je voudrais créer une page d'accueil qui prendrait toute la largeur du forum avec un système d'onglet où les onglets seraient à l'extérieur du forum "accrochés" à la bordure. Comme sur ce forum, par exemple : http://jeuderole.jdrforum.com/
Je voudrais juste reprendre l'agencement, pas la mise en forme générale, bien entendu. Et pour bien faire, bin j'ai déjà la partie codée avec les onglets (et plus ou moins la mise en forme définitive). J'aimerais juste qu'on m'explique comment faire pour avoir la PA sur toute la largeur avec les onglets qui sortent et viennent se coller à la bordure.
Bref, trève de barvardage. Voici le bout de template :

Code:: <div id="trucmuche" align="center">
<div id="EnTete">
<br/>
<br/>
<br/>
<br/>
<br/>
<table>
<tr>
<td style="width:100px;">
<div id="mes_onglets">
<div class="cadrebord">
<span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">
Accueil
</span>
<span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">
Annonces
</span>
<span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">
Personnages
</span>
<span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">
A Savoir
</span>
</div>
</div>
</td>
<div id="Bande">
<span class="titre2">Welcome to San Francisco</span>
</div>
<td style="width:99%;">
<div class="clear">
<div id="mes_contenus">
<div id="co_1" class="mon_contenu">
<p>
<strong><span style="font-size: 22px; line-height: normal">B</span></strong>ienvenue dans une San Francisco dévastée, isolée et coupée du reste du monde.
Trois mois après la catastrophe, les nouvelles nous arrivent éparses, incomplètes.
Toutes sortes de rumeurs s'échappent de la nouvelle San Francisco. Certains parlent de ville fantôme et d'autres d'une citée où les mutants pullulent, véritables dangers pour l'humanité.
Des milices se rassembleraient, prêtes à combattre ce nouveau mal.

<br/>
<br/>
Les rumeurs n'ont jamais été aussi proches de la vérité.
Venez, entrez et combattez pour survivre.
<br/>
</p>

<div class="lienpratique">
<a href="http://shutdown.forums-actifs.com/t1-reglement" target="_blank">Règlement</a> † <a href="http://shutdown.forums-actifs.com/t2-contexte" target="_blank">Contexte</a> † <a href="http://shutdown.forums-actifs.com/t3-guide-du-nouvel-arrivant" target="_blank">Guide du Nouveau</a>
</div>
</div>

<div id="co_2" class="mon_contenu" style="display: none;">
<p>
<img src="http://i85.servimg.com/u/f85/13/05/77/37/tru1011.gif"/> Venez voter pour désigner le gagnant du premier concours de Shut Down ! <a href="http://shutdown.forums-actifs.com/t140-concours-1" class="postlink" target="_blank" rel="nofollow">Par ici ! ♪</a>
<br/> <br/>
<img src="http://i85.servimg.com/u/f85/13/05/77/37/tru1011.gif"/> Le nouveau design de Shutdown vient d'arriver ! <a href="http://shutdown.forums-actifs.com/t140-concours-1" class="postlink" target="_blank" rel="nofollow">Donnez-nous votre avis ♪</a>
<br/> <br/>
<img src="http://i85.servimg.com/u/f85/13/05/77/37/tru1011.gif"/> <span style="color:#3C8A47;">Charlotte Hawkins</span> est nommée membre du mois ! Félicitations ! Elle gagne des informations exclusives sur le futur design du forum !
</p>
<div class="lienpratique">
<a href="http://shutdown.forums-actifs.com/f7-notice-board" target="_blank">Actualités</a> † <a href="http://shutdown.forums-actifs.com/f13-ask-and-tell" target="_blank">Questions</a> † <a href="http://shutdown.forums-actifs.com/f17-guests-saloon" target="_blank">Salon des Invités</a>
</div>
</div>
<div id="co_3" class="mon_contenu" style="display: none;">
<p>
Privilégiez les hommes et les groupes aux effectifs insuffisants !
<br/>
<br/>
Nos prédéfinis :
</p>
<div class="lienpratique">
<span style="color:#9E6A52">Wanted :: 7</span> † <span style="color:#0D0C0C;">Hunters :: 0</span> † <span style="color:#A5A890;">Citizens :: 6</span> † <span style="color:#3C8A47;">Neo Corp. :: 3</span> † <span style="color:#68A3AD;">Peacekeepers :: 3</span>
</div>
</div>
<div id="co_4" class="mon_contenu" style="display: none;">Contenu de l'Onglet</div>
</div>
</div>
</td>

<td style="width:170px">
<br/>
<br/>
<br/>
<div class="annonces">
<div class="staff">
<a class="imginfo">
<div class="opacite"><img src="http://i49.tinypic.com/hta0hs.jpg"/></div>
<span>
<table width="125" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr>
<td style="text-align: center;">
<font size="3"><font color="#9E6A52">Eryn Blake</font></font>
</td>
</tr>
<tr>
<td style="text-align: center;">
<a class="imginfo">
<img src="http://media.tumblr.com/tumblr_m7n9hvjOA21rooebp.gif" width="250" height="140px"/>
</a>
</td>
</tr>
<tr>
<td style="text-align: center;"><b>FONDATRICE - Présente</b>
</td>
</tr>
</tbody>
</table>
</span>
</a>
</div>
<div class="staff">
<a class="imginfo">
<div class="opacite">
<img src="http://img4.hostingpics.net/pics/201789iconej10.png"/>
</div>
<span>
<table width="125" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr>
<td style="text-align: center;">
<font size="3"><font color="#52A15D">Jeffrey J. Gallagher</font></font>
</td>
</tr>
<tr>
<td style="text-align: center;">
<a class="imginfo">
<img src="http://25.media.tumblr.com/tumblr_m738x06u101qfb5eeo2_500.gif" width="250" height="140px"/>
</a>
</td>
</tr>
<tr>
<td style="text-align: center;">
<b>ADMINISTRATEUR - Présent</b>
</td>
</tr>
<tr align="center"/>
</tbody>
</table>
</span>
</a>
</div>
<div class="staff">
<a class="imginfo">
<div class="opacite">
<img src="http://img15.hostingpics.net/pics/600202killypetit.png"/>
</div>
<span>
<table width="125" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr>
<td style="text-align: center;">
<font size="3">
<font color="#C4C7AF">Killy Novak</font></font>
</td>
</tr>
<tr>
<td style="text-align: center;">
<a class="imginfo">
<img src="http://media.tumblr.com/tumblr_m56f86SD3s1rq71ks.gif" width="250" height="140px"/>
</a>
</td>
</tr>
<tr>
<td style="text-align: center;"><b>GRAPHISTE - Présente</b>
</td>
</tr>
<tr align="center"/>
</tbody>
</table>
</span>
</a>
</div>
</div>
<br/>
<a href="http://www.css-actif.com">
<img src="http://files.cssactif.com/prj/prj_024.png" alt="Projet CSSActif" name="Projet CSSActif" style="margin-left:15px;"/>
</a>
</td>
</tr>
</table>

</div>

</div>

Le CSS :

Code:: /* ***************** CSS DE LA PAGE D'ACCUEIL ********************
by mimizZ | www.graph-forum.com
Droit à la modification des couleurs et du fond uniquement
****************************************************************** */

#EnTete {
position:relative;
/* largeur et hauteur de l'image */
width:95%;
height:auto;
}

#EnTete #Bande {
position:absolute;
/* positionnement de la bande par rapport à la page d'accueil */
left:131px;
top:80px;
/* largeur et hauteur de la bande */
width:505px;
height:72px;
background-image: url('http://img15.hostingpics.net/pics/565966bandeaupetit.png');
background-repeat:no-repeat;
}

.titre2 { /* TITRE "PRÉSENTATION */
position:absolute;
/* positionnement de la banche par rapport à l'image */
left:50px;
top:2px;
font-family:Marcellus SC;
text-transform:uppercase;
color:#222222;
font-weight:bold;
font-size:28px;
letter-spacing:-1px;
text-shadow:1px 1px 1px #000000;
}

a:link{ cursor: pointer;}
a, a:hover {text-decoration:none;}

.mon_contenu { /* CADRE TURQUOISE " PRÉSENTATION " */
margin-right:-4px;
margin-left:-10px;
background-color: #313828;
border-radius: 20px;
box-shadow: 0px 0px 5px #0E0F0D;
width:99%;
height:278px;
overflow:auto;
padding-bottom:8px;
padding-left:16px;
padding-right:16px;
padding-top:20px;
background-image: url("http://img15.hostingpics.net/pics/789616texturegrise.png");
background-repeat: repeat;
}

.mon_contenu p { /* ZONE DE TEXTE PRÉSENTATION */
background-color:#444D39;
border-radius: 20px;
border-bottom: 3px solid #232620;
border-left: 3px solid #232620;
border-right: 3px solid #232620;
color:#1E1F1C;
font-family:georgia;
font-size:14px;
text-align:justify;
padding:15px;
padding-top:10px;
}

.cadrebord
{ border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
width:140px;
background-color:#313828;
margin-left:15px;
margin-top:7px;
display:block;
box-shadow: 1px 0px 4px #0E0F0D;
border-right:thin solid #0E0F0D;
padding:10px;
}

.mon_onglet { /* LIENS */
font-family: Marcellus SC;
text-transform:uppercase;
font-size:14px;
text-align:center;
text-shadow:0px 0px 3px #0E0F0D;
padding: 5px;
display:block;
}

.mon_onglet:hover {
text-shadow:0px 0px 3px #000;
letter-spacing:1px;
transition:all 0.5s;/* Laissez comme ceci */
cursor:pointer;

}

.mon_onglet_selected{
letter-spacing: 2px;
font-family: Marcellus SC;
text-transform:uppercase;
font-size:14px;
text-align:center;
text-shadow:0px 0px 3px #0E0F0D;
}

.annonces { /* STAFF AVEC INFOBULLE */
width:155px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
box-shadow: 1px 0px 4px #0E0F0D;
border-left:thin solid #0E0F0D;
background-color:#313828;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:8px;
text-align:center; }

.titre3 { /* TITRE CLASSIQUE */
color:#A6B58D;
font-size:22px;
font-family: Marcellus SC;
text-transform:uppercase;
letter-spacing:-1px;
font-weight:bold;
text-align:center;
text-shadow: 1px 0px 4px #0E0F0D;}

.lienpratique {
font-family:calibri;
font-size:12px;
color:#BECFA6;
text-shadow: 0px 0px 4px #0E0F0D;
text-align:center;
padding-top:5px;
padding-bottom:5px;
align:center;
}

/*INFO-BULLE*/
a.imginfo {
position: relative;
color: #BECFA6; /* couleur de votre texte */
font-size:12px;
text-decoration: none;
margin:0px;
}

a.imginfo span {
display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
background: none; /* correction d'un bug IE */
z-index: 50; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 30px; /* on positionne notre infobulle */
left: 20px;
background-color: #313828;
color:#BECFA6;
font-size:12px;
background-image: url('http://img15.hostingpics.net/pics/789616texturegrise.png');
padding: 5px;
border: 2px solid #0E0F0D;
border-left: 3px solid #0E0F0D;
border-right: 3px solid #0E0F0D;
box-shadow: 0px 0px 5px #0E0F0D;
border-radius: 15px;
}

.clear{
clear: both;}

/* ********************* FIN DU CODE DE LA PA ********************* */

Hum j'ai bidouillé pas mal pour essayer d'obtenir un résultat concluant, du coup, le code est un peu brut et comprend quelques défauts, j'en suis consciente. Oh et puis j'oubliais, le lien vers le forum test :
http://cavenecadas.forums-actifs.net/

Bonjour,
Pour que votre page d'accueil fasse la largeur complète de votre forum, il faudrait sûrement retirer la classe forumline attachée au message d'accueil dans le template index_body si ce n'est déjà fait.

Code:: 
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
   <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>


<tr>
   <td class="row1" rowspan="3" align="center" valign="middle">
   <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
   </td>
</tr>

</table>

C'est une des premières lignes du template. Il y a toujours aussi moyen de changer la class pour une autre et lui appliquer une largeur fixe qui serait celle de votre forum.
Aussi retirer le padding du bodyline pour éviter le moindre espacement (mais je ne vous le suggère pas à cause des autres codes de votre forum, ça en changerait l'apparence).

Ensuite pour sortir les onglets du cadre, ce que je vous suggère c'est d'utiliser le positionnement css, c'est le moyen le plus simple et efficace à mon avis. Si vous avez utilisé une autre classe pour le message d'accueil comme suggéré plutôt, je vous invite à ajouter ceci dans le css de celle-ci:

Code:: position: relative;

Cela vous permettra d'utiliser plus facilement le positionnement pour placer vos onglets. Pour la suite, je ne suis absolument pas certaine que ce j'avance soit la manière la plus propre de procéder, mais je vous suggère d'utiliser les identifiants de vos onglets dans votre css. Si vous utilisiez directement le code qui s'applique à tous vos onglets, c'est-à-dire la classe ".mon_onglet" je crois que tous vos onglets s'empileraient un par-dessus l'autre. Voici donc ce que je vous propose à l'aide des identifiants.

Code:: #o_1 {
position: absolute;
top: 0px;
left: 0px;
}

Naturellement, les pixels sont à changer à votre goût, il faudra sûrement aller vers le négatif et l'opération serait à répéter pour chaque onglet. Il suffirait de reprendre le même code avec le bon identifiant en changeant la valeur "top".
Je ne certifies pas la réussite de cette entreprise, je ne me suis basée que sur mes maigres connaissances théoriques, je n'ai plus de forum de test, donc je n'ai pas pu essayer moi-même ce que j'avance. J'espère que cela vous aidera à obtenir le résultat voulu ou au moins à trouver quelques pistes pour y arriver!

Toutefois, si je peux me permettre un conseil, je ne vous suggère pas de sortir vos onglets du cadre pour les pauvres gens qui ont un petit écran. Votre "barre" de navigation empièterait par-dessus et ça nuirait à la lisibilité.

Bonsoir

Ce sujet est-il toujours d'actualité ou pouvons nous considérer ta demande comme résolue ?
Rappel : Sans nouvelle de ta part sous quatre jours, ce sujet sera archivé. Wink

Bonne soirée.

Bonsoir,

Malgré notre précédente relance, nous restons sans réponse de ta part. Je me permets donc de déplacer ton sujet. Si celui-ci n'était pas résolu, il faudra en ouvrir un autre. Wink

Bonne soirée.

PA sur toute la largeur avec Onglets

PA sur toute la largeur avec Onglets

Sujets similaires

Sujets similaires

Partenaires Or