Discussion :

[miya]

Bonjour,

J'essaye de faire une mise en forme a l'image d'un site web. Je rencontre des difficultés d'intégration des éléments.

J'utilise des containers (panel) pour la mise en page. Quand j'intègre un panel à un autre, il me reste toujours des bordures sur les cotés, je n'arrive pas à le coller sur les bordures, bien que j enlève les bordures, les padding a 0 etc.. pareil pour intégrer une image dans un panel

on peut constater le résultat ici : http://gu1gui.free.fr/public/siteweb/

par exemple l image du header ne remplit pas le panel header

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Application{
	paddingBottom: 0;
	paddingLeft:0;
	paddingRight:0;
	paddingTop:0;
	backgroundColor:#666666;
}
 
.contentMain{
    borderColor: #666666;
    borderAlpha: 1;
    borderThicknessLeft: 0;
    borderThicknessTop: 0;
    borderThicknessBottom: 0;
    borderThicknessRight: 0;
    cornerRadius: 0;
    headerHeight: 0;
    backgroundColor: #666666;
    dropShadowEnabled: false;
}
 
.header, .menu, .content, .footer, .sidebar{
    borderStyle: none;
    cornerRadius: 0;
    headerHeight: 0;
	dropShadowEnabled: false;
}
.header{
	background-image:  Embed(source="images/header.png");	
}

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
 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	width="100%" height="100%"
	verticalAlign="middle" verticalCenter="center"
	horizontalAlign="center" horizontalCenter="center"> 
	<mx:Style source="/css/styles.css" />
	<mx:Panel styleName="contentMain" height="100%" layout="absolute" backgroundColor="white">
 
		<mx:Panel styleName="header" backgroundColor="green"
			width="1000" height="200"  x="0" y="0"	
			verticalAlign="middle" verticalCenter="center"
			horizontalAlign="middle" horizontalCenter="center"
			paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
			top="0" >	
...

Peut être que je ne devrais pas utiliser les Panel ?

[samy2525]

Tu as essayé de mettre left à 0 ça pourrai arranger ton soucie

[miya]

Yep samy deja essayé left, tout comme le top (qui aurait du collé au bord du haut) sa ne fonctionne pas...

Je suis curieux de savoir comment faire ?

[ijako]

Bonjour,

Essaie peut-être de mettre les propriétés height et width de ton style "header" à 100%.

[Jim_Nastiq]

pour ton image de header c'est normal tu n'as pas mis les borderThickness à 0 pour ton Panel qui à l'id "header", ton image est l'enfant du panel header!

[ijako]

Sinon à ta place je n'utiliserai pas cette méthode.

Tu devrais fonctionner avec des Canvas. Le principe est de créer ton propre composant de cette manière :

Code :

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

1
2
3
4
5
6
7
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="1000" height="200">
	<mx:Image>
		<mx:source>images/header.png</mx:source>
	</mx:Image>
</mx:Canvas>

Une fois créé, tu peux l'utiliser dans plusieurs pages comme un composant Mx.

Si tu utilise Flex Builder, tu pourra y accéder via l'interface dans le dossier "Custom" sinon tu ajoute une ligne de code :

Code :

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

<ns1:image_haut x="-1.5" y="0">

"image_haut" étant le nom de ton fichier...

Bon courage !

[miya]

Merci beaucoup pour vos réponses. J'ai suivi vos instructions.

En faite, à la place de mes panels, j'utilise des Canvas, et dans mon Application je stipule verticalGap = 0 pour eviter l'espacement entre ces derniers

Tout fonctionne bien