Tableau Annonce + Bandes grises.

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Tableau Annonce + Bandes grises.

Message par FrenChHeaLeR Dim 24 Avr 2011 - 1:04

Bonjour,

J'ai deux questions à vous poser :

1) Comment faire pour que les différents menus de l'annonce (ici "Bienvenue !", "Le Staff",..) soient toujours centrés ?

2) Depuis que j'ai changer mon annonce, des bandes grises apparaissent sur les deux côtés de mon forum, alors qu'avant, celles-ci n'était pas présentes, et l'image de fond prenait toute la largeur du forum.

Voici ma feuille de style :

Code:
body.chatbox {
    background-color: #ffffff;
}

.liste_onglets{
margin-bottom: 5px;
padding: 4px;}

.mon_onglet{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
}
.mon_onglet:hover{
  background: #EFEFEF;
}       
.mon_onglet_selected{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
}         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 5px solid #000000;
  padding: 10px;
  margin: 10 px;
  height: 210px;}
#mes_contenus, #mes_onglets{
  height: 100%;
  width:120%;}

body { background-attachment: no-fixed; background-repeat: no-repeat; background-position: top center;}
table.forumline {border:1px dotted;}a:hover{text-transform:uppercase;}

/* code du conteneur des onglets */
#ongline {
  text-align: center;
  padding: 30px;
}
/* code s'appliquant a chacun des onglets */
#ongline a {
  text-decoration: none!important;
  color: #ffffff;
}
/* code s'appliquant a l'onglet selectionne et aux onglets survoles */
#ongline a.ccurrent,#ongline a:hover {
  border: #000000;
}
/* code s'appliquant a l'onglet selectionne */
#ongline a.ccurrent {
}

Amicalement,
Bonne soirée à vous Smile


Dernière édition par FrenChHeaLeR le Lun 25 Avr 2011 - 9:05, édité 1 fois
avatar

FrenChHeaLeR
***

Masculin
Messages : 113
Inscrit(e) le : 26/01/2011

http://lastchaosfr-wiki.web-rpg.com
FrenChHeaLeR a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par Scipion Dim 24 Avr 2011 - 12:58

Bonjour !

Essayez cette feuille CSS svp :

Code:
body.chatbox {
    background-color: #ffffff;
}

.liste_onglets{
margin-bottom: 5px;
padding: 4px;}

.mon_onglet{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
}

.mon_onglet:hover{
  background: #EFEFEF;
}   
   
.mon_onglet_selected{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
}   
     
.clear{
  clear: both;
}

.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 5px solid #000000;
  padding: 10px;
  margin: 10 px;
  height: 210px;}

#mes_contenus, #mes_onglets{
  height: 100%;
  width:120%;}

body{
background-position: top-center;
background repeat: no-repeat;}

table.forumline {border:1px dotted;}a:hover{text-transform:uppercase;}

/* code du conteneur des onglets */
#ongline {
  text-align: center;
  padding: 30px;
}

/* code s'appliquant a chacun des onglets */
#ongline a {
  text-decoration: none!important;
  color: #ffffff;
}

/* code s'appliquant a l'onglet selectionne et aux onglets survoles */
#ongline a.ccurrent,#ongline a:hover {
  border: #000000;
}

/* code s'appliquant a l'onglet selectionne */
#ongline a.ccurrent {
}
Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par FrenChHeaLeR Dim 24 Avr 2011 - 13:28

Bonjour,

Merci beaucoup, ma question n°1 tiens toujours, par contre Wink

EDIT : Ah non :/ Sur mon pc, je vois pas une seule image .. Mais un quart d'une deuxième (à droite) :/

Amicalement,
Bonne journée à vous Smile
avatar

FrenChHeaLeR
***

Masculin
Messages : 113
Inscrit(e) le : 26/01/2011

http://lastchaosfr-wiki.web-rpg.com
FrenChHeaLeR a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par Scipion Dim 24 Avr 2011 - 13:33

Je n'ai pas compris, quel est le problème svp?

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par FrenChHeaLeR Dim 24 Avr 2011 - 13:42

Voilà ce que ça m'affiche :

Tableau Annonce + Bandes grises. Bug_fo10
avatar

FrenChHeaLeR
***

Masculin
Messages : 113
Inscrit(e) le : 26/01/2011

http://lastchaosfr-wiki.web-rpg.com
FrenChHeaLeR a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par Scipion Dim 24 Avr 2011 - 14:45

Essayez ceci svp :

Code:
body.chatbox {
    background-color: #ffffff;
}

.liste_onglets{
margin-bottom: 5px;
padding: 4px;}

.mon_onglet{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
}

.mon_onglet:hover{
  background: #EFEFEF;
}   
   
.mon_onglet_selected{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
}   
     
.clear{
  clear: both;
}

.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 5px solid #000000;
  padding: 10px;
  margin: 10 px;
  height: 210px;}

#mes_contenus, #mes_onglets{
  height: 100%;
  width:120%;}

body {
background-position: top center;
background repeat: no repeat;
}

table.forumline {border:1px dotted;}a:hover{text-transform:uppercase;}

/* code du conteneur des onglets */
#ongline {
  text-align: center;
  padding: 30px;
}

/* code s'appliquant a chacun des onglets */
#ongline a {
  text-decoration: none!important;
  color: #ffffff;
}

/* code s'appliquant a l'onglet selectionne et aux onglets survoles */
#ongline a.ccurrent,#ongline a:hover {
  border: #000000;
}

/* code s'appliquant a l'onglet selectionne */
#ongline a.ccurrent {
}
Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par FrenChHeaLeR Dim 24 Avr 2011 - 14:58

Voilà ce que ça donne :/

Une bande de chaque côté maintenant :s
Tableau Annonce + Bandes grises. Bug_fo10[/url]
avatar

FrenChHeaLeR
***

Masculin
Messages : 113
Inscrit(e) le : 26/01/2011

http://lastchaosfr-wiki.web-rpg.com
FrenChHeaLeR a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par Scipion Dim 24 Avr 2011 - 15:26

Pouvez-vous me donner svp le lien de l'image de fond qui se répète?

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par FrenChHeaLeR Dim 24 Avr 2011 - 15:29

avatar

FrenChHeaLeR
***

Masculin
Messages : 113
Inscrit(e) le : 26/01/2011

http://lastchaosfr-wiki.web-rpg.com
FrenChHeaLeR a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par Scipion Dim 24 Avr 2011 - 15:50

J'ai installé votre image (1024 x 768 pixels) en fond de page à pas fixe et je trouve qu'elle est tout à fait parfaite, c'est à dire qu'elle ne se répète pas, avec ou sans votre feuille CSS. Faites le test svp.

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par FrenChHeaLeR Dim 24 Avr 2011 - 15:51

Pour ma part, j'ai cette image en fond de page fixe, mais j'ai ce problème .. Et pourtant, avant que je modifie mon annonce, je n'avais pas ça :/
avatar

FrenChHeaLeR
***

Masculin
Messages : 113
Inscrit(e) le : 26/01/2011

http://lastchaosfr-wiki.web-rpg.com
FrenChHeaLeR a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par Scipion Dim 24 Avr 2011 - 16:01

Dans ce cas, il faut essayer de procéder différemment dans la mesure du possible. Quel est le contenu de cette annonce et où devrait-elle s'afficher ?

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par FrenChHeaLeR Dim 24 Avr 2011 - 16:16

Mon annonce :

Code:
<script src="http://lastchaosfr-wiki.web-rpg.com/h1-test_annonce"></script><table text-align:center><tr><td class="liste_onglets"><div id="mes_onglets">
        <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Bienvenue sur le forum !</span>
            <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Le Staff</span>
  <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Sites Web à visiter !</span>
            <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Anniversaires</span></td></tr>
    <tr><td>
            <div class="clear"><div id="mes_contenus">
        <div id="co_1" class="mon_contenu"></br></br></br><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 12px; line-height: normal">Bienvenue sur le forum du Wiki de LastChaos FR !! </br></br>Avant de poster, merci de vous <a href="http://lastchaosfr-wiki.web-rpg.com/post?f=7&mode=newtopic" class="postlink">présenter</a></br></br>

Wiki Lc.Fr :</br></br>

<a href="http://lastchaosfr.wetpaint.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img4.hostingpics.net/pics/177043testchristie.jpg" border="0" alt="" /></a></span></br></br></br></br>

<span style="font-size: 6px; line-height: normal">©️ Toute reproduction de ce forum, partielle ou intégrale, est formellement interdite, </br>d'après l'article "Respect des droits de propriété et marques" des Conditions</br> Générales d'Utilisations de ForumActif.com</span>

</div></div>
        <div id="co_2" class="mon_contenu" style="display: none;"><center><a href="http://lastchaosfr-wiki.web-rpg.com/g1-administrateur" class="postlink" target="_blank" rel="nofollow"><font color="#ff0000">Administrateur</font></a> :</br></br></br>

- <a href="http://lastchaosfr-wiki.web-rpg.com/u1" class="postlink" target="_blank" rel="nofollow"><font color="#ff0000">Christie60330</font></a> : Fondateur du forum, il gère le forum dans son intégralité. <a href="http://lastchaosfr-wiki.web-rpg.com/privmsg?mode=post&u=1" class="postlink" target="_blank" rel="nofollow"><img src="http://2img.net/i/fa/subsilver/icon_pm.gif" border="0" alt="" /></a></br>
- <a href="http://lastchaosfr-wiki.web-rpg.com/u30" class="postlink" target="_blank" rel="nofollow"><font color="#ff0000">BotPM</font></a> : Ce compte sert uniquement à envoyer les messages de bienvenue, ainsi que les avertissements.</br></br>

<a href="http://lastchaosfr-wiki.web-rpg.com/g7-moderateurs" class="postlink" target="_blank" rel="nofollow"><font color="#FAB132">Modérateurs</font></a> :</br></br>

- <a href="http://lastchaosfr-wiki.web-rpg.com/u15" class="postlink" target="_blank" rel="nofollow"><font color="#FAB132">Calina</font></a>: Fondatrice du groupe Solidarité, elle gère la section du même nom. <a href="http://lastchaosfr-wiki.web-rpg.com/privmsg?mode=post&u=15" class="postlink" target="_blank" rel="nofollow"><img src="http://2img.net/i/fa/subsilver/icon_pm.gif" border="0" alt="" /></a></br></br>

<a href="http://lastchaosfr-wiki.web-rpg.com/g4-representants" class="postlink" target="_blank" rel="nofollow"><font color="#996600">Représentants</font></a> :</br></br>

- <a href="http://lastchaosfr-wiki.web-rpg.com/u22" class="postlink" target="_blank" rel="nofollow"><font color="#996600">GuXz</font></a> : Représentant sur le serveur Katar. <a href="http://lastchaosfr-wiki.web-rpg.com/privmsg?mode=post&u=22" class="postlink" target="_blank" rel="nofollow"><img src="http://2img.net/i/fa/subsilver/icon_pm.gif" border="0" alt="" /></a></br>
- <a href="http://lastchaosfr-wiki.web-rpg.com/u14" class="postlink" target="_blank" rel="nofollow"><font color="#996600">cedric</font></a> : Représentant sur le serveur Délum. <a href="http://lastchaosfr-wiki.web-rpg.com/privmsg?mode=post&u=14" class="postlink" target="_blank" rel="nofollow"><img src="http://2img.net/i/fa/subsilver/icon_pm.gif" border="0" alt="" /></a></center></br></div>
 <div id="co_3" class="mon_contenu" style="display: none;"><center></br></br></br></br></br></br></br></br>Aucun pour le moment.</center></div>
        <div id="co_4" class="mon_contenu" style="display: none;"><center></br></br></br><img src="http://www.1jour.net/images_defilantes/bebe37.gif" border="0" alt="" />
<label id="Compte"></label>
<script type="text/JavaScript">
var Affiche=document.getElementById("Compte");
function Rebour() {
var date1 = new Date();
var date2 = new Date ("Apr 25 00:00:00 2011");
var sec = (date2 - date1) / 1000;
var n = 24 * 3600;
if (sec > 0) {
j = Math.floor (sec / n);
h = Math.floor ((sec - (j * n)) / 3600);
mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
Affiche.innerHTML = "Il reste " + j +" jours, "+ h +" heures, "+ mn +" minutes et "+ sec + " secondes ";
window.status = "Il reste " + j +" jours, "+ h +" heures, "+ mn +" minutes et "+ sec + " secondes ";
}
tRebour=setTimeout ("Rebour();", 1000);
}
Rebour();
</script> avant l'anniversaire de Calina !<img src="http://www.1jour.net/images_defilantes/bebe37.gif" border="0" alt="" /></br></br><img src="http://www.1jour.net/images_defilantes/bebe37.gif" border="0" alt="" />
<label id="Comptes"></label>
<script type="text/JavaScript">
var Affiche=document.getElementById("Comptes");
function Rebour() {
var date1 = new Date();
var date2 = new Date ("May 2 00:00:00 2011");
var sec = (date2 - date1) / 1000;
var n = 24 * 3600;
if (sec > 0) {
j = Math.floor (sec / n);
h = Math.floor ((sec - (j * n)) / 3600);
mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
Affiche.innerHTML = "Il reste " + j +" jours, "+ h +" heures, "+ mn +" minutes et "+ sec + " secondes ";
window.status = "Il reste " + j +" jours, "+ h +" heures, "+ mn +" minutes et "+ sec + " secondes ";
}
tRebour=setTimeout ("Rebour();", 1000);
}
Rebour();
</script> avant l'anniversaire d'Elem Powaa !<img src="http://www.1jour.net/images_defilantes/bebe37.gif" border="0" alt="" /></br></br><img src="http://www.1jour.net/images_defilantes/bebe37.gif" border="0" alt="" />
<label id="Comptess"></label>
<script type="text/JavaScript">
var Affiche=document.getElementById("Comptess");
function Rebour() {
var date1 = new Date();
var date2 = new Date ("May 7 00:00:00 2011");
var sec = (date2 - date1) / 1000;
var n = 24 * 3600;
if (sec > 0) {
j = Math.floor (sec / n);
h = Math.floor ((sec - (j * n)) / 3600);
mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
Affiche.innerHTML = "Il reste " + j +" jours, "+ h +" heures, "+ mn +" minutes et "+ sec + " secondes ";
window.status = "Il reste " + j +" jours, "+ h +" heures, "+ mn +" minutes et "+ sec + " secondes ";
}
tRebour=setTimeout ("Rebour();", 1000);
}
Rebour();
</script> avant l'anniversaire de Baragh !<img src="http://www.1jour.net/images_defilantes/bebe37.gif" border="0" alt="" /></center></div></div>
    </div></div></td></tr></table>

La page html citée dans mon annonce :

Code:
function changeOnglet(_this){ var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('span'); for(var i = 0; i < getOnglets.length; i++){ if(getOnglets[i].id){ if(getOnglets[i].id == _this.id){ getOnglets[i].className = 'mon_onglet_selected'; document.getElementById('c' + _this.id).style.display = 'block'; } else{ getOnglets[i].className = 'mon_onglet'; document.getElementById('c' + getOnglets[i].id).style.display = 'none'; } } } }

Je remet le CSS du début en attendant Smile
avatar

FrenChHeaLeR
***

Masculin
Messages : 113
Inscrit(e) le : 26/01/2011

http://lastchaosfr-wiki.web-rpg.com
FrenChHeaLeR a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par Invité Dim 24 Avr 2011 - 16:52

Bonjour,
FrenChHeaLeR a écrit:Bonjour,

J'ai deux questions à vous poser :

1) Comment faire pour que les différents menus de l'annonce (ici "Bienvenue !", "Le Staff",..) soient toujours centrés ?
Pour cela il faut modifier ceci dans votre CSS:
Code:
.liste_onglets{
margin-bottom: 5px;
padding: 4px;
}
Ajoutez devant l'accolade - "}" :
Code:
text-align: center;
Cordialement.

Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par FrenChHeaLeR Dim 24 Avr 2011 - 17:24

Bonjour,

Merci beaucoup, il ne reste plus que ma deuxième question maintenant ^^
avatar

FrenChHeaLeR
***

Masculin
Messages : 113
Inscrit(e) le : 26/01/2011

http://lastchaosfr-wiki.web-rpg.com
FrenChHeaLeR a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par Invité Dim 24 Avr 2011 - 17:57

Le problème vient peut-être de cette partie là :
Code:
#mes_contenus, #mes_onglets{
  height: 100%;
  width:120%;}
Essayez de remplacer le 120% par 100% .

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par FrenChHeaLeR Dim 24 Avr 2011 - 18:07

Bonjour,

Pas de changement.
avatar

FrenChHeaLeR
***

Masculin
Messages : 113
Inscrit(e) le : 26/01/2011

http://lastchaosfr-wiki.web-rpg.com
FrenChHeaLeR a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau Annonce + Bandes grises.

Message par FrenChHeaLeR Lun 25 Avr 2011 - 9:05

Je mets en "Résolu", car en agrandissant l'image, celle-ci prend toute la largeur du forum (mais une partie en bas est cachée du coup ^^
avatar

FrenChHeaLeR
***

Masculin
Messages : 113
Inscrit(e) le : 26/01/2011

http://lastchaosfr-wiki.web-rpg.com
FrenChHeaLeR a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum