dispostition de cadres
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Re: dispostition de cadres
Bonjour,
Ce que vous indiquez est une message d'accueil. Panneau d'admin> Affichage> Généralités.
Pour le contenu du message sur votre capture d'écran, il contient un tableau de 2 colonnes, l'une d'elle avec un cadre pour les news, l'autre avec une boite à onglets. Si vous souhaitez réaliser une boite à onglets, il faudra faire attention à ne pas utiliser le même système que pour les onglets de vos catégories.
Il est interdit de reproduire un message d'accueil à l'identique, je vous invite donc à faire un schéma de ce que vous souhaitez.
Cordialement.
Ce que vous indiquez est une message d'accueil. Panneau d'admin> Affichage> Généralités.
Pour le contenu du message sur votre capture d'écran, il contient un tableau de 2 colonnes, l'une d'elle avec un cadre pour les news, l'autre avec une boite à onglets. Si vous souhaitez réaliser une boite à onglets, il faudra faire attention à ne pas utiliser le même système que pour les onglets de vos catégories.
Il est interdit de reproduire un message d'accueil à l'identique, je vous invite donc à faire un schéma de ce que vous souhaitez.
Cordialement.
Invité- Invité
Re: dispostition de cadres
je sais sa ^^
en fait ce que je veux c'est juste la disposition des cadres
(je sais pas si je m'exprime bien ^^') à la place de "new" je voulais marquer "coup de cœur" et pour les onglets "Accueil","Staff" et "Concours"
vous comprenez ?
cordialement.
en fait ce que je veux c'est juste la disposition des cadres
(je sais pas si je m'exprime bien ^^') à la place de "new" je voulais marquer "coup de cœur" et pour les onglets "Accueil","Staff" et "Concours"
vous comprenez ?
cordialement.
Re: dispostition de cadres
Il faudrait peut-être que tu changes le nom du sujet ! SI un staff passe par là ...
Re: dispostition de cadres
Melisa25 => Oui justement, nous sommes là pour ca
Vous n'avez pas à modérer les membres, merci d'en tenir compte la prochaine fois.
Cordialement.
--
Kimeko =>
Vous n'avez pas à modérer les membres, merci d'en tenir compte la prochaine fois.
Cordialement.
--
Kimeko =>
Bonjour, Afin de faciliter les recherches ultérieures, merci de respecter les règles concernant le titre de votre sujet. En effet, votre titre :
- ne doit pas être en majuscules, - ne doit pas contenir de mots trop généralistes : "aide" ; "help" ; "besoin d'aide" ; "problème"... Merci de le modifier en cliquant sur le bouton de votre premier message. A bientôt sur ForumActif |
Re: dispostition de cadres
ah d'accord désolé.
et merci pour l'info ^^
et merci pour l'info ^^
Re: dispostition de cadres
Bonsoir,
La disposition est constituée de tableaux.
Un grand tableau:
-> Une cellule A avec petit tableau pour la partie coups de cœur:
Cordialement.
La disposition est constituée de tableaux.
Un grand tableau:
- Code:
<table><tr><td>Cellule A</td><td>Cellule B</td></tr></table>
-> Une cellule A avec petit tableau pour la partie coups de cœur:
- Code:
<table><tr><td>coups de cœur</td></tr><tr><td> les sites</td></tr></table>
- Code:
<script>function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');
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';
}
}
}
}</script>
<style>
ul, li{
list-style: none;
}
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #ffffff;
border: 1px solid #ff0000;
cursor: pointer;
margin-bottom: -1px;
}
.mon_onglet:hover{
background: #b8efa1;
}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #ffffff;
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-left: 1px solid #ff0000;
border-bottom: 1px solid #ffffff;
cursor: pointer;
margin-bottom: -1px;
}
.clear{
clear: both;
}
.mon_contenu{
color: #000;
background: #ffffff;
border: 1px solid #ff0000;
padding: 10px;
margin-top: -1px;
}
#mes_contenus, #mes_onglets{
width: 400px;
}</style><div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Mon contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></ul></div>
Cordialement.
Invité- Invité
Re: dispostition de cadres
j'ai fait ce que vous m'avez dit mais je suis bloqué la T_T
voila ce que sa donne pour le moment :http://kaedeyumekawa.forumactif.com/
et voila mon code:
pouvez vous me dire ce qu'il faut que je fasse pour que "accueil " aie la même apparence que les autres onglet svp ?
Et aussi je ne comprends pas trop comment remplir "mon contenu"
cordialement.
voila ce que sa donne pour le moment :http://kaedeyumekawa.forumactif.com/
et voila mon code:
- Code:
<table><tr><td>Cellule A</td><td>Cellule B</td></tr></table>
<table><tr><td>coups de cœur</td></tr><tr><td> les sites</td></tr></table>
<script>function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');
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';
}
}
}
}</script>
<style>
ul, li{
list-style: none;
}
.mon_onglet{
background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);
text-decoration: none!important;
padding: 5px;
marging-left: 10px;
margin-right: 10px;
color:#646B82;
font-weight: bold;
border: 2px solid #A6A4A4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
. .mon_onglet:hover{
background: #b8efa1;
}
.mon_onglet_selected{
border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #A6A4A4;
-webkit-box-shadow: 0px 0px 5px #A6A4A4;
box-shadow: 0px 0px 5px#A6A4A4;
}
ul, li{
list-style: none;
}
.mon_contenu{
color: #666;
background: #b8efa1;
border: 1px solid #68ce3e;
padding: 10px;
margin: -1px;
}
#mes_contenus, #mes_onglets{
width: 400px;
} border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #A6A4A4;
-webkit-box-shadow: 0px 0px 5px #A6A4A4;
box-shadow: 0px 0px 5px#A6A4A4;
}
ul, li{
list-style: none;
}
}</style><div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Staff</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Concours</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Mon contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
</div></div></ul></div>
pouvez vous me dire ce qu'il faut que je fasse pour que "accueil " aie la même apparence que les autres onglet svp ?
Et aussi je ne comprends pas trop comment remplir "mon contenu"
cordialement.
Re: dispostition de cadres
Bonjour,
J'ai retouché votre code:
En ce qui concerne l'onglet "accueil" il fallait modifier "mon onglet_selected" pour qu'il ait la même apparence que les autres.
Pour le remplissage du contenu, c'est comme pour un message d'accueil "classique". Préparez le contenu de votre onglet "accueil" puis remplacez "mon contenu 1" par ce que vous avez préparé. Cela peut être des images, du texte, un tableau, une vidéo ...
Pour plus de précisions, je vous invite à lire ce sujet : Boite Onglet .
Cordialement.
J'ai retouché votre code:
- Code:
<table width="100%"><tr><td width="25%">
<table style="border:2px solid #A6A4A4; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;-moz-box-shadow: 0px 0px 5px #A6A4A4; -webkit-box-shadow: 0px 0px 5px #A6A4A4; box-shadow: 0px 0px 5px#A6A4A4; width:100%; text-align: center; height: 150px;"> <tr><td style="background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);text-decoration:none!important; padding: 5px; marging-left: 10px; margin-right: 10px; color:#646B82; font-weight: bold; border: 2px solid #A6A4A4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;height: 20px;">coups de cœur</td></tr><tr><td> vos coups de cœur</td></tr></table>
</td><td width="75%">
<script>function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');
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';
}
}
}
}</script>
<style>
ul, li{
list-style: none;
}
.mon_onglet{
float: left;
background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);
text-decoration: none!important;
padding: 5px;
marging-left: 10px;
margin-right: 10px;
color:#646B82;
font-weight: bold;
border: 2px solid #A6A4A4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.mon_onglet:hover{
background: #b8efa1;
}
.mon_onglet_selected{
float: left;
background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);
text-decoration: none!important;
padding: 5px;
marging-left: 10px;
margin-right: 10px;
color:#646B82;
font-weight: bold;
border: 2px solid #A6A4A4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #A6A4A4;
-webkit-box-shadow: 0px 0px 5px #A6A4A4;
box-shadow: 0px 0px 5px#A6A4A4;
}
.mon_contenu{
color: #666;
background: #fff;
border: 2px solid #A6A4A4;
padding: 10px;
margin: -1px;
height: 150px;
-moz-box-shadow: 0px 0px 5px #A6A4A4;
-webkit-box-shadow: 0px 0px 5px #A6A4A4;
box-shadow: 0px 0px 5px#A6A4A4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
#mes_contenus, #mes_onglets{
width: 100%;
border-radius: 10px;
}
</style><div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Staff</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Concours</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Mon contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
</div></div></ul></div></td></tr></table>
En ce qui concerne l'onglet "accueil" il fallait modifier "mon onglet_selected" pour qu'il ait la même apparence que les autres.
Pour le remplissage du contenu, c'est comme pour un message d'accueil "classique". Préparez le contenu de votre onglet "accueil" puis remplacez "mon contenu 1" par ce que vous avez préparé. Cela peut être des images, du texte, un tableau, une vidéo ...
Pour plus de précisions, je vous invite à lire ce sujet : Boite Onglet .
Cordialement.
Invité- Invité
Re: dispostition de cadres
Désolé ! Je recommence plus ...
Re: dispostition de cadres
oui c'est sa merci ^^
il y a juste un petit problème, lorsque je clic sur un onglet le contenu de celui ci ne s'affiche pas, il reste sur le contenu de "accueil"
pouvez vous me dire pourquoi svp ?
Et aussi le reste de ma page devient plus grand pourquoi ?
il y a juste un petit problème, lorsque je clic sur un onglet le contenu de celui ci ne s'affiche pas, il reste sur le contenu de "accueil"
pouvez vous me dire pourquoi svp ?
Et aussi le reste de ma page devient plus grand pourquoi ?
Re: dispostition de cadres
Bonjour,
Le code fonctionne pourtant, je viens de le tester de nouveau. Si ça ne fonctionne pas c'est qu'il y a une erreur quelque part. Pour la trouver j'aurais besoin de connaitre le contenu de votre message d'accueil, s'il vous plait.
Cordialement.
Le code fonctionne pourtant, je viens de le tester de nouveau. Si ça ne fonctionne pas c'est qu'il y a une erreur quelque part. Pour la trouver j'aurais besoin de connaitre le contenu de votre message d'accueil, s'il vous plait.
Cordialement.
Invité- Invité
Re: dispostition de cadres
voila le code avec le contenu:
1- https://i.servimg.com/u/f67/15/37/25/29/yuyu_b10.jpg
2- https://i.servimg.com/u/f67/15/37/25/29/v10.png
3- https://i.servimg.com/u/f67/15/37/25/29/avenir10.jpg
cordialement.
- Code:
<table width="100%"><tr><td width="25%">
<table style="border:2px solid #A6A4A4; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;-moz-box-shadow: 0px 0px 5px #A6A4A4; -webkit-box-shadow: 0px 0px 5px #A6A4A4; box-shadow: 0px 0px 5px#A6A4A4; width:100%; text-align: center; height: 150px;"> <tr><td style="background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);text-decoration:none!important; padding: 5px; marging-left: 10px; margin-right: 10px; color:#646B82; font-weight: bold; border: 2px solid #A6A4A4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;height: 20px;">coups de cœur</td></tr><tr><td> vos coups de cœur</td></tr></table>
</td><td width="75%">
<script>function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');
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';
}
}
}
}</script>
<style>
ul, li{
list-style: none;
}
.mon_onglet{
float: left;
background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);
text-decoration: none!important;
padding: 5px;
marging-left: 10px;
margin-right: 10px;
color:#646B82;
font-weight: bold;
border: 2px solid #A6A4A4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.mon_onglet:hover{
background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);
}
.mon_onglet_selected{
float: left;
background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);
text-decoration: none!important;
padding: 5px;
marging-left: 10px;
margin-right: 10px;
color:#646B82;
font-weight: bold;
border: 2px solid #A6A4A4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #A6A4A4;
-webkit-box-shadow: 0px 0px 5px #A6A4A4;
box-shadow: 0px 0px 5px#A6A4A4;
}
.mon_contenu{
color: #666;
background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);
border: 2px solid #A6A4A4;
padding: 10px;
margin: -1px;
height: 150px;
-moz-box-shadow: 0px 0px 5px #A6A4A4;
-webkit-box-shadow: 0px 0px 5px #A6A4A4;
box-shadow: 0px 0px 5px#A6A4A4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
#mes_contenus, #mes_onglets{
width: 100%;
border-radius: 10px;
}
</style><div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Staff</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Concours</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">http://i67.servimg.com/u/f67/15/37/25/29/yuyu_b10.jpg</div>
<div id="co_2" class="mon_contenu" style="display: none;">http://i67.servimg.com/u/f67/15/37/25/29/v10.png</div>
<div id="co_3" class="mon_contenu" style="display: none;">http://i67.servimg.com/u/f67/15/37/25/29/avenir10.jpg</div>
</div></div></ul></div></td></tr></table>
1- https://i.servimg.com/u/f67/15/37/25/29/yuyu_b10.jpg
2- https://i.servimg.com/u/f67/15/37/25/29/v10.png
3- https://i.servimg.com/u/f67/15/37/25/29/avenir10.jpg
cordialement.
Re: dispostition de cadres
Bonsoir,
Pour que vos images apparaissent, le code est:
Votre première image est beaucoup pus grande que les deux autres, j'ai adapté la taille du contenu, à la taille de la première image. J'arrive à changer d'onglet sur mon forum test avec le code ci-dessous:
Cordialement.
Pour que vos images apparaissent, le code est:
- Code:
<img src="adresse de l'image" />
Votre première image est beaucoup pus grande que les deux autres, j'ai adapté la taille du contenu, à la taille de la première image. J'arrive à changer d'onglet sur mon forum test avec le code ci-dessous:
- Code:
<table width="100%"><tr><td>
<table style="border:2px solid #A6A4A4; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;-moz-box-shadow: 0px 0px 5px #A6A4A4; -webkit-box-shadow: 0px 0px 5px #A6A4A4; box-shadow: 0px 0px 5px#A6A4A4; width:100%; text-align: center; height: 150px;"> <tr><td style="background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);text-decoration:none!important; padding: 5px; marging-left: 10px; margin-right: 10px; color:#646B82; font-weight: bold; border: 2px solid #A6A4A4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;height: 20px;">coups de cœur</td></tr><tr><td> vos coups de cœur</td></tr></table>
</td><td width="780">
<script>function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');
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';
}
}
}
}</script>
<style>
ul, li{
list-style: none;
}
.mon_onglet{
float: left;
background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);
text-decoration: none!important;
padding: 5px;
marging-left: 10px;
margin-right: 10px;
color:#646B82;
font-weight: bold;
border: 2px solid #A6A4A4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.mon_onglet:hover{
background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);
}
.mon_onglet_selected{
float: left;
background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);
text-decoration: none!important;
padding: 5px;
marging-left: 10px;
margin-right: 10px;
color:#646B82;
font-weight: bold;
border: 2px solid #A6A4A4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #A6A4A4;
-webkit-box-shadow: 0px 0px 5px #A6A4A4;
box-shadow: 0px 0px 5px#A6A4A4;
}
.mon_contenu{
color: #666;
background: url(http://hitskin.com/themes/14/89/92/i_back_title.png);
border: 2px solid #A6A4A4;
padding: 10px;
margin: -1px;
height: 560px;
width: 775px;
-moz-box-shadow: 0px 0px 5px #A6A4A4;
-webkit-box-shadow: 0px 0px 5px #A6A4A4;
box-shadow: 0px 0px 5px#A6A4A4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
#mes_contenus, #mes_onglets{
width: 100%;
border-radius: 10px;
}
</style><div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Staff</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Concours</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu"><img src="http://i67.servimg.com/u/f67/15/37/25/29/yuyu_b10.jpg" /></div>
<div id="co_2" class="mon_contenu" style="display: none;"><img src="http://i67.servimg.com/u/f67/15/37/25/29/v10.png" /></div>
<div id="co_3" class="mon_contenu" style="display: none;"><img src="http://i67.servimg.com/u/f67/15/37/25/29/avenir10.jpg" /></div>
</div></div></ul></div></td></tr></table>
Cordialement.
Invité- Invité
Re: dispostition de cadres
En effet merci il fonctionne ^^
Re: dispostition de cadres
Bonsoir,
Je suis ravie de voir que ça fonctionne . N'oubliez pas d'éditer votre premier message pour mettre l'icône .
Cordialement.
Je suis ravie de voir que ça fonctionne . N'oubliez pas d'éditer votre premier message pour mettre l'icône .
Cordialement.
Invité- Invité
Re: dispostition de cadres
entendu ^^
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum