Mettre la barre en haut
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
Mettre la barre en haut
Bonjour, je voudrais savoir s'il est possible de mettre la barre (là ou il y a accueil, membres, profil etc...) en haut du header.
Si cela est possible je souhaiterai que vous me disiez ce que je dois faire.
Je vous remercie
Si cela est possible je souhaiterai que vous me disiez ce que je dois faire.
Je vous remercie
Dernière édition par Miss-chocolaurine le Ven 17 Fév 2012 - 17:32, édité 1 fois
Re: Mettre la barre en haut
Bonjour
je vous invite à lire cette astuce : https://forum.forumactif.com/t301744-mettre-sa-barre-de-navigation-en-haut-du-forum?highlight=navig%2A
COrdialement.
je vous invite à lire cette astuce : https://forum.forumactif.com/t301744-mettre-sa-barre-de-navigation-en-haut-du-forum?highlight=navig%2A
COrdialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Mettre la barre en haut
Re-Bonjour j'ai un gros et énorme problème regardez : http://waterils.1fr1.net/
Je voudrais que tout soit en place et que la barre soit en haut et centré sans pour autant toucher le header.
Merci.
Je voudrais que tout soit en place et que la barre soit en haut et centré sans pour autant toucher le header.
Merci.
Re: Mettre la barre en haut
Puis-je avoir votre overall_header, ainsi que la css que vous avez mise pour la barre ?
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Mettre la barre en haut
En fait j'avais tout supprimé car la barre allait sur mon header c'est pour ça et quand j'ai tout supprimé et bien ça me fait ça.
CSS :
CSS :
- Code:
body { background-attachment: no-fixed; background-repeat: no-repeat; background-position: top center;}
.forumline1
{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border: 2px solid black;
}
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
var w_cont = $('#fa_ticker_container').width();
if (w_cont > 0)
{
$('#fa_ticker_container').width(w_cont);
/* Affichage de la liste */
$('#fa_ticker_content').css('display','block');
/* Calcul des dimensions du conteneur et des ?l?ments */
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
var height_max = h_perso;
/* Calcul de la hauteur maximale du contenur en fonction des ?l?ments et de la hauteur personnalis?e dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
/* Redimensionnement des ?l?ments et des images trop larges */
$('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
/* Redimensionnement et centrage du conteneur en mode vertical */
if (slid_vert)
{
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
}
/* Initialisation du caroussel */
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
pm.focus();
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
report.focus();
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<!-- BEGIN switch_ticker_new -->
<style>
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
</style>
<!-- END switch_ticker_new -->
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup">
<table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
<tr height="25">
<td class="catLeft">
<span class="genmed module-title">{SITENAME}</span>
</td>
</tr>
<tr height="{LOGIN_POPUP_MSG_HEIGHT}">
<td class="row1" align="left" valign="top">
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="mainoption" value="{L_LOGIN}" />
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
<span class="genmed">{LOGIN_POPUP_MSG}</span>
</td>
</tr>
</table>
</div>
<!-- END switch_login_popup -->
<a name="top"></a>
{JAVASCRIPT}
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->
<td align="center" width="100%" valign="middle">
<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />
<!-- END switch_logo_center -->
<div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="gen">{SITE_DESCRIPTION}<br /> </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td {CLASS_TABLE_TYPE} align="left" class="row1">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td {CLASS_TABLE_TYPE} align="left" class="row1">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->
<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top" width="{C1SIZE}">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
</td>
<td valign="top" width="100%">
<!-- BEGIN html_validation -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!-- END html_validation -->
Re: Mettre la barre en haut
Bonsoir,
Vous devez en premier lieu trouver et supprimer cette partie dans votre template overall_header (PA > Affichage > Templates > Général):
Trouvez cette partie dans votre template:
Et ajoutez tout de suite après ce code:
Les modifications pour les templates sont terminées. Vous devez vous rendre dans votre PA > Affichage > Images et couleurs > Couleurs > Feuille de style CSS et insérez ce code:
Il collera votre bannière en haut du forum, comme nous le voulons. Si vous voulez modifier l'apparence de la banière, vous pouvez ajouter des attributs en code en les collant en dessous de "width: 100%" :
Pour une couleur de fond:
Pour installer une bordure:
Si vous avez d'autres questions, n'hésitez pas.
Cordialement.
Vous devez en premier lieu trouver et supprimer cette partie dans votre template overall_header (PA > Affichage > Templates > Général):
- Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
Trouvez cette partie dans votre template:
- Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
Et ajoutez tout de suite après ce code:
- Code:
<div class="navig" align="{MENU_POSITION}">{GENERATED_NAV_BAR}</div>
Les modifications pour les templates sont terminées. Vous devez vous rendre dans votre PA > Affichage > Images et couleurs > Couleurs > Feuille de style CSS et insérez ce code:
- Code:
.navig {
position: absolute;
top: 0px;
width: 100%;
}
Il collera votre bannière en haut du forum, comme nous le voulons. Si vous voulez modifier l'apparence de la banière, vous pouvez ajouter des attributs en code en les collant en dessous de "width: 100%" :
Pour une couleur de fond:
- Code:
background-color: #000000;
Pour installer une bordure:
- Code:
border: 3px solid #dedede;
Si vous avez d'autres questions, n'hésitez pas.
Cordialement.
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Mettre la barre en haut
Le problème c'est que la barre a juste changé d'emplacement mais tout est resté bizarre je pense qu'il manque quelque chose en template ou quelque chose car mon image est en fond et avant elle était présenté comme header ...
Re: Mettre la barre en haut
Bonjour,
Pouvez-vous prendre une prise d'écran du problème? Et lorsque vous dites "tout est resté bizarre", que voulez-vous dire?
Et quelle image était présentée en header?
Cordialement,
Pouvez-vous prendre une prise d'écran du problème? Et lorsque vous dites "tout est resté bizarre", que voulez-vous dire?
Et quelle image était présentée en header?
Cordialement,
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Mettre la barre en haut
Ca donnne ceci alors que quand j'ai créer un forum j'avais le thème de quelqu'un d'autre et le header était en fond et apparaissait correctement.
Re: Mettre la barre en haut
Bonsoir,
Il est possible que certains bugs surviennent puisque nous avons changé plusieurs codes dans le template.
Quel est le lien de votre forum?
Cordialement,
Il est possible que certains bugs surviennent puisque nous avons changé plusieurs codes dans le template.
Quel est le lien de votre forum?
Cordialement,
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Mettre la barre en haut
Voici le lien :
http://waterils.1fr1.net/
http://waterils.1fr1.net/
Re: Mettre la barre en haut
Re,
Votre image de header est comme celle que vous voyez sur votre forum:
Je n'arrive pas à visualiser comment votre forum était avant et quel est le problème.
Parlez-vous du fait que la publicité soit en plein milieu de l'header ou que l'espace est trop petit entre la barre de navigation et la première catégorie?
Cordialement,
Votre image de header est comme celle que vous voyez sur votre forum:
- Spoiler:
Je n'arrive pas à visualiser comment votre forum était avant et quel est le problème.
Parlez-vous du fait que la publicité soit en plein milieu de l'header ou que l'espace est trop petit entre la barre de navigation et la première catégorie?
Cordialement,
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Mettre la barre en haut
Je souhaiterais qu'il n'y est ni la publicité et ni les catégories sur mon header.
Merci
Merci
Re: Mettre la barre en haut
Bonjour,
Dans la description de votre forum, entourez le texte de
Et ajoutez ce code dans votre CSS:
Vous pouvez changer le "350px" pour augmenter l'espace.
Cordialement,
Dans la description de votre forum, entourez le texte de
- Code:
<div class="espacehead"></div>
Et ajoutez ce code dans votre CSS:
- Code:
.espacehead {
margin-bottom: 350px;
}
Vous pouvez changer le "350px" pour augmenter l'espace.
Cordialement,
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Mettre la barre en haut
Ou puis-je trouver la description de mon forum ?
Et que signifie entourer le texte ?
Merci
Et que signifie entourer le texte ?
Merci
Re: Mettre la barre en haut
Bonsoir,
Pardonnez-moi, je croyais que vous le saviez. Allez dans votre
> Panneau d'administration
> Général
> Forum
> Configuration
Description du site: Mettez <div class="espacehead"> avant votre texte et </div> à la fin du texte s'y trouvant.
Pour le CSS, vous devez allez dans votre
> Panneau d'administration
> Affichage
> Images et couleurs
> Couleurs
> Feuille de style CSS
Cordialement,
Pardonnez-moi, je croyais que vous le saviez. Allez dans votre
> Panneau d'administration
> Général
> Forum
> Configuration
Description du site: Mettez <div class="espacehead"> avant votre texte et </div> à la fin du texte s'y trouvant.
Pour le CSS, vous devez allez dans votre
> Panneau d'administration
> Affichage
> Images et couleurs
> Couleurs
> Feuille de style CSS
Cordialement,
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Mettre la barre en haut
Ce n'est pas grave par contre ça ne marche pas c'est bizarre ...
Re: Mettre la barre en haut
Bonsoir,
Avez-vous bien inséré le CSS dans votre
> Panneau d'administration
> Affichage
> Images et couleurs
> Couleurs
> Feuille de style CSS?
Cordialement.
Avez-vous bien inséré le CSS dans votre
> Panneau d'administration
> Affichage
> Images et couleurs
> Couleurs
> Feuille de style CSS?
- Code:
.espacehead {
margin-bottom: 350px;
}
Cordialement.
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Mettre la barre en haut
Oui il est en effet inséré mais cela ne marche toujours pas.
Re: Mettre la barre en haut
Bonsoir,
Utilisez plutôt ce code CSS:
Cordialement.
Utilisez plutôt ce code CSS:
- Code:
#i_logo {
margin-bottom: 350px;
}
Cordialement.
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Mettre la barre en haut
Merci ça marche !
Re: Mettre la barre en haut
Merci ça marche !
Sujets similaires
» Mettre une barre en haut d'écran.
» mettre la barre de connexion en haut
» barre de navigation à mettre en haut
» Mettre la barre de navigation en haut à moiter transparente
» Mettre une barre de menu en haut du forum.
» mettre la barre de connexion en haut
» barre de navigation à mettre en haut
» Mettre la barre de navigation en haut à moiter transparente
» Mettre une barre de menu en haut du 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