Centrage bannière forum
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Centrage bannière forum
Bonsoir,
Je souhaiterai centrer ma bannière forum (la photo) de façon à équilibrer voir casser l'espace entre ma barre de navigation et le tableau un peu plus bas.
Auriez-vous une idée ?
Voici ma template index_body :
Merci d'avance.
Je souhaiterai centrer ma bannière forum (la photo) de façon à équilibrer voir casser l'espace entre ma barre de navigation et le tableau un peu plus bas.
- Screenshot:
Auriez-vous une idée ?
Voici ma template index_body :
- index_body:
- Code:
{JAVASCRIPT}
<style>
a {
color: inherit;
text-decoration: none;
}
.webcenter {
position: relative;
min-width: 950px;
max-width: 950px;
height: inherit;
margin: auto;
padding: 0 10px;
display: flex;
}
.flex-columna {
display: flex;
flex-direction: column;
}
.banniere {
background-image: url("https://zupimages.net/up/23/06/heeo.png");
background-repeat: no-repeat;
height: 396px;
width: 539px;
margin: auto;
text-align: center;
}
.box {
background-image: url("https://zupimages.net/up/23/02/rf03.png");
background-repeat: no-repeat;
height: 2540px;
}
.wrapper {
position: relative;
min-width: 150px;
max-width: 950px;
height: inherit;
margin: auto;
padding: 0 0px;
display: flex;
}
.box_list {
position: absolute;
background-image: url("https://zupimages.net/up/23/05/u7r2.png");
background-repeat: no-repeat;
height: 606px;
width: 808px;
top:50px;
left:75px
}
.box_punaise {
position: absolute;
background-image: url("");
background-repeat: no-repeat;
height: 106px;
width: 120px;
top:60px;
left:90px
}
.carte_box {
position: absolute;
background-image: url("https://zupimages.net/up/23/05/xvnt.png");
background-repeat: no-repeat;
height: 605px;
width: 746px;
top:620px;
left:100px
}
.photo_one {
position: absolute;
background-image: url("https://zupimages.net/up/23/05/3seh.png");
background-repeat: no-repeat;
height: 275px;
width: 275px;
top:656px;
left:620px
}
.photo_two {
position: absolute;
background-image: url("https://zupimages.net/up/23/05/ba2n.png");
background-repeat: no-repeat;
height: 275px;
width: 275px;
top:936px;
left:600px
}
.photo_three {
position: absolute;
background-image: url("https://zupimages.net/up/23/05/ps0t.png");
background-repeat: no-repeat;
height: 275px;
width: 275px;
top:980px;
left:310px
}
.photo_four {
position: absolute;
background-image: url("https://zupimages.net/up/23/05/28k7.png");
background-repeat: no-repeat;
height: 275px;
width: 275px;
top:1180px;
left:75px
}
.livre_box {
position: absolute;
background-image: url("https://zupimages.net/up/23/05/rzip.png");
background-repeat: no-repeat;
height: 535px;
width: 404px;
top:1480px;
left:75px
}
.cassette_box {
position: absolute;
background-image: url("https://zupimages.net/up/23/05/dp2l.png");
background-repeat: no-repeat;
height: 300px;
width: 480px;
top:1200px;
left:380px;
z-index: 8;
}
.dossier_box {
position: absolute;
background-image: url("https://zupimages.net/up/23/05/g741.png");
background-repeat: no-repeat;
height: 442px;
width: 458px;
top:1520px;
left:440px;
z-index: 1;
}
.recrut_box {
position: absolute;
background-image: url("https://i.imgur.com/TbJf70s.png");
background-repeat: no-repeat;
height: 474px;
width: 357px;
top: 2020px;
left:110px;
z-index: 1;
}
.journal_box {
position: absolute;
background-image: url("https://zupimages.net/up/23/05/8a8k.png");
background-repeat: no-repeat;
height: 500px;
width: 400px;
top:1970px;
left:480px;
z-index: 2;
}
</style>
<div class="banniere"></div>
<div class="webcenter flex-columna">
<div class="box">
<a href="https://o-brien.forumactif.fr/t1-hierarchie">
<div class="box_list"></div></a>
<div class="box_punaise"></div></a>
<a href="https://o-brien.forumactif.fr/f67-territoires">
<div class="carte_box"></div></a>
<a href="https://o-brien.forumactif.fr/f68-discussions">
<div class="photo_one"></div></a>
<a href="https://o-brien.forumactif.fr/f5-salle-d-arcade">
<div class="photo_two"></div></a>
<div class="photo_three"></div></a>
<div class="photo_four"></div></a>
<a href="https://o-brien.forumactif.fr/t101-codex-de-la-famille">
<div class="livre_box"></div></a>
<a href="https://o-brien.forumactif.fr/f2-annonces">
<div class="cassette_box"></div></a>
<a href="https://o-brien.forumactif.fr/f16-acces-prives">
<div class="dossier_box"></div></a>
<a href="https://o-brien.forumactif.fr/t100-sujet-candidature">
<div class="recrut_box"></div></a>
<a href="https://o-brien.forumactif.fr/f8-activites-criminelles">
<div class="journal_box"></div></a>
</div>
</div>
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN message_admin_titre -->
<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>
<!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">
<table>
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>
<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<!-- BEGIN switch_social_login -->
<td width="10%" align="center" valign="middle" class="row1">
<span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
</td>
<td width="40%" class="align_gauche row1">
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
</td>
<!-- END switch_social_login -->
</tr>
</table>
</form>
<!-- END switch_user_login_form_header -->
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td width="50%" valign="top" align="right" class="row1">
<table>
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>
<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<!-- BEGIN switch_social_login -->
<td width="10%" align="center" valign="middle" class="row1">
<span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
</td>
<td width="40%" class="align_gauche row1">
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
</td>
<!-- END switch_social_login -->
</tr>
</table>
</form>
<!-- END switch_user_login_form_footer -->
<!-- BEGIN disable_viewonline -->
<div id="qeel">
<h2>
Qui est en ligne ?
</h2>
<div class="qeel-left">
<div class="qeel-stats">
<div><i class="fas fa-users"></i>{TOTAL_USERS}</div>
<div><i class="fas fa-pencil-alt"></i>{TOTAL_POSTS}</div>
</div>
<div class="qeel-last-24">
<div class="qeel-online-content">
<table>{L_CONNECTED_MEMBERS}</table>
</div>
<h3>Dernières 24h</h3>
</div>
</div>
<div class="qeel-online">
<div class="qeel-online-stats">
{TOTAL_USERS_ONLINE}
</div>
<div class="qeel-online-content qeel-membre-connectes">
{LOGGED_IN_USER_LIST}
</div>
<h3>Actuellement en ligne</h3>
</div>
<div class="qeel-right">
<div>
<div class="qeel-welcome">
<h3>Bienvenue à</h3>
{NEWEST_USER}
</div>
<div class="qeel-discord">
<a href="https://discord.gg/Xpv7XV6KUX" target="_blank"><i class="fab fa-discord"></i><div>
Rejoindre notre <b>Discord</b>
</div></a>
</div>
</div>
<div class="qeel-links">
<a href="{U_TODAY_ACTIVE}"><i class="far fa-file"></i><div>
Sujets actifs du jour
</div></a>
<a href="/search?search_id=newposts"><i class="far fa-file"></i><div>
Derniers sujets & messages non lus
</div></a>
<a href="{U_TODAY_POSTERS}"><i class="far fa-star"></i><div>
Top 20 des posteurs du jour
</div></a>
<a href="{U_OVERALL_POSTERS}"><i class="fas fa-star"></i><div>
Top 20 des posteurs du forum
</div></a>
</div>
</div>
</div>
<script>
$('.qeel-stats').html($('.qeel-stats').html().replace(/Nous avons|membre enregistré|membres enregistrés|Nos membres ont posté un total de |messages|message/ig, ''));
$('.qeel-last-24').html($('.qeel-last-24').html().replace("Membres connectés au cours des 24 dernières heures : ", ''));
$('.qeel-online-stats').html($('.qeel-online-stats').html().replace("Il y a en tout ", ''));
$('.qeel-membre-connectes').html($('.qeel-membre-connectes').html().replace("Utilisateurs enregistrés : ", ''));
$('.qeel-welcome').html($('.qeel-welcome').html().replace("L'utilisateur enregistré le plus récent est ", ''));
</script>
<!-- END disable_viewonline -->
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
<br clear="all" />
{CHATBOX_BOTTOM}
{AUTO_DST}
Merci d'avance.
Dernière édition par Oxtran le Dim 12 Fév 2023 - 23:12, édité 4 fois
Re: Centrage bannière forum
Bonsoir,
Votre forum n'est pas accessible, nous ne voyons pas la bannière. Pouvez-vous arranger cela pour que nous puissions vous aider ?
Votre forum n'est pas accessible, nous ne voyons pas la bannière. Pouvez-vous arranger cela pour que nous puissions vous aider ?
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Centrage bannière forum
Lixyr a écrit:Bonsoir,
Votre forum n'est pas accessible, nous ne voyons pas la bannière. Pouvez-vous arranger cela pour que nous puissions vous aider ?
C'est fait.
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
Re: Centrage bannière forum
Décidément, haha merci encore.MlleAlys a écrit:Idem ^^ :
Une dernière chose, je viens tout juste de fusionner la toolbar avec ma barre de navigation en modifiant la template overhall_header et un ajout dans le css que voici :
- CSS:
- Code:
/**=========modif nav bar R-max =========**/
/**===ont replace la navbar===**/
#nav_bar_1{
left:-70px; /*position du menu par rapport a la gauche*/
position:relative;
top:-25px !important; /*ont remonte le menu de 25px*/
z-index:20003 !important; /*ont le fait passé par dessus la toolbar*/
margin: auto;
}
/**===ont rend la toolbar blue===**/
#fa_toolbar {
left: 0px; /*position de la toolbar par rapport au coté gauche*/
height: 30px; /*epaisseur de la toolbar*/
background-image: url(https://zupimages.net/up/23/02/mt6w.png); /*couleur de la toolbar*/
font-family: "Quattrocento";
font-size: 25px;
font-weight: 700;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black; /* Affiche une ombre */
margin: auto; /* Centre la toolbar */
width: 100%; /* Modifie la longueur de la toolbar */
}
#fa_left, #fa_search, #fa_share, #fa_welcome, #fa_hide {
display: none !important;
}
/* Boutons connexion / enregistrement de la toolbar */
#fa_right a[href$="login"],
#fa_right a[href$="register"] {
display: none!important;
}
/**===========fin modiff R-max ==========**/
Cependant, j'aimerai obtenir les éléments de ma barre de navigation centré sur le fond marron (que l'espace soit le même en haut et en bas) et qu'ils soient centrés par rapport au tableau, auriez-vous une idée? Merci d'avance.
Re: Centrage bannière forum
Localisez le code suivant :
Remplacez-le par :
- Code:
#nav_bar_1 {
left: -70px;
position: relative;
top: -25px!important;
z-index: 20003!important;
margin: auto;
}
Remplacez-le par :
- Code:
#nav_bar_1 {
top: 0;
position: absolute;
left: 70px;
right: 70px;
line-height: 30px;
z-index: 20003!important;
}
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
Re: Centrage bannière forum
MlleAlys a écrit:Localisez le code suivant :
- Code:
#nav_bar_1 {
left: -70px;
position: relative;
top: -25px!important;
z-index: 20003!important;
margin: auto;
}
Remplacez-le par :
- Code:
#nav_bar_1 {
top: 0;
position: absolute;
left: 70px;
right: 70px;
line-height: 30px;
z-index: 20003!important;
}
Top, merci beaucoup!
En ajoutant une border et un ombrage au css précédent, j'ai un petit soucis de barre de défilement qui apparait en bas de page horizontalement, savez-vous de quoi cela peut provenir?
CSS concerné:
- CSS:
- Code:
/**===ont rend la toolbar blue===**/
#fa_toolbar {
left: 0px; /*position de la toolbar par rapport au coté gauche*/
height: 30px; /*epaisseur de la toolbar*/
background-image: url(https://zupimages.net/up/23/02/mt6w.png); /*couleur de la toolbar*/
font-family: "Quattrocento";
font-size: 25px;
font-weight: 700;
-moz-box-shadow: 150 0 150px #000;
-webkit-box-shadow: 150 0 150px black;
border: 1px #303030 solid;
box-shadow: 0 0 5px black;
width: 100%!important;
}
Je retrouve aussi ce soucis en ouvrant l'onglet des notifications.
Re: Centrage bannière forum
La largeur de la barre de navigation est déjà à 100% de celle de l'écran, en ajoutant une bordure de chaque côté, vous la faites dépasser de l'écran, d'où la barre de défilement.
Vous pouvez mettre une bordure au dessus et au dessous si vous le souhaitez, évitez les côtés :
border-width: 1px 0px;
Vous pouvez mettre une bordure au dessus et au dessous si vous le souhaitez, évitez les côtés :
border-width: 1px 0px;
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
Re: Centrage bannière forum
MlleAlys a écrit:La largeur de la barre de navigation est déjà à 100% de celle de l'écran, en ajoutant une bordure de chaque côté, vous la faites dépasser de l'écran, d'où la barre de défilement.
Vous pouvez mettre une bordure au dessus et au dessous si vous le souhaitez, évitez les côtés :
border-width: 1px 0px;
Super merci! Avant de passer le sujet en résolu, savez-vous s'il est possible de modifier l'aspect visuel du cadre de notifcations ?
Re: Centrage bannière forum
Oui c'est possible, tout dépend de ce que vous souhaitez.
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
Re: Centrage bannière forum
MlleAlys a écrit:Oui c'est possible, tout dépend de ce que vous souhaitez.
Principalement changer les couleurs.
Re: Centrage bannière forum
- Code:
/*notifications*/
#fa_toolbar #fa_right #notif_list li {
background: black; /*fond*/
color: white; /*texte*/
}
#fa_toolbar #fa_right #notif_list li .contentText a {
color: red !important; /*liens*/
}
#fa_toolbar #fa_right #notif_list li.unread {
background: brown; /*fond non lues*/
color: yellow; /*text non lues*/
}
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
Re: Centrage bannière forum
MlleAlys a écrit:
- Code:
/*notifications*/
#fa_toolbar #fa_right #notif_list li {
background: black; /*fond*/
color: white; /*texte*/
}
#fa_toolbar #fa_right #notif_list li .contentText a {
color: red !important; /*liens*/
}
#fa_toolbar #fa_right #notif_list li.unread {
background: brown; /*fond non lues*/
color: yellow; /*text non lues*/
}
Un grand merci à vous, je passe le sujet en résolu. Passez une bonne fin de soirée!
Sujets similaires
» centrage de banniére
» Centrage bannière
» Centrage de bannière
» Centrage de bannière
» centrage des sous forums dans forum
» Centrage bannière
» Centrage de bannière
» Centrage de bannière
» centrage des sous forums dans forum
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum