[RÉGLÉ] Fond violet récalcitrant

[Casimirs82]

Bonjour à tous,

Mon site web terminé sous Joomla! (template beez3), je souhaiterais le rendre agréable à lire sur smartphone.

Sur les conseils de Rajoz (ancienne discussion), j'ai ajouté le code suivant à la fin de mon fichier personnal.css afin que le bandeau de mon site s'adapte à la largeur des écrans de smartphones :

/* ========== Mes modifications ========== */
/* change image de fond du logo (ligne 36) */
#header .logoheader {
    background-color: #A7396D;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}
/* supprime ligne taille de police */
#header #line {
    display: none;
    visibility: hidden;
}
/* largeur des articles quand colonne de droite seule (position.css ligne 159) */
#wrapper {
    width: 78%;
}
/* pour petits ecrans (maximum 480px) */
@media only screen and (max-width: 480px) {
    /* supprime espace au-dessus du logo */
    #all #header {
        padding-top: 0;
    }
    /* change image de fond du logo (ligne 427) */
    #header .logoheader {
        background-image: url(../images/personal/banniere.png);
    }
    /* positionne le menu mobile (a cause de firefox) */
    #header #mobile_select {
        margin-top: 17px;
    }
}

Je précise que le logo fait partie intégrante de mon bandeau (réalisé sous GIMP) et que sa taille est de 1060x288 px.

Le bandeau s'adapte parfaitement bien aux écrans de smartphone mais deux nouveaux problèmes apparaissent :
- sur ordinateur, un fond violet (derrière la bannière ?) dépasse en bas du bandeau
- sur smartphone, ce débordement par le bas violet est encore plus important...

Avez-vous une solution pour supprimer ce fond violet ?

En pièce-jointe, une copie d'écran du résultat (le site est pour le moment en local si bien que je ne peux vous donner l'adresse).

Par avance merci !

[lefabdu51]

Re : Fond violet récalcitrant

utilise la pipette de the gimp pour trouver le code couleur, et ensuite une recherche dans ton fichier te donneras la réponse......

[Casimirs82]

Re : Fond violet récalcitrant

Bonjour lefebdu51,

Je sais depuis le début quel est le code couleur... Il s'agit de #A7396D (violet) et cela correspond au bloc :

#header .logoheader {
    background-color: #A7396D;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;

du code donné par Rajoz.

Malheureusement, cela ne m'a pas amené à trouver la solution...Si je commente l'une des lignes du code précédent, alors mon bandeau (qui semble être devant ce fond violet) ne s'adapte plus à la largeur du smartphone...

[lefabdu51]

Re : Fond violet récalcitrant

si tu voit a couleurde fond, c'est que ta deformation n'est pas bonne et est plus importante en bas. ton entete ne respecte pas les proportions.
donc la solution se trouves dans les regles générales et non dans les requetes media, vu que ta capture d'ecran n est pas une capture de mobile.
essaye en ajoutant max-height: [la hauteur de ton image], dans

#header .logoheader {
    background-color: #A7396D;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;

[Casimirs82]

Re : Fond violet récalcitrant

Je te remercie pour ta réponse...Voici le détail des blocs de mon fichier personnal.ccs :

Bloc pour la visualisation sur ordinateur :

.logoheader {
	background: url(../images/personal/monbandeau.png) no-repeat right
		bottom #0C1A3E;
	color: #FFFFFF;
	min-height: 280px;
}

Le bandeau de mon site est alors visible sur l'écran de mon ordinateur sans problème.

Bloc pour la visualisation sur smartphones avec la correction que tu proposes :

#header .logoheader {
    background-color: #A7396D;
    background-repeat: no-repeat;
    background-size: contain;
    max-height: 280px;
    background-position: top center;
}

Malheureusement cela ne résout pas le problème sur smartphone (samsung Galaxy Note 2). Le bandeau s'ajuste à la largeur de l'écran comme il se doit... mais : en mode portrait, le fond violet dépasse en bas du bandeau (quelques % de la hauteur du bandeau) et en mode paysage, le fond violet dépasse encore en bas du bandeau mais ce débordement est plus important que dans le mode précédent et il fait la moitié de la hauteur du bandeau...

Vois-tu d'autres corrections possibles ?

[lefabdu51]

Re : Fond violet récalcitrant

Je te remercie pour ta réponse...Voici le détail des blocs de mon fichier personnal.ccs :

Bloc pour la visualisation sur ordinateur :

.logoheader {
	background: url(../images/personal/monbandeau.png) no-repeat right
		bottom #0C1A3E;
	color: #FFFFFF;
	min-height: 280px;
}

Le bandeau de mon site est alors visible sur l'écran de mon ordinateur sans problème.

Bloc pour la visualisation sur smartphones avec la correction que tu proposes :

#header .logoheader {
    background-color: #A7396D;
    background-repeat: no-repeat;
    background-size: contain;
    max-height: 280px;
    background-position: top center;
}

Malheureusement cela ne résout pas le problème sur smartphone (samsung Galaxy Note 2). Le bandeau s'ajuste à la largeur de l'écran comme il se doit... mais : en mode portrait, le fond violet dépasse en bas du bandeau (quelques % de la hauteur du bandeau) et en mode paysage, le fond violet dépasse encore en bas du bandeau mais ce débordement est plus important que dans le mode précédent et il fait la moitié de la hauteur du bandeau...

Vois-tu d'autres corrections possibles ?

deja une question, ton image fait elle la meme hauteur ?
si elle fait 280px de haut sur un affichage de 1024px de large, est ce qu elle fait la meme hauteur si elle est affichée sur une largeur de 480px ?
c est une question de proportions.....
pour differencier le paysage et le portrait:

@media only screen and (max-width: 480px), handled and (orientation: landscape) {}
et @media only screen and (max-width: 480px), handled and (orientation: paysage) {}

[Casimirs82]

Re : Fond violet récalcitrant

C'est une très bonne question. Mon bandeau fait 1060 x 288 px. Les valeurs choisies dans le premier bloc (min-height = 280 px) me permet d'avoir un bandeau correct sur mon ordinateur sans qu'il y ait ce débordement violet en bas et/ou sur les côtés. Le problème semble être le réglage des autres paramètres pour la visualisation sur smartphone à la fois en mode portrait et paysage.

En faisant une règle de trois, pour une largeur de 480 px, la hauteur du bandeau devrait être de 130 px pour garder la même proportion.

[Casimirs82]

Re : Fond violet récalcitrant

Pour information, voici le fichier personnal.ccs entier :

body {
	background: #eee
}

h3 {
	color: #555
}

h2 a {
	text-decoration: none
}

h2,.moduletable h3, .items-leading h2 {
	border-bottom: solid 1px #ddd;
}

.items-row h2 {
	border-top: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
}

a:link,a:visited {
	color: #095197
}

a:hover,a:active,a:focus {
	background: #095197;
	color: #FFF;
}

.logoheader {
	background: url(../images/personal/bandeau.png) no-repeat right
		bottom #0C1A3E;
	color: #FFFFFF;
	min-height: 280px;
}

#all {
	background: #FFFFFF;
	color: #444;
}

#shadow #all {
	box-shadow: 0px 20px 10px #555555
}

#header ul.menu {
  background-color:#ddd;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee", endColorstr="#dddddd");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
  background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
  background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
  background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
  background-image: linear-gradient(#eeeeee, #dddddd);
  border-color: #b2b2b2 #b2b2b2 hsl(114, 0%, 62.5%);

  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.49);
  -webkit-font-smoothing: antialiased;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px
		rgba(0, 0, 0, 0.05);
	color: #095197;
	border: solid 1px #ddd;
	border: 1px solid #e5e5e5;
	text-transform: uppercase;
}

#header ul.menu a:link,#header ul.menu a:visited {
	color: #333;
	display: inline-block;
	font-weight: bold;
	text-decoration: none;
	padding: 0px 10px;
	margin: 0;
	display: inline-block;
	margin: 0 0 0;
	padding: 12px 15px;
	position: relative;
	border-right: 1px solid #ddd;
	box-shadow: 1px 0px 0px #f5f5f5;
}

/*  grey background */
.button,button,p.readmore a,#header input.button,.pagenav a:link,.pagenav a:visited,#advanced-search-toggle,.profile-edit a:link,.profile-edit a:visited,h3.js_heading
	{
  background-color:#ddd;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#dddddd");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
  background-image: -moz-linear-gradient(top, #ffffff, #dddddd);
  background-image: -ms-linear-gradient(top, #ffffff, #dddddd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  background-image: -webkit-linear-gradient(top, #ffffff, #dddddd);
  background-image: -o-linear-gradient(top, #ffffff, #dddddd);
  background-image: linear-gradient(#ffffff, #dddddd);
  border-color: #b2b2b2 #b2b2b2 hsl(114, 0%, 62.5%);

  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.49);
  -webkit-font-smoothing: antialiased;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px
		rgba(0, 0, 0, 0.05);
	color: #095197;
	border: solid 1px #ddd
}

/* +++++++++++++  table display  Catgegories table, contact etc, ++++++++++++++++++++* */
table {
	border: solid 1px #ddd
}

table th {
	background-color: #0074cc;
	color: #fff;
	background-image: -moz-linear-gradient(top, #095197, #1B6BA5);
	background-image: -ms-linear-gradient(top, #095197, #1B6BA5);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#095197),
		to(#1B6BA5) );
	background-image: -webkit-linear-gradient(top, #095197, #1B6BA5);
	background-image: -o-linear-gradient(top, #095197, #1B6BA5);
	background-image: linear-gradient(top, #095197, #1B6BA5);
	background-repeat: repeat-x;
	filter: progid :   DXImageTransform.Microsoft.gradient (   startColorstr
		=
		 '#095197', endColorstr =   '#1B6BA5', GradientType =   0 );
	border-color: #0055cc #0055cc #003580;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid :   dximagetransform.microsoft.gradient (   enabled =
		false );
}

table th a:link,table th a:visited {
	color: #fff
}

tr.odd,tr.cat-list-row1 {
	background: #f8f8f8
}

table  tr:hover td {
	background: #FEFDE2;
}

/* blue background */
.button:hover,
.button:active,
.button:focus,
button:hover,
p.readmore a:hover,
#header ul.menu a:hover,
#header ul.menu a:active,
#header ul.menu a:focus,
.pagenav a:hover,
.pagenav a:active,
.pagenav a:focus,
#advanced-search-toggle:hover,
#advanced-search-toggle:active,
#advanced-search-toggle:focus,
.profile-edit a:hover,
.profile-edit a:active,
.profile-edit a:focus,
#fontsize a:hover,#fontsize a:active,#fontsize a:focus,
#mobile_select h2 a
	{
	background-color: #000000;
	color: #fff;

  background-color:#095197;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0087d1", endColorstr="#095197");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#0087d1), to(#095197));
  background-image: -moz-linear-gradient(top, #0087d1, #095197);
  background-image: -ms-linear-gradient(top, #0087d1, #095197);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0087d1), color-stop(100%, #095197));
  background-image: -webkit-linear-gradient(top, #0087d1, #095197);
  background-image: -o-linear-gradient(top, #0087d1, #095197);
  background-image: linear-gradient(#0087d1, #095197);
  border-color: #00456b #095197 hsl(201, 100%, 16%);
  color: #fff ;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
  -webkit-font-smoothing: antialiased;



}

/* +++++++++++++++++  Pagination +++++++++++++++ */
.pagination span,.pagination span  a:hover {
	color: #999999;
	background-color: #f5f5f5;
}

/* active item */
span.pagenav {
	background: #095197;
	color: #fff
}

.pagination-start span.pagenav,.pagination-prev  span.pagenav,.pagination-end span.pagenav,.pagination-next span.pagenav
	{
	background-color: #f5f5f5;
	color: #444
}

/* +++++++++++++++++  content  +++++++++++++++ */
.article-info {
	background-color: #fbfbfb;
	background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
	background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff),
		to(#f5f5f5) );
	background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
	background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
	background-image: linear-gradient(top, #ffffff, #f5f5f5);
	background-repeat: repeat-x;
	filter: progid :   DXImageTransform.Microsoft.gradient (   startColorstr
		=
		 '#ffffff', endColorstr =   '#f5f5f5', GradientType =   0 );
	border: 1px solid #ddd;
	-webkit-box-shadow: inset 0 1px 0 #ffffff;
	-moz-box-shadow: inset 0 1px 0 #ffffff;
	box-shadow: inset 0 1px 0 #ffffff;
}

ul.menu a:link,ul.menu a:visited {
	color: #444;
}

/* ++++++++++++++++++++++  menu ++++++++++++++++++++++++++  */
.moduletable_menu {
	border: solid 1px #ddd;
	background: #f9f9f9;
}

#header ul.menu {
	border: solid 1px #D5D5D5;
	box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 5px rgba(0, 0, 0, 0.1);
}

#header ul.menu a {
	box-shadow: none;
	border-bottom: 0
}

ul.menu a:hover,ul.menu a:active,ul.menu a:focus {
	background-color: #F5F5F5;
	background-image: -moz-linear-gradient(center top, #FFFFFF, #E6E6E6);
	background-repeat: repeat-x;
	background: url(../images/arrow.png) no-repeat right center;
	color: #095197
}

/* ++++++++++++++++   highlightning active menuitem  +++++++++++++++++++ */
ul.menu li.active a,ul.menu  li.active ul li.active a,ul.menu  li.active ul li.active  ul li.active a,ul.menu  li.active ul li.active  ul li.active ul li.active  a,ul.menu  li.active ul li.active  ul li.active ul li.active ul li.active a
	{
	font-weight: bold;
}

ul.menu  li.active ul li a,ul.menu  li.active ul li.active  ul li a,ul.menu  li.active ul li.active  ul li.active ul li  a,ul.menu  li.active ul li.active  ul li.active ul li.active ul li a
	{
	font-weight: normal
}

ul.menu a {
	box-shadow: 0 1px 0 #fff;
	border-bottom: solid 1px #ddd;
	text-shadow: 0 1px 0 #fff
}

ul.menu ul a {
	background: #e5e5e5;
	margin-bottom: 1px
}

ul.menu ul ul ul a {
	background: #f5f5f5 url(../images/arrow.png) no-repeat 24px center;
}

ul.menu ul ul ul ul a {
	background: #fff;
}

/* +++++++++++++++++++++++  SLIDER  ++++++++++++++++++++  */
.panel h3.pane-toggler a {
	background: url(../images/slider_plus.png) right top no-repeat;
	color: #333
}

.panel h3.pane-toggler-down a {
	background: url(../images/slider_minus.png) right top no-repeat;
	border-bottom: solid 1px #ddd;
	color: #333
}

/*  +++++++++++++++++   Tabs ++++++++++++++++++++++  */
ul.tabs li,dl.tabs dt h3 a:link,dl.tabs dt h3 a:visited {
	background: #f5f5f5 url(../images/nature/box.png) repeat-x;
}

ul.tabs li a:link,ul.tabs li a:visited,dl.tabs dt a {
	color: #333;
	border: solid 1px #ddd;
	border-bottom: 0
}

ul.tabs li a:hover,ul.tabs li a:active,ul.tabs li a:focus {
	color: #000
}

.tabcontent,div.current {
	background: #fff;
	color: #000;
	border: solid 1px #ddd;
}

.tabcontent .linkclosed {
	color: #000;
	border-bottom: solid 1px #e5e5e5;
}

ul.tabs li a.linkopen,dl.tabs dt.open  h3 a:link,dl.tabs dt.open  h3 a:visited
	{
	background: #fff;
	color: #333;
	border-radius: 5px 5px 0px 0px;
}

ul.tabs li a.linkclosed:hover,ul.tabs li a.linkclosed:active,ul.tabs li a.linkclosed:focus,ul.tabs li a.linkopen:hover,ul.tabs li a.linkopen:active,ul.tabs li a.linkopen:focus
	{
	background: #555;
	color: #fff
}

#footer-inner,#footer {
	background: #f5f5f5;
	box-shadow: 0px 20px 10px #555
}

#footer {
	background: #555;
	max-width: 1025px;
	margin: 0 auto;
	box-shadow: 0px 0px 10px #555555;
	color: #fff
}

#footer a {
	color: #fff;
	background: none
}

#bottom a {
	background: none
}

.box1 {
	border-right: solid 1px #ccc
}

.box3 {
	border-left: solid 1px #ccc
}

#bottom  ul li a {
	background-image: none;
	padding-left: 0
}



/* responsive */
#mobile_select h2 {border:0; margin:-17px 0 0 0; padding:0; background:#0C1D43;text-align:right}
#mobile_select h2 a {
display:inline-block;
font-size:0.8em;
border-radius:4px 4px 0 0;
padding:6px;
font-size:0.75em;
margin-right:5px;
}


@media only screen and (max-width: 480px) {

	img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}


	#fontsize{display:none}
	#nav,#wrapper2,#wrapper,.cols-3 .column-1,.cols-3 .column-2,.cols-3 .column-3,#right,.box,#header form
		{
		float: none;
		width: 100%
	}
	#header {padding-top:3em}
	#header form  {margin:0}
	.logoheader {background:#0C1D43; min-height:100px; margin:0}
	.box {
		border-left: 0 !important;
		border-bottom: solid 1px #ddd;
	}
	#line {
		text-align: center;
		top: 0;
		right: auto;
		max-width: 100% ;
		min-width:100%;

		margin: 0 0px; background:#095197;
	}
	#header form input {
		float: none; margin-bottom:4px
	}
	#menuwrapper { margin-top:10px; }
	#header ul.menu {position:relative; top:0;left:20px; right:20px; margin:0; width:90%; border-radius:4px}
	#header ul.menu li:first-child a {border-radius: 4px 4px 0 0}
	#header ul.menu li:last-child a {border-radius:0 0 4px 4px }
	#header ul.menu li a:link,
	#header ul.menu li a:visited {
		display: block;
		padding: 6px 10px;
		border-bottom: solid 1px #ccc
	}
}

@media only screen and (min-width: 600px) {
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 992px) {
}

@media only screen and (min-width: 1382px) { /* Styles */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) , only screen and
		(min--moz-device-pixel-ratio: 1.5) , only screen and
	(min-device-pixel-ratio: 1.5) { /* Styles */
}




/* ========== Mes modifications ========== */
/* change image de fond du logo (ligne 36) */
#header .logoheader {
    background-color: #A7396D;
    background-repeat: no-repeat;
    background-size: contain;
    max-height: 130px;
    background-position: top center;
}
/* supprime ligne taille de police */
#header #line {
    display: none;
    visibility: hidden;
}
/* largeur des articles quand colonne de droite seule (position.css ligne 159) */
#wrapper {
    width: 78%;
}
/* pour petits ecrans (maximum 480px) */
@media only screen and (max-width: 480px) {
    /* supprime espace au-dessus du logo */
    #all #header {
        padding-top: 0;
    }
    /* change image de fond du logo (ligne 427) */
    #header .logoheader {
        background-image: url(../images/personal/bandeau.png);
    }
    /* positionne le menu mobile (a cause de firefox) */
    #header #mobile_select {
        margin-top: 17px;
    }
}

[Casimirs82]

Re : Fond violet récalcitrant

Bonjour

Quelqu'un a t-il une solution à mon problème ? Quelque soit les paramètres utilisés dans le ccs, un fond violet dépasse de mon bandeau par le bas...c'est à s'arracher les cheveux !

[lefabdu51]

Re : Fond violet récalcitrant

dans ta div mobile met une hauteur de 130px et voit si c est suffisant. A toi d ajuster....

[Casimirs82]

Re : Fond violet récalcitrant

Bonjour lafabdu,

Merci pour ta réponse. J'ai pris le temps ce matin de modifier les paramètres du template. La ligne à ajouter est : min-height: 98px; Avec cette valeur, le bandeau s'ajuste correctement sur mon Samsung Galaxy Note II mais seulement en mode portrait. En mode paysage avec le même smartphone le bandeau s'ajuste en largeur mais il y a de nouveau le fond violet qui dépasse en bas...Ci-joint une partie du code m'ayant permis de résoudre le problème pour le mode portrait :

/* ========== Partie responsive ========== */
/* change image de fond du logo (ligne 36) */
#header .logoheader {
    background-color: #A7396D;
    background-repeat: no-repeat;
    background-size: contain; 
    background-position: top center;
    
}

/* pour petits ecrans (maximum 480px) */
/*@media only screen and (max-width: 480px) {*/
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* supprime ligne taille de police */
#header #line {
    display: none;
    visibility: hidden;
}
    
  /* change image de fond du logo (ligne 427) */
    #header .logoheader {
        background-image: url(../images/personal/monbandeaupng);
        min-height: 98px;
    }
    

[Casimirs82]

[Résolu] : Fond violet récalcitrant

Bon avec un peu de patience, j'ai résolu mon problème...Le bandeau s'ajuste maintenant correctement à la fois en mode portrait et paysage...D'autres problèmes sont apparus qui feront l'objet d'un autre post...Je considère que le précédent problème est résolu. Merci à tous pour votre aide.

[lesoutier]

Re : Fond violet récalcitrant

Si c'est réglé merci de l'indiquer :

http://forum.joomla.fr/announcement.php?f=176