Discussion :

[alain78]

Bonjour,

J'ai un DIV qui utilise la classe fenetre_test. Cette classe possède une image de fond (ovale1.png). Dans le DIV j'ai un menu déroulant qui fonctionne bien.
Le problème est que mon image reste centrée (H et V) dans le DIV alors que je demande qu'elle soit à gauche et en haut.
De plus lorsque je diminue la largeur du DIV, l'image ne bouge pas de sa position. Et plus je diminue, plus elle est tronquée.
Le résultat est un menu qui n'est pas sur l'image.

Débutant en CSS, je croyais avoir assimilé ce point. Mais je ne trouve pas (pour comprendre) mon erreur. Pouvez vous m'aider ?

Voici le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
.fenetre_test {
	background-image: url("/images/ovale1.png") ;
	background-position: top left;
	margin: 0%;
	padding: 0%;
	left:2%;
	top:12%;
	height: 25%;
	width: 50%;
	text-align: left;
	position:absolute;
	border-color: #0000ff;
	border-style: solid;
	border-width: 0.1em;
}

MErci.

[elfamine]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
.fenetre_test{
	background-image: url("/images/ovale1.png") ;  /* est ce que tu pourrais mettre l'image en pièce jointe qu'on puisse voir ses dimensions */ 
	background-position: top left;
	margin: 0; padding: 0;
	position:absolute;
	left:2%; top:12%;
	height: 25%; width: 50%;  /* Je pense qu'il faudrait choisir des valeurs fixe qui vont correspondre à la taille de l'image plus tot que les % */ 
	border-color: #0000ff;
	border-style: solid;
	border-width: 0.1em;}
.fenetre_test p {text-align: left;} /* Il serait preferable de mettre ton texte dans une balise <p> par exemple */

[alain78]

En PJ la pièce jointe dont les dimensions sont 1000x400

J'ai essayé de remplacer les dimensions en % par les dimensions en px => aucun résultat

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
.fenetre_test {
	background-image: url("/images/ovale1.png") ;
	background-position: top left;
	margin: 0%;
	padding: 0%;
	left:2%;
	top:12%;
	height: 400px;
	width: 1000px;
	text-align: left;
	position:absolute;
	border-color: #0000ff;
	border-style: solid;
	border-width: 0.1em;
}

J'ai essayé de mettre le texte dans une baise <p> => aucun résultat.
Mais ma syntaxe est-elle correcte ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
echo "<div class=' fenetre_test'>";
echo "<p>";
echo "<ul class='menu'>";
/*...................*/

[elfamine]

Bonjour,

La taille de ton image est effectivement de 1000x400 mais la forme ovale n'est que de 218x84. pour pouvoir l'exploiter il va falloir la crop avec un logiciel d’édition.

donc voila le résultat :



le code css qui va avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.fenetre_test{
	background-image: url("image/ovale2.png") ;
	height: 84px; width: 218px; 
	margin: 0; padding: 0;
	position:absolute;
	left:2%; top:12%;
	border-color: #0000ff;
	border-style: solid;
	border-width: 0.1em;}
.fenetre_test p {text-align: center;}

[alain78]

Merci. Tout est OK

Effectivement dans mon logiciel d'édition image (Webcansas) la zone d'exportation du fichier PNG n'était pas correcte car déterminée automatiquement !
Je me méfierai donc à l'avenir.

Encore merci et bonne journée.

@lain