Jiben
{ Membre actif }
Messages : 314
| Bonjour a vous, Bon voici je voudrais faire une barre de navigation comme vous placer juste au dessus du logo. Capture d'écran :Donc pour arrivé a ceci, j'ai était touché a mon template. Mais voici le résultat que j'ai obtenu mais sa ne ressemble pas a vous. Quand je descend ma page j'ai la barre qui descend aussi :s Capture d'écran de ce que j'ai obtenu : Bon j'ai modifié le template overall_header_new - Spoiler:
- Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- BEGIN meta_emulate_ie7 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <!-- END meta_emulate_ie7 --> <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 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="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> <!-- BEGIN switch_ticker --> <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" /> <!-- END switch_ticker --> <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 = false, logInBackgroundClass = false; <!-- END switch_login_popup --> //]]> </script>
{GREETING_POPUP} <!-- BEGIN hitskin_preview --> <style type="text/css"> #hitskin_preview { margin: 0; padding: 0; position: fixed; top: 0; left: 0; width: 100%; height: 65px; background: url('http://2img.net/i/fa/hitskin/hitskin_bar.png') repeat-x left -15px; color: #fff; } * html #hitskin_preview { /* Fix for IE6 since it doesn't implement fixed positionning */ position: absolute; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop); z-index: 2; background: transparent url('http://2img.net/i/fa/hitskin/hitskin_bar-ie6.gif') repeat-x left -15px; } * html { /* Gunlaug's Speed fix for the above positionning fix. Sorry for the fix for the fix */ background: #fff url(foo) fixed; } #hitskin_preview h1 { float: left; margin: 3px 0 0 0; padding: 0 0 0 10px; font: italic normal 25px Arial,sans serif; color: #fff; } #hitskin_preview h1 img { vertical-align: middle; } #hitskin_preview em { color: #7CBA2C; font-weight: bold; } #hitskin_preview a { color: #fff; } #hitskin_preview a:hover { text-decoration: underline; }
#hitskin_preview .content { text-align: right; } #hitskin_preview .content p { margin: 4px 1em 0px 1em; font-size: 13px; line-height: 1.8em; color: #fff; font-weight: bold; } #hitskin_preview .content p span { font-weight: normal; font-size: 0.8em; } body { margin-top: 40px !important; } {hitskin_preview.HITSKIN_RTL_CSS} </style> <!-- END hitskin_preview --> </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}
<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} <div id="topbar"><table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}"> <tr> <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table></div> <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> <td align="center" width="100%" valign="middle"> <div class="maintitle">{MAIN_SITENAME}</div>
<span class="gen">{SITE_DEscriptION} </span> </td> <!-- END switch_logo_left -->
<!-- BEGIN switch_logo_center --> <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>
<div class="maintitle">{MAIN_SITENAME}</div>
<span class="gen">{SITE_DEscriptION}</span> </td> <!-- END switch_logo_center -->
<!-- BEGIN switch_logo_right --> <td align="center" width="100%" valign="middle"> <div class="maintitle">{MAIN_SITENAME}</div>
<span class="gen">{SITE_DEscriptION} </span> </td> <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>
<div style="clear: both;"></div>
<!-- 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 --> Puis voici mon CSS :- Spoiler:
- Code:
-
#topbar { position: fixed; top: 0; left: 0; width : 100%; border-bottom: 2px solid #330000; background-color: #660000; color: #aaffff; } body { padding-top: 30px; }
.mainmenu{ font-size : 10px; color : #5f4037; }
a.mainmenu{ text-decoration: none; color : #5f4037; background-color: #D69198; border-bottom: 1px solid #5f4037; filter:alpha(opacity=50); -moz-opacity:0.5;opacity: 0.5; }
a.mainmenu:hover{ text-decoration:none; color : #5f4037; background-color : #F2C4C9; border-bottom: 1px solid; color : #5f4037; filter:alpha(opacity=100); -moz-opacity:0.5;opacity: 1; }
/* Soulignement des liens en pointillés lors du survol */ a:hover {text-decoration: none !important; border-bottom : 1px dotted }
/* enleve le soulignement en dessous des lien */ a { text-decoration: none !important; font-variant: small-caps; }
/* Décoration du spoiler ouvert */ .spoiler_content{ padding: 3px; color: #444444; /* couleur du texte */ }
/* Décoration du spoiler fermé*/ .spoiler_closed{ padding: 3px; border:2px #777777 dotted; /* bordure */ color: #444444; /* couleur du texte */ }
/* Décoration de la citation */ .quote { padding: 3px; border:2px #444444 inset; /* bordure */ color: #777777; /* couleur du texte */ -border-radius: 4px; /* tous les côtés sont arrondis */ -moz-border-radius: 4px; /* tous les côtés sont arrondis */ -webkit-border-radius: 4px; /* tous les côtés sont arrondis */ }
/* Décoration du code */ .code { padding: 3px; border:1px #ffffff ; /* bordure blanche en traits peu épais */ -border-radius: 4px; /* tous les côtés sont arrondis */ -moz-border-radius: 4px; /* tous les côtés sont arrondis */ -webkit-border-radius: 4px; /* tous les côtés sont arrondis */ color: #0044bb; /* couleur du texte blanche */ }
/* Forme autour de mes catégories de mon forum*/ .ajout_haut { background-color: transparent; background-image: url(http://nsa10.casimages.com/img/2010/01/14/100114065535545189.png); background-repeat: no-repeat; width: 900px; height: 32px; border: none; } .ajout_bas { background-color: transparent; background-image: url(http://nsa10.casimages.com/img/2010/01/14/100114065535545189.png); background-repeat: no-repeat; width: 900px; height: 26px; border: none; } .forumline { background-color: transparent; background-image: url(http://nsa10.casimages.com/img/2010/01/14/100114070515465818.png); background-repeat: repeat-y; /* L'image se répète uniquement sur la hauteur*/ padding-left: 5px; padding-right: 5px; /* Il vaut mieux ajouter quelques pixels de marge intérieure, sinon le forum est collé à l'image intérieure, et ça ne rend pas bien. Faites le test sinon !*/ border: none; }
Je vous remercie de votre aide Cordialement Jiben | | |
|
Jiben
{ Membre actif }
Messages : 314
| A locker svp
merci d'avance | | |
|
Kaiji
Blanche-Neige
Messages : 5578
| |