KOMPOZER Centrer des calques
Résolu
oursinus maritimus
Messages postés
55
Statut
Membre
-
oursinus maritimus Messages postés 55 Statut Membre -
oursinus maritimus Messages postés 55 Statut Membre -
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
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
A voir également:
- KOMPOZER Centrer des calques
- Kompozer - Télécharger - Web Design
- Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ? ✓ - Forum Windows 10
- Le fichier à télécharger comporte plusieurs calques. l’un d’eux contient un mot caché. quel est ce mot ? ✓ - Forum Windows
- Défusionner des calques photoshop ✓ - Forum The Gimp
- Mot caché-flouté et image - Forum Graphisme
3 réponses
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> )
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> )
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>
<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>
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.
ç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.
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
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
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.
<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.
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
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
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
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