Souci de bannière et background

Souci de bannière et background [Réglé]

Créations de Thèmes

Sté... Membre non connecté

Booster Minigun

Le 09/07/2009 à 23h13

#60213

Merci pour ton accueil

C'est avec plaisir que je te met ça :

header.tpl :

Caché :

Code CSS :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{L_XML_LANGUAGE}" >
    <head>
        <title>{SITE_NAME} :: {TITLE}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta name="description" content="{SITE_DESCRIPTION}" />
        <meta name="keywords" content="{SITE_KEYWORD}" />
        <meta http-equiv="Content-Language" content="{L_XML_LANGUAGE}" />
        <meta name="Robots" content="index, follow, all" />
        <meta name="classification" content="tout public" />
        <link rel="stylesheet" href="/templates/{THEME}/design.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="/templates/{THEME}/global.css" type="text/css" media="screen, print, handheld" />
        <link rel="stylesheet" href="/templates/{THEME}/generic.css" type="text/css" media="screen, print, handheld" />
        <link rel="stylesheet" href="/templates/{THEME}/content.css" type="text/css" media="screen, print, handheld" />
        <link rel="stylesheet" href="/templates/{THEME}/bbcode.css" type="text/css" media="screen, print, handheld" />
        {ALTERNATIVE_CSS}
        <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="alternate" type="application/rss+xml" href="/index/rss.php" title="RSS {SITE_NAME}" />
        <link rel="alternate" type="application/rss+xml" href="/forum/rss.php" title="RSS Forum" />
        <script type="text/javascript" src="/templates/{THEME}/images/global.js"></script>    
    </head>
    <body>
 
    <div id="header">
    <div id="logo">
    </div>    
 
    <div id="banniere">
        <img src="/templates/{THEME}/images/header_boost.png" alt="KeNoBiLerLec" />
    </div>
 
        <div id="sub_header_left">
            <h1    style="display:none;">{SITE_NAME}</h1>
        </div>
 
    </div>        
 
    <div id="menuh">
    <div id="sub_header">                        
 
        <div id="sub_header_right">    
            <a href="/news/news.php" title="Accueil du site" class="button">Accueil</a><a href="http://forum.knbll.org" title="Forum public" class="button">Forum public</a><a href="/forum/index.php" title="Forum" class="button">Forum membres</a><a href="/articles/articles.php" title="Articles" class="button">Articles</a><a href="/gallery/gallery.php" title="Galerie" class="button">Galerie</a><a href="/download/download.php" title="Téléchargements" class="button">Téléchargements</a>
        </div>
    </div>
    </div>
 
    # START compteur #
    <div id="compteur">                    
        <span class="text_strong">{L_VISIT}:</span> {compteur.COMPTEUR_TOTAL}
 
 
        <span class="text_strong">{L_TODAY}:</span> {compteur.COMPTEUR_DAY}
    </div>
    # END compteur #
 
    # START start_left #
    <div id="left_menu">
    # END start_left #

design.css :

Caché :

Code CSS :

/* --------------------------------------
        design.css
Contient les conteneur, fortement dépendant du design.
--------------------------------------*/
 
/* Corps du site 
--------------------------------------*/
*{
    margin:0;
    padding:0;
    font-size:100%;
}
body{
    background-color:#url("images/nuage.jpg"); 
    font-size:12px;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    color:#2E3B5F;
    margin:0;
    padding:0;
}
 
 
/* Rollover des boutons de la speed barre
--------------------------------------*/
div#menuh{
    background:url("images/sub_header.png") repeat-x;
    width:100%;
}
 
a.button
{
    display:block;
    float:left;
    color:#edfff0;
    height:43px;
    text-decoration:none;    
    text-align:center;
    padding:0px 20px;
    padding-top:17px;
    border-right:2px solid #fff;
}
a:hover.button
{
    background:url("images/bg_menuh_hover.png") repeat-x;
    color:#edfff0;
    text-decoration:none;
}
 
 
/* Conteneurs 
--------------------------------------*/
div#header 
{
    background:#FEFFED url("images/header.png") repeat-x;
}
 
div#banniere
{
    margin:center;
    /* margin:auto; */
    width:772px;
}
div#logo
{
    top:20px;
    left:20px;
    height:59px;
    width:200px;
    position:absolute;
    background:url("images/logo.png") no-repeat;
}
 
div#sub_header{
    height:61px;
    background:url("images/menuh.png") center no-repeat;
    margin-top:0px;
}
 
div#sub_header_left{
    height:23px;
    background:url("images/logo_titre.png") center no-repeat;
    width:100%;
    text-align:center;
    margin-top:-23px;
}
 
 
div#compteur{
    position:absolute;
    top:20px;
    right:0px;
    color:#4C6749;
}
div#left_menu{
    float:left;
    width:200px;
    margin:0;
    margin-right:0px !important;
    margin-right:-3px;
    margin-left:5px;
    padding-top:10px;    
}
 
 
div#main{
    min-width:450px;
    overflow:hidden !important;
    height:auto !important;
    overflow:visible;
    height:1%;
    padding-bottom:30px;
}
div#right_menu{
    float:right;
    width:200px;
    margin-left:0px !important;
    margin-left:-3px;
    margin-right:5px;    
    padding-top:10px;
}
div#links{
    width:96%;
    margin:auto;
    margin-top:0px;
    margin-bottom:0px;
    padding-top:2px;
    padding-bottom:4px;
    font-weight:bold;
}
div#footer{
    height:61px;
    background:#83b93a url("images/bg_footer.png") repeat-x;
    text-align:center;
    clear:both;
 
}
 
div#bg_footer{
    height:41px;
    background:url("images/footer.png") center no-repeat;
    padding-top:20px;
}
 
div#footer span{
    font-size:11px;
    color: #fff;
 
}

Les images sont dans le dossier images du theme : templatesSunGreenimages

j'ai presque rien modifier.

je test sur un serveur local (WampServer), alors est-ce que ça viens de lui ???

Est-ce que ça peut venir de la résolution de l'image aussi ?

En tout cas, merci de m'aider

Édité par Sté... Le 09/07/2009 à 23h47

Peace !

Sté... Membre non connecté

Booster Minigun

Le 17/07/2009 à 15h48

#60565

réouverture du sujet :

J'ai eu quelque problème sur la modification du thème sungreen, ReidLos m'a gentiment et grandement aider en mp.

voice mes probleme :

Sté... :

ok, voici la capture d'écran :

Caché :

</div>

j'ai mis des numéro là où il y a problème :

- N° 1 :

comme tu peux le voir y'a un trou entre le haut du menu et le bas, je ne sais pas comment le remplir.

- N° 2 :

le menu membre vient ce greffer dessus/dessous les autres menus. Quand je le déplace dans la " Configuration des liens " dans le module " Liens du site " comme ceci :<span class="formatter-hide">Caché:</span><div class="hide" onclick="bb_hide(this)"><div class="hide2">

ça me donne ça :

Caché :

- N° 3 :

pour celui ci, j'aimerai bien qu'il n'y ai plus le contour blanc, que ça fasse comme "Profil" à coté.

ça ira ?</div>

et ses réponses :

ReidLos :

n°1 : voir dans content.css tout a la fin, mini_module ( cherche une erreur entre content et bottom )

Code CSS :

.module_mini_container{
    margin-bottom:20px;
}
.module_mini_table{
    width:180px;
    text-align:center; 
    padding:7px;
    padding-top:5px;
 
}
.module_mini_top{
    width:200px;
    height:118px;
    background:url("images/row1.png") no-repeat;
    font-weight:bold;
    color:#FFFFFF;    
    padding-left:5px;
    padding-top:0px;
    margin-bottom:-95px;
    list-style-type:none;
}
/* Bordure inférieur des modules minis */
.module_mini_bottom{
    margin-top:-60px;
    height:70px;
    width:200px;
    background:url("images/module_bottom.png") no-repeat;
}

PS : ne met pas de margin-top ou autre avec des -, il faut les éviter, mieux vaut jouer dans les tpl que dans les css, de nombreux bugs graphique suivront sinon.

Donc enleve tout les - et met comme base 0 après tu pourra rêgler en fonction de tes besoin.

n°2 : Il faut que je cherche

n°3 : regarde dans le news.css

PS : je te donne pas les reponses mais des indices, pourquoi ? Tout simplement pour que tu progresse... c'est en apprenand de toi même que tu apprend

Pour le problème n°1, j'ai ensuite créé une image pour remplir le trou entre les menus

Sté... :

C'est cool, ça fonctionne !

J'ai mis ta ligne comme ceci dans le .module_mini_table{ :

Caché :

Code CSS :

/* Modules minis
--------------------------------------*/
/*Placement des mini modules */
.module_mini_container{
    margin-bottom:20px;
}
.module_mini_table{
    background:url(images/module_mini.png) repeat-y;
    width:185px;
    text-align:center; 
    padding:7px;
    padding-top:5px;
 
}
.module_mini_top{
    width:200px;
    height:118px;
    background:url("images/row1.png") no-repeat;
    font-weight:bold;
    color:#FFFFFF;    
    padding-left:5px;
    padding-top:0px;
    margin-bottom:-95px;
    list-style-type:none;
}
/* Bordure inférieur des modules minis */
.module_mini_bottom{
    margin-top:-60px;
    height:70px;
    width:200px;
    background:url("images/module_bottom.png") no-repeat;
}

</div>

il y a que le menu qui ne c'est pas rempli :

<span class="formatter-hide">Caché:</span><div class="hide" onclick="bb_hide(this)"><div class="hide2">

sais tu d'où ça viens ?</div>

Voilà où nous en sommes.

Peace !

Sté... Membre non connecté

Booster Minigun

Le 17/07/2009 à 16h57

#60570

ok ok, dsl

voilà :

Code CSS :

/* --------------------------------------
content.css
Contient les formulaires, les modules (et modules minis), et messages.
--------------------------------------*/
 
/* Entête des tableaux */
th{
padding:5px 6px;
height:29px;
color:#FFFFFF;
background:#83b93a url("images/bg_th.png") repeat-x;
text-align:left;
font-size:0.75em;
text-transform:uppercase;
}
 
/* Formulaires 
--------------------------------------*/
.fieldset_mini{
width:540px;
margin:auto;
margin-top:20px;
}
.fieldset_content{
width:95%;
margin:auto;
margin-top:20px;
}
input, textarea, optgroup, select, .xmlhttprequest_preview{
font-family:Verdana,Helvetica,Arial,sans-serif;
font-size:11px;
vertical-align:middle;
border-left:1px solid #6993AE;
border-top:1px solid #6993AE;
border-right:1px solid #2C5169;
border-bottom:1px solid #2C5169;
background-color:#DEF2FF;
color:#2E3B5F;
padding:1px 2px;
}
input:hover, textarea:hover{
border:1px solid #213D4F;
background-color:#EFF9FF; 
}
input:focus, textarea:focus{
border:1px solid #42B6FF;
background-color:#DEF2FF;
}
fieldset textarea.post{
width:90%;
display:inline;
}
textarea{
display:block;
width:94%;
margin:auto;
}
input.text{
padding:2px;
}
input.submit{
border:1px solid #5B5A5A;
color:#061729;
padding:2px;
font-weight:bold;
background:#FFFFFF url('images/form/form.gif') repeat-x;
}
input.reset{
border:1px solid #5B5A5A;
color:#E10000;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
padding:2px;
background:#FFFFFF url('images/form/form.gif') repeat-x;
}
input.reset:hover, input.submit:hover{
border:1px solid #22435F;
cursor:pointer;
color:#507CA2;
}
optgroup, select{
font-family:Verdana,Helvetica,Arial,sans-serif;
cursor:pointer;
vertical-align:middle;
width:auto;
}
optgroup{
font-weight:bold;
border:none;
border-bottom:1px solid #5B5A5A;
}
option{
padding:0px 3px;
}
legend{
padding:1px 0;
font-family:Tahoma,arial,Verdana,Sans-serif;
font-size:0.75em;
font-weight:bold;
color:#FFFFFF;
background-color:#40657C;
border:1px solid #2C5169;
padding:2px 8px;
margin-top:-0.4em;
position:relative;
text-transform:none;
line-height:1.2em;
top:0;
vertical-align:middle;
text-transform:uppercase;
}
legend{ 
top:-1.2em; 
}
* html legend{
margin:0 0 -10px -7px;
line-height:1em;
font-size:.85em;
}
fieldset{
font-family:Verdana,Helvetica,Arial,sans-serif;
margin:20px 0;
padding:6px;
border:1px solid #2C5169;
background-color:#BFD9EF;
position:relative;
}
fieldset.fieldset_submit{
margin-top:-10px;
padding-bottom:15px;
width:100%;
text-align:center;
background:none;
border:none;
}
fieldset.fieldset_submit legend{
display:none;
}
fieldset dl{
height:1%;
overflow:hidden;
margin-bottom:16px;
font-size:11px;
}
fieldset dl.overflow_visible{
overflow:visible;
}
html>body fieldset dl{
height:auto;
min-height:20px;
}
fieldset dt{
width:45%;
text-align:left;
padding-top:3px;
}
fieldset dd{
margin:0 0 0 45%;
padding:0 0 0 5px;
border:none;
vertical-align:top;
font-size:11px;
}
dt{
float:left;
width:auto;
}
dt span{ 
padding:0 5px 0 0;
}
label{
cursor:pointer;
}
fieldset label{
font-size:11px;
text-align:left;
font-weight:bold;
color:#385262;
}
dd label{
white-space:nowrap;
margin:0 10px 0 0;
font-weight:normal;
color:#FFFFFF;
}
dt span{
font-size:10px;
color:#FFFFFF;
}
label img{
vertical-align:middle;
}
fieldset dl dd label:hover{
color:#214155;
}
 
 
 
/* Messages postés par les membres (messages privés, commentaires, etc...) 
--------------------------------------*/
/* Classe du lien du pseudo des messages */
a.msg_link_pseudo{
color:#e8eaeb; 
font-weight:bold;
}
a.msg_link_pseudo:hover { 
color:#f2fbff; 
font-weight:bold;
}
/* Conteneur des messages */
.msg_position{
width:96%;
margin:auto;
background:#79ae52 url(images/border_l.gif) repeat-y left;
}
/* Case contenant l'ensemble du message */
.msg_container{
background:#c2e0a1 url(images/border_r.gif) repeat-y right;
margin-left:4px;
overflow:hidden !important;
height:auto !important;
overflow:visible;
height:1%;
clear:both;
}
/* Barre supérieur des messages */
.msg_top_l{
margin-right:0px !important;
margin-right:-3px;
width:15px;
height:28px;
background:url(images/msg_top_l.gif) no-repeat left;
float:left;
}
.msg_top_r{
margin-left:0px !important;
margin-left:-3px;
width:15px;
height:28px;
background:url(images/msg_top_r.gif) no-repeat right;
float:right;
}
.msg_top{
height:23px;
background:#c2e0a1 url(images/msg_top.gif) repeat-x;
padding-top:6px;
padding-left:6px;
}
/* Pseudo du membre */
.msg_pseudo_mbr{
width:127px;
background:#537f22;
padding:2px 4px;
float:left;
margin-right:0px !important;
margin-right:-3px;
margin-left:-127px !important;
margin-left:-64px;
margin-top:-4px;
}
/* Case au dessus du message, indique la date et les boutons d'administration */
.msg_top_row{
height:16px;
background:#537f22;
font-size:10px;
color:#e8eaeb;
margin-right:4px;
 
padding-top:4px;
padding-left:127px;
overflow:hidden !important;
height:auto !important;
overflow:visible;
height:1%;
}
/* Case des informations du membre */
.msg_info_mbr{
color:#FFFFFF;
background:#79ae52;
width:127px;
padding:4px;
float:left;
border-right:2px solid #fff;
font-size:10px;
}
/* Case contenant l'ensemble du message, infos membre + contenu */
.msg_contents_container{
margin-right:4px;
background:#79ae52;
}
/* Case du message */
.msg_contents{
background:#c2e0a1;
margin-left:135px;
padding:5px;
border-left:1px solid #092139;
}
/* Case du contents du message, évite que les images trop grandes déforme */
.msg_contents_overflow{
width:99%;
height:auto;
min-height:80px;
overflow:auto;
padding:10px 0px;
}
/* Signature du membre */
.msg_sign{
background:#c2e0a1 url(images/border_r.gif) repeat-y right;
max-height:130px;
overflow:hidden;
padding:4px;
font-size:11px;
margin-left:139px;
border-left:2px solid #fff;
}
/* Signature du membre, fixe la hauteur maximale */
.msg_sign_overflow{
height:auto !important;
height:80px;
width:99%;
max-height:80px;
max-width:99%;
overflow:hidden;
}
/* Barre inférieure des messages */
.msg_bottom_l{
margin-right:0px !important;
margin-right:-3px;
width:15px;
height:27px;
background:url(images/msg_bottom_l.gif) no-repeat left;
float:left;
}
.msg_bottom_r{
margin-left:0px !important;
margin-left:-3px;
width:15px;
height:28px;
background:url(images/msg_bottom_r.gif) no-repeat right;
float:right;
 
}
.msg_bottom{
height:22px;
background:#c2e0a1 url(images/msg_bottom.gif) repeat-x bottom;
padding-top:6px;
padding-left:6px;
 
}
 
 
/* Modules
--------------------------------------*/
/* Conteneur des modules */
.module_position{
width:96%;
margin:auto;
background:#c2e0a1 url(images/border_l.gif) repeat-y left;
}
/* Barre supérieur des modules */
.module_top_l{
margin-right:0px !important;
margin-right:-3px;
width:15px;
height:28px;
background:url(images/msg_top_l.gif) no-repeat left;
float:left;
}
.module_top_r{
margin-left:0px !important;
margin-left:-3px;
width:15px;
height:28px;
background:url(images/msg_top_r.gif) no-repeat right;
float:right;
}
.module_top{
height:22px;
background:url(images/msg_top.gif) repeat-x;
padding-top:6px;
padding-left:6px;
font-size:12px;
font-weight:bold;
}
/* Contenu des modules */
.module_contents{
background:#c2e0a1 url(images/border_r.gif) repeat-y right;
padding:10px;
margin-left:4px;
overflow:hidden !important;
height:auto !important;
overflow:visible;
height:1%;
clear:both;
}
/* Barre inférieure des modules */
.module_bottom_l{
margin-right:0px !important;
margin-right:-3px;
width:15px;
height:27px;
background:url(images/msg_bottom_l.gif) no-repeat left;
float:left;
}
.module_bottom_r{
margin-left:0px !important;
margin-left:-3px;
width:15px;
height:28px;
background:url(images/msg_bottom_r.gif) no-repeat right;
float:right;
}
.module_bottom{
height:22px;
background:url(images/msg_bottom.gif) repeat-x bottom;
padding-top:6px;
padding-left:6px;
font-size:12px;
}
/* Tableau global, utilisé dans les différents modules */
.module_table{
width:96%;
margin:auto;
border-spacing:0px;
border-collapse:collapse;
background-color:#c2e0a1;
}
 
 
/* Modules minis
--------------------------------------*/
/*Placement des mini modules */
.module_mini_container{
margin-bottom:20px;
}
.module_mini_table{
background:url(images/module_mini.png) repeat-y;
width:185px;
text-align:center; 
padding:7px;
padding-top:5px;
 
}
/* Bordure superieur des modules minis */
.module_mini_top{
width:200px;
height:118px;
background:url("images/row1.png") no-repeat;
font-weight:bold;
color:#FFFFFF;
padding-left:5px;
padding-top:0px;
margin-bottom:-95px;
list-style-type:none;
}
/* Bordure inférieur des modules minis */
.module_mini_bottom{
margin-top:-60px;
height:70px;
width:200px;
background:url("images/module_bottom.png") no-repeat;
}

Peace !

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

Sté... Membre non connecté

ReidLos Membre non connecté

Sté... Membre non connecté

ReidLos Membre non connecté

Sté... Membre non connecté

ReidLos Membre non connecté

Sté... Membre non connecté

ReidLos Membre non connecté

Sté... Membre non connecté

Sté... Membre non connecté

Sté... Membre non connecté

ReidLos Membre non connecté

Sté... Membre non connecté

ReidLos Membre non connecté

Sté... Membre non connecté