Sujets similaires

Sujet: Un probleme de barre hitskinienne à résoudre ! Lun 11 Oct 2010, 14:14

Coucou,
J'ai un petit probleme !
Voilà ma barre hitskinienne a un petit probleme car elle est décalé, la barre de navigation n'est pas au centre et je voudrai un qu'elle est une plus grande hauteur =)
Voici un screen en ce moment:
http://files.webopload.net/2134929136.11.jpg
Ici, voici les repérages des changements à faire:
http://files.webopload.net/207236137.2.jpg
Et voici au final ce que je veux:
http://files.webopload.net/1349794072.3.jpg

A savoir que les bords en bas a gauche et bas à droite sont arrondi et je voudrai aussi mettre une bordure que je peux modifier à la couleur que je souhaite.

Voici mon template overall_header:

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}>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<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" />
{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>

<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>


<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />



<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>


<script type="text/javascript">//<![CDATA[
$(document).ready(function(){

pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
pm.focus();


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();


ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});

});


var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;

//]]>
</script>
{GREETING_POPUP}

<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>



<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>

</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<center><table class="navtop" width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td valign="top"><div style="margin-left : 20%">{GENERATED_NAV_BAR}</div>
</td></tr></tbody></table></center><br/>

<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>



<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>


<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>

<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>

<td align="center" width="100%" valign="middle">

<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />

<div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="gen">{SITE_DESCRIPTION}<br />  </span>
</td>

<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>

</tr>
</table>

<div style="clear: both;"></div>


<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;">

<li>{switch_ticker.ticker_row.ELEMENT}</li>

</ul>
</div>
</td>
</tr>
</table>
</div>



<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">

<div>{switch_ticker.ticker_row.ELEMENT}</div>

</div>
</div>
</div>
</td>
</tr>
</table>
</div>


<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}">

{giefmod_index1.MODVAR}

<div style="height:{SPACE_ROW}px"></div>


</div>
</td>
<td valign="top" width="100%">

</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

et mon css:

Code:: /*--- Espace des côtés du forum ---*/
.bodyline {padding: 0px;}

#i_logo{
margin-bottom:-46px;}

/*--- ARRONDI DU FORUM ---*/

/*--- zone de texte ---*/
textarea, .textarea.post, input.post {
-moz-border-radius:10px;
}

/*--- cadre du forum ---*/
.bodyline {
-moz-border-radius:10px;
}

/*--- catégories ---*/
.forumline{
background-color: #COULEUR;
-moz-border-radius: 10px ;
border: 3px #COULEUR solid;
}

/*--- Fond des Messages ---*/
.postbody {
background-image: url('http://swlrpg.fr/forum/templates/creamywhite/images/design/fondforum.jpg');
}

/*--- CONFIGURATION DES FORUMS ---*/

/*--- Cette partie correspond à la description du forum ---*/
.forum-description {
margin: auto;
padding: 10px;
color: #FFFFFF;
width: 80%;
border: 1px solid #FFFFFF;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
font-size: 12px;
}

/*--- Cette partie correspond à l'onglet "X messages dans X sujets" ---*/
.forum-stats {
-moz-border-radius-topleft: 14px;
-moz-border-radius-topright: 14px;
-webkit-border-top-right-radius: 14px;
-webkit-border-top-left-radius: 14px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom: 0 none !important;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
color: #FFFFFF;
font-size: 11px;
font-style: italic;
height: 14px;
left: 125px;
padding: 3px;
position: relative;
text-align: center;
width: 200px;
}

/*--- Cette partie correspond à l'affichage des sous-forums ---*/
.forum-sousforum {
color: #FFFFFF;
border: 1px solid #FFFFFF;
border-top: 0px !important;
-moz-border-radius-bottomleft: 14px;
-moz-border-radius-bottomright: 14px;
-webkit-border-bottom-right-radius: 14px;
-webkit-border-bottom-left-radius: 14px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin: auto;
padding: 4px;
color: #FFFFFF;
width: 50%;
text-align: center;
height: 14px;
font-size: 11px;
}

/*--- FOND Chatbox ---*/
body.chatbox {
background-image: url('http://i36.servimg.com/u/f36/14/96/04/77/planet11.jpg');
background-repeat:no-repeat;
background-position:left top;
}

/*--- Volet PAGE D'ACCUEIL ---*/
#menu ul
{margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;}

#menu li
{float: left;
padding: 0px;
background-image: url('http://i36.servimg.com/u/f36/14/96/04/77/sans_t10.jpg');
}

#menu li a
{display: block;
width: 100px;
color: #164782; /* couleur du texte */
padding: 5px;
text-decoration: none;}

#menu li a:hover /* couleur du texte au passage de la souris */
{color: #080A87;}

#menu ul li ul /* cacher les sous-catégories */
{display: none;}

#menu ul li:hover ul
{display: block;}

#menu li:hover ul li
{float: none;}

#menu li ul
{position:absolute;}

/*--- Liens avec ombre ---*/
a {
text-shadow: 1px 1px 7px #313840;
}

/*--- EFFET CATEGORIE ---*/
a.forumlink:link, a.forumlink:visited {
font-family: georgia;
text-transform : uppercase;
text-align: center;
font-size: 100%;
border-bottom: 5px solid #couleur;
color: #couleur;
letter-spacing: 1px;
display: block;
-moz-border-radius:10px;
}
/*--- survol ---*/
a.forumlink:hover, a.forumlink:hover:visited {
background-image: url("url de votre image");
color: #couleur;
text-align: center;
display: block;
border-bottom: 5px solid #couleur;
-moz-border-radius:10px;
}

/*--- Fond des Messages ---*/
.postbody {
background-image: url('http://swlrpg.fr/forum/templates/creamywhite/images/design/fondforum.jpg');
}

/*---PAGE D'ACCUEIL ---*/
a {
color:#164782;
text-decoration:none;
font-size:12px;
}

.contexte {
background-image:url("http://img517.imageshack.us/img517/9985/paasupprimer03.jpg");
width:420px;
height:82px;
color:#ffffff;
overflow:auto;
}

.annonce {
background-image:url("http://img834.imageshack.us/img834/2661/paasupprimer10.jpg");
width:255px;
height:87px;
color:#ffffff;
overflow:auto;
}

.multimedia {
background-image:url("http://img839.imageshack.us/img839/1244/paasupprimer13.jpg");
width:253px;
height:81px;
color:#ffffff;
overflow:auto;
}

.lien {
background-image:url("http://img294.imageshack.us/img294/9290/paasupprimer07.jpg");
width:147px;
height:99px;
color:#ffffff;
overflow:auto;
}

.lien a{
text-decoration:none;
color:#ffffff;
font-size:15px;
}

.lien a:hover {
background-color:#071054;
}

.partenaire {
background-image:url("http://img830.imageshack.us/img830/6961/paasupprimer18.jpg");
width:532px;
height:38px;
}

.liste {
background-image:url("http://img338.imageshack.us/img338/8279/paasupprimer17.jpg");
width:147px;
height:50px;
}

.admin {
background-image:url("http://img444.imageshack.us/img444/1126/paasupprimer22.jpg");
width:279px;
height:76px;
}

.admin2 {
background-image:url("http://img821.imageshack.us/img821/8935/paasupprimer26.jpg");
width:279px;
height:20px;
}

span.infobulle {
padding-top:2px;
}

span.infobulle em {
display:none;
}

span.infobulle:hover {
background: none;
z-index: 999;
cursor: ne-resize;
position: relative;
text-decoration:none;
border: 0;
}

span.infobulle:hover em {
font-style: normal;
font-size: 10px;
color:#000 !important;
padding: 3px;
display: block;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px ;
background-color: #111821;
border: 1px solid #575757;
top: -2px;
left: -2px;
cursor: ne-resize! important;
}

.recherche {
background-image:url("http://img228.imageshack.us/img228/88/paasupprimer25.jpg");
width:291px;
height:71px;
color:#ffffff;
}

.copyright {
background-image:url("http://img13.imageshack.us/img13/324/paasupprimer19.jpg");
width:147px;
height:21px;
color:#ffffff;
overflow:auto;
}

.navtop {
top : 0px;
position : fixed ;
width : 100% ;
background-color : #19468A ;
border-bottom : 3px STYLE #000000
etc
}

Merci d'avance !

Bonjour ^^

Essaie de rajouter ceci dans ton css :

Code:: Body {
margin-top: -XXpx;
}

En modifiant XX bien sûr ^^

Ca c'est pour rapprocher le bord du forum au bord de ta barre ensuite, pour épaissir ta barre et faire les bords arrondis et la bordure de couleur, essaie ceci (toujours dans ton css):

Code:: .navtop {
top : 0px;
position : fixed ;
width : 100% ;
background-color : #19468A ;
border-bottom : 1px solid #XXXXXX;
height:XXpx;
-border-radius: Xpx Xpx Xpx Xpx;
-moz-border-radius: Xpx Xpx Xpx Xpx;
-webkit-border-radius: Xpx Xpx Xpx Xpx;
}

En modifiant toujours les X.

Par contre, je la vois centrée ta barre '_'

Coucou,
merci !
tout est bon, sauf qu'il y a toujours un petit décalage tout à gauche ><

Je crois que j'ai compris ^^

Essaie dans ton template, de remplacer ceci :

Code:: <center><table class="navtop" width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td valign="top"><div style="margin-left : 20%">{GENERATED_NAV_BAR}</div></td></tr></tbody></table>

Par celà :

Code:: <center><table class="navtop" width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td valign="top">{GENERATED_NAV_BAR}</td></tr></tbody></table>

Ah !!!Merci infiniment !!!!!!!!!!!!!!!!!!!!!
Le probleme est résolu !
Un grand merci Imari pour toute l'aide fourni !

Un probleme de barre hitskinienne à résoudre !

Un probleme de barre hitskinienne à résoudre !

Sujets similaires

Sujets similaires

Partenaires Or