Les Allergies
Alimentaires
Posez votre question Signaler

KOMPOZER Centrer des calques [Résolu]

oursinus maritimus 43Messages postés 17 avril 2009Date d'inscription 25 décembre 2010Dernière intervention - Dernière réponse le 4 févr. 2010 à 16:39
Bonjour, Je suis en train de réaliser un site internet sur Kompozer à pertir d'images créées sur Photoshop CS4. J'ai fait une insertion d'image, pour mettre une image de fond sur mon site. J'ai centré l'image, pour qu'elle apparaisse au centre à l'écran. ça ça marche.
J'ai inséré d'autres petites images. je les ai converties en calques, pour pouvoir les positionner au premier plan par rapport à ma grande image de fond. J'essaie de centrer les calques, pour qu'ils coincident avec la position de la grande image de fond. Mais ça ne marche pas. Mes calques restent toujours au même endroit. J'utilise la barre d'outil de mise en forme et la barre d'outil de structure. Mais, ça ne marche. Est-il possible de centrer des calques par rapport à l'écran? Je ne connais pas le language html.
Merci d'avance
Lire la suite 

KOMPOZER Centrer des calques »

10 réponses
Réponse
+0
moins plus
picturart 389Messages postés 10 novembre 2008Date d'inscription 9 janvier 2012Dernière intervention 30 nov. 2009 à 11:54
regarde plutot vers le css pas le html.

mets tout dans des <div></div>

pour te donner une piste sur le positionnement centré à l'horizontal copie le code suivant dans une page html vide:

<div style="background:000; width:600px; height:400px; position:absolute;left:50%;margin-left:-300px; top:100px; z-index:0"></div>
<div style="background:ccc; width:300px; height:200px; position:absolute;left:50%;margin-left:-150px; top:200px; z-index:1"></div>

la clé c'est le
position:absolute; (bref se fou de tout le reste)
left:50%; (positionne ton premier pixel gauche à 50% de l'écran)
margin:-150px; (150, la moitié de 300 (la largeur) du <div>, bref tu tasse le tout de la moitié de sa largeur vers la gauche)
z-index:1 (1 est par dessus 0)

Pour centrer à la vertical c'est plus compliqué certain navigateur sont stupides sans les nommer pour régler tu dois passer soit par le javascript ou (malgré tout le mal que les ... en dise) par un tableau ( <table></table> )

 Ajouter un commentaire
oursinus maritimus- 30 nov. 2009 à 18:35
Merci pour la réponse. ça marche avec une image venant de Photoshop dont les dimensions sont de 600px sur 400 px. Mais l'image apparait trop petite à lécran. Mon image est de 1120 px sur 665 px.
J'ai cliqué sur source en bas de Kompozer. à 9 . <br>, j'ai remplacé <br>, par :
<div style="background:000; width:1120px; height:665px; position:absolute;left:50%;margin-left:-300px; top:100px; z-index:0"></div>
<div style="background:ccc; width:560px; height:332,5px; position:absolute;left:50%;margin-left:-150px; top:200px; z-index:1"></div>
Mais l'image apparait bien à l'écran dans les bonnes dimensions mais elle est placée complètement en bas à droite et pas du tout centrée. Y a peut être un truc que j'ai loupé?
Merci d'avance
oursinus maritimus- 30 nov. 2009 à 18:38
Merci pour la réponse. ça marche avec une image venant de Photoshop dont les dimensions sont de 600px sur 400 px. Mais l'image apparait trop petite à lécran. Mon image est de 1120 px sur 665 px.
J'ai cliqué sur source en bas de Kompozer. à 9 . <br>, j'ai remplacé <br>, par :
<div style="background:000; width:1120px; height:665px; position:absolute;left:50%;margin-left:-300px; top:100px; z-index:0"></div>
<div style="background:ccc; width:560px; height:332,5px; position:absolute;left:50%;margin-left:-150px; top:200px; z-index:1"></div>
Mais l'image apparait bien à l'écran dans les bonnes dimensions mais elle est placée complètement en bas à droite et pas du tout centrée. Y a peut être un truc que j'ai loupé?
Merci d'avance
Ajouter un commentaire
Réponse
+0
moins plus
picturart 389Messages postés 10 novembre 2008Date d'inscription 9 janvier 2012Dernière intervention 1 déc. 2009 à 22:10
oui t'as tout loupé

<div style="background-image:url(chemin-de-ton-/image1.jpeg); width:1120px; height:665px; position:absolute;left:50%;margin-left:-560px; top:100px; z-index:0;"></div>
<div style="background-image:url(chemin-de-ton-/image2.jpeg); width:560px; height:332px; position:absolute;left:50%;margin-left:-280px; top:267px; z-index:1;"></div>

image1.jpeg c ton background
images2.jpeg c ton image à positionner par dessus ton bacground au centre

donc

<div style="background-image:url(chemin-de-ton-/image1.jpeg); width:largeur-de-image1px; height:hauteur-de-image1px; position:absolute;left:50%;margin-left:moitié-de-largeur-de-image1px; top:100px; z-index:0-pour-dernier-plan;"></div>
<div style="background-image:url(chemin-de-ton-/image2.jpeg); width:largeur-de-image2px; height:hauteur-de-image2px; position:absolute;left:50%;margin-left:moitié-de-largeur-de-image2px; top:hauteur-image1-moins-hauteur-image2-divisé-par-2-plus-100px(top-image1); z-index:1-pour-plan-pardessus-0"></div>

 Ajouter un commentaire
oursinus maritimus- 2 déc. 2009 à 19:42
Merci pour ta réponse.
ça marche, j'ai fait :
<div style="background-image:url(chemin-de-ton-/image1.jpeg); width:1120px; height:665px; position:absolute;left:50%;margin-left:-560px; top:100px; z-index:0;"></div>
<div style="background-image:url(chemin-de-ton-/image2.jpeg); width:560px; height:332px; position:absolute;left:50%;margin-left:-280px; top:267px; z-index:1;"></div> , comme tu m'as dit. L'image reste dans les bonnes dimensons et elle apparait au milieu.
Par contre, il y a une petite bande blanche en haut. Le bas de l'image apparait un tout petit peu rogné. J'essaie de changer le top, mais ça ne marche pas.
Problème un peu plus embêtant c'est pour mettre d'autres petites images calques au 1er plan. Comment fais-tu ça pour que ces petites images coincident avec l'image de fond et pour qu'elles ne soient pas décalées lorsqu'on change d'écran (16/9 ou 4/3...)
Faut-il faire insertion image, la convertir en calque? et quand on a :
<img style="width: 108px; height: 32px;" alt="bouton accueil"
src="../../../images/Images%20Boutons%20Web/Boutons%20Accueil%20Cr%E9ations%20Contact/images/Accueil.jpg">
<div C'est le div qu'il faut compléter avec? <div style="background-image:url(chemin-de-ton-/image1.jpeg); width:largeur-de-image1px; height:hauteur-de-image1px; position:absolute;left:50%;margin-left:moitié-de-largeur-de-image1px; top:100px; z-index:0-pour-dernier-plan;"></div>
<div style="background-image:url(chemin-de-ton-/image2.jpeg); width:largeur-de-image2px; height:hauteur-de-image2px; position:absolute;left:50%;margin-left:moitié-de-largeur-de-image2px; top:hauteur-image1-moins-hauteur-image2-divisé-par-2-plus-100px(top-image1); z-index:1-pour-plan-pardessus-0"></div> et en faisant quelques petits réglages pour positionner dans le top et le margin left? Merci d'avance pour les réponses, c'est sympa, ça m'aide beaucoup.
add57 - 2 déc. 2009 à 23:49
Bonjour,

La présentation sera différente en fonction de l'écran et de la définition : si 1024x768 il manquera un peu de la photo sur les cotés et si 1680x1050 il y aura une bande "blanche" de chaque côté.

Une solution : ajouter un background-color: body { background-color: red; }

ex. http://vernois57.free.fr/index.php?lng=fr
oursinus maritimus- 4 déc. 2009 à 15:00
C'est bon , j'ai résolu mo pb. J'ai réussi à enlever la bande blanche en haut de mon image. ça ne dépent pas du format de l'écran. Mais plutôt du top de l'image, qu'il faut régler en position absolue. ça déplace l'image de haut en bas. Et quand on change d'écran, les réglages ne changent pas.
Ajouter un commentaire
Réponse
+0
moins plus
oursinus maritimus 43Messages postés 17 avril 2009Date d'inscription 25 décembre 2010Dernière intervention 4 déc. 2009 à 15:04
Pour mettre des calques par dessus un autre calque + grand. / Pour les mettre au 1er plan par rapport à une image de fond. il faut bien faire insertion image, la convertir en calque. et quand on a :
<img style="width: 108px; height: 32px;" alt="bouton accueil"

il faut remplacer ça par <div style="background-image:url(chemin-de-ton-/image1.jpeg); width:largeur-de-image1px; height:hauteur-de-image1px; position:absolute;left:50%;margin-left:moitié-de-largeur-de-image1px; top:100px; z-index:0-pour-dernier-plan;"></div> et bien régler les coordonnées de position des calques voulus.

 Ajouter un commentaire
picturart- 27 déc. 2009 à 23:36
Content de savoir que tu ais réglé. Si tu as d'autres problèmes du genre je te conseillerais de publier le tout comme page test sur ton serveur et de nous envoyer le lien. C'est plus facile avec un visuel...

bonne continuité
oursinus maritimus- 4 févr. 2010 à 16:39
Salut picturart
Je suis en train de finir mon site sur Kompozer. Toutes mes pages sont faites et le navigation fonctionne bien. Par contre, j'aimerai appliquer des effets Rollover sur mes boutons, pour qu'ils changent d'aspect lorsqu'ils sont activés en passant la souris dessus. J'ai créé des images.gif sur Photoshop avec fenêtre animation (=Image Ready). Il y a deux états pour chacun de mes boutons. 1 au repos et l'autre over.

Voici les caractéristiques d'une image par exemple, lorsqu'elle est insérée dans Kompozer(cette image s'appelle bouton adresse mail), avec un effet rollover qui fonctionne bien:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>brouillon 2</title>
</head>
<body>
<img style="width: 328px; height: 35px;"
alt="bouton adresse mail repos"
src="file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Repos.gif"
onmouseover="this.src='file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Over.gif'"
onmouseout="this.src='file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Repos.gif'">
</body>
</html>

J'aimerai mettre cette image en position absolue avec l'effet rolover en même temps est-ce possible? Quels sont les codes à mettre?

Voici les caractéristiques de l'image en position absolue qui fonctionne bien (mais sans l'effet rollover que je n'arrive pas à lui appliquer):

<div style="bouton adresse mail:url(chemin-de-ton-/image1.jpeg); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:0;"></div>
<div style="bouton adresse mail:url(chemin-de-ton-/image2.jpeg); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:1;"></div>

Merci d'avance pour la réponse
Ajouter un commentaire
Posez votre question
Ce document intitulé « KOMPOZER Centrer des calques » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?