Forum

bonjour a tous .

Bon voila j'ai reussi a faire une bannière tous seul et un fond :



http://www.fun-animes.fr/news/news.php



maintenant j'ai deux souci :



1==> ma bannière n'est pas correctement centré

2==> Second malgré que j'ai modifier le fondx avec les même dimension et le même format bas me le met pas intégralement et sa superpose deux image .

( est ce que sa peux venir que mon fond n'est pas fixe ?)



Donc je pense que c'est un souci de code .

Thème de base celui de cameleon . J'ai fais quelque recherche sur le fofo pour le fond



Donc comme manipulation effectuer j'ai rafraîchit le cache et chrome mais rien ne change .. Donc si vous pouvez me venir en aide en me disant quel ligne je dois modifier et par quoi dans le design.css

Édité par satanas58 Le 19/11/2012 à 19h22

Salut, le faite de mettre repeat-x où repeat-y dans ton design.css pour ton fond donneras automatiquement une impression de superposition dans le sens où il reprend le début de l'image pour le mettre à la fin.

Par contre tu peut essayer en le fixant en rajoutant dans ton design.css à la ligne 14-15 cette ligne "background-attachment: fixed ;" sans les "" ce qui le fixeras.

Pour la largeur de ton image de fond le mieux c'est du 1440px de large car sur un écrans large en résolution sa donneras toujours un effet superposé.

quel chapitre car si j'enlève sa me vire tous .. grrr

/* --------------------------------------
design.css
Contient les conteneur, fortement dépendant du design.
--------------------------------------*/ /* Corps du site
--------------------------------------*/
* {
margin:0;
padding:0;
font-size:100%;
}

body {
background:#b3daff url(images/fondx.png)repeat-x;/*background-attachment: fixed ; */
font-size:12px;

font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana,
'Bitstream Vera Sans', Times, serif;
color:#0E2A48;
margin:auto;
padding:0;
width:1020px;


}
/* Conteneurs
--------------------------------------*/
/* ##### Conteneur global du site ###### */
div#global {
margin:auto 5px;
margin-bottom:15px;
}

/* ##### Entéte de la page ###### */
div#header_container {
background: url(images/header.png) no-repeat;
height: 260px;
background-position: top center;


}

/* ##### Entéte de la page ###### */
div#header{
height:95px;
padding-top:170px;
padding-left:20px;

}
div#header_admin {
height:50px;

}

/* ##### Conteneur en dessous de l'entéte ###### */
div#sub_header{
background: url(images/sub_header2.png) no-repeat center;/*agrandire*/
height:auto;
padding-top:50px;
text-align:center;
padding-right:10px;
position:absolute;
height:50px;
width:1000px;
margin-top: 72px;
position:absolute;
top:100px;


}
div#sub_header_admin {
height:auto;
text-align:left;
padding-right:10px;
position:absolute;
height:34px;
width:846px;
margin-left:120px;
}

div#sub_header p a {
color:#000;
margin-right:20px;
font-size:13px;
font-family:"trebuchet ms";



}

/* Lien du subheader */
div#header .dynamic_menu h5.links {

border:none;
color:#888;
width:140px;
height:10px;
background:url(images/bouton.png) no-repeat;
padding:15px 0px;
font-size:11px;
margin-right:0px;
}

div#header .dynamic_menu h5.links:hover {
color:#888;
cursor:default;
background:url(images/bouton.png) no-repeat;
margin-top:-5px;

}

div#header .dynamic_menu h5 a {
color:#888;
text-decoration:none;
}

/* ##### Compteur de visites ###### */
div#compteur {
position:absolute;
left:770px;
top:55px;
padding:10px;
padding-top:15x;
padding-left:50px;
background: url(images/comp.png) no-repeat;
width : 180px;
height: 60px;
color: #888;
}

/* ##### Menu de gauche ###### */
div#left_menu {
float:left;
width:200px;
margin:0;
margin-top:10px;
margin-right:10px !important;
margin-right:-1px;
padding:0;
}

/* ##### Menu droit ###### */
div#right_menu {
float:right;
width:190px;
margin:0;
margin-top:10px;
margin-left:-9px !important;
margin-left:0px;
}

/* ##### Contenu de la page ###### */
div#main {
width:auto;
min-width:450px;
overflow:hidden !important;
height:auto !important;
overflow:visible;
height:1%;
padding:0;
padding-top:0px;
margin:0;

}

div#header .module_mini_top {
margin:auto;
background:url(images/bouton.png) no-repeat center;
font-weight:bold;
height:40px;
margin-top:-5px;
padding-left:10px;
padding-right:20px;
padding-top:10px;
margin-right:20px;
text-align:center;
width:auto;
}
div#header .module_mini_top :hover {
margin:auto;
background:url(images/bouton.png) no-repeat center;
font-weight:bold;
height:40px;
margin-top:-10px;
padding-left:10px;
padding-right:20px;
padding-top:10px;
margin-right:20px;
text-align:center;
width:auto;
}
div#header .module_mini_contents {
margin:auto;
background:none;
}
div#header .module_mini_bottom {
margin:auto;
background:none;
}

/* ##### Barre de lien rapide ###### */
div#links { /*width:96%;*/
text-indent:10px;
margin-bottom:20px;
}

/* ##### Emplacement au dessus de contenu de la page ###### */
div#top_contents {
margin-top:15px;
margin :0;
margin-left: 20px;
margin-bottom:15px;
background: none;
height:29px;
width:auto px;
}

/* ##### Emplacement en dessous de contenu de la page ###### */
div#bottom_contents {
padding-top:15px;
padding-bottom:15px;
float:left;
}

/* ##### Bloc au dessus du pied de page ###### */
div#top_footer {
clear:both;
padding:0.75em;
margin-top:50px;
border-spacing:1px;
height:auto;


}

/* ##### Pied de page ###### */
div#footer {
clear:both;
height:50px;
margin:auto;
margin-top:0px;
padding:0px;
padding-top:10px;
padding-bottom:15px;
text-align:center;
margin-left:10px;
background:url(images/footer.png) no-repeat center;
width :1035px;
}

div#footer span {
color:#445766;
font-size:10px;
}

div#footer span a {
color:#445766;
font-size:10px;
}

/* ##### Liens rapides ###### */
div#links_vertical {
display:block !important;
display:none;
position:fixed;
background:url(images/vertical_menu_repeat.png) repeat-y;
top:45%;
margin-left:989px;
width:27px;
text-align:center;
padding-left:2px;
}

div#links_vertical_top {
width:29px;
background:url(images/vertical_menu_top.png) no-repeat;
text-align:center;
margin-left:-2px;
padding-top:8px;
}

div#links_vertical_central {
width:27px;
text-align:center;
margin-left:-2px;
padding:4px 0px;
}

div#links_vertical_bottom {
width:29px;
background:url(images/vertical_menu_bottom.png) no-repeat;
text-align:center;
height:32px;
margin-left:-2px;
}

.bglinks {
background:url(images/bgmenu_links.jpg) no-repeat bottom right;
margin:0px;
padding:0px;
list-style-type:none;
padding-bottom:7px;
margin-bottom:5px;
}

.block {
margin:10px auto;
padding:10px;
border-spacing:1px;
border:1px #cccccc solid;
background-color:#ffffff;
-moz-border-radius:12px;
-khtml-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
background:#F7F8F5 url(images/contentbg.png) repeat-x;
}
/* ##### Contenu central ###### */
div#main_content {
width:auto;
margin-right:0px;
margin-left:10px;


}
.main_content_borderl{
background:url(images/left_left.png) repeat-y left;
padding-left:8px;
padding-right:8px;
overflow:hidden !important;
height:auto !important;
overflow:visible;
height:1%;
clear:both;
}
.main_content_borderr{
background:url(images/right_right.png) repeat-y right;
padding-left:0px;
padding-right:0px;
overflow:hidden !important;
height:auto !important;
overflow:visible;
height:1%;
clear:both;

}
.main_top_l{
margin-right:22px !important;

width:22px;
height:41px;
background:url(images/top_l.png) no-repeat left;
float:left;
}
.main_top_r{
margin-left:0px !important;
margin-left:-3px;
width:21px;
height:41px;
background:url(images/top_r.png) no-repeat right;
float:right;
}
.main_top{
height:35px;
background: url(images/top_top.png) repeat-x;
padding-top:6px;
padding-left:6px;
margin-left:22px !important;
margin-left:0px;
margin-right:21px !important;
margin-right:0px;
}
.main_bottom_l{

width:22px;
height:25px;
background:url(images/bottom_l.png) no-repeat left;
float:left;
margin-top:-20px;
}
.main_bottom_r{
width:22px;
height:25px;
background:url(images/bottom_r.png) no-repeat right;
float:right;
margin-top:-20px;
margin-right:8px;
}
.main_bottom{
height:25px;
background: url(images/bottom_bottom.png) repeat-x bottom;
margin-right:5px;
margin-left:22px !important;
margin-left:0px;
margin-right:28px !important;
margin-right:0px;
margin-top:-20px;
}
.contenu { /* pour la couleur du contenu */

background: #f6f6f6;
margin-left:10px;
margin-right:10px;
}

Édité par satanas58 Le 19/11/2012 à 17h27

Tu remplace cette partie :



Par cette partie :



Inutile de mettre repeat-x sinon tu auras toujours une superposition, sauf si tu fais un fond de 2000px de large ce qui n'est pas vraiment utile.

ok bon faut je modifie le fond ^^ et pour centre la bannière c'est comment ?

Pour le header je ne pense pas qui sois décentrer mais plutôt trop petit en largeur, apparemment il fais 1000px de large alors qu'il devraient faire 1015px voir même 1020px de large.



sinon essaye en mettans un "margin-left:10px; comme ci-dessous :

Édité par Anonymous Le 19/11/2012 à 18h16

voila corriger merci