KOMPOZER Centrer des calques
Résolu/Fermé
oursinus maritimus
Messages postés
48
Date d'inscription
vendredi 17 avril 2009
Statut
Membre
Dernière intervention
13 février 2015
-
29 nov. 2009 à 23:13
oursinus maritimus Messages postés 48 Date d'inscription vendredi 17 avril 2009 Statut Membre Dernière intervention 13 février 2015 - 4 févr. 2010 à 16:39
oursinus maritimus Messages postés 48 Date d'inscription vendredi 17 avril 2009 Statut Membre Dernière intervention 13 février 2015 - 4 févr. 2010 à 16:39
A voir également:
- KOMPOZER Centrer des calques
- Kompozer - Télécharger - Web Design
- Fusionner et centrer excel grisé ✓ - Forum Excel
- 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 C#
- Centrer le nom des dossier ✓ - Forum Windows 10
- Afficher tous les calques photoshop - Forum Illustrator
3 réponses
picturart
Messages postés
394
Date d'inscription
lundi 10 novembre 2008
Statut
Membre
Dernière intervention
22 juin 2018
76
30 nov. 2009 à 11:54
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> )
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> )
picturart
Messages postés
394
Date d'inscription
lundi 10 novembre 2008
Statut
Membre
Dernière intervention
22 juin 2018
76
1 déc. 2009 à 22:10
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>
<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>
oursinus maritimus
Messages postés
48
Date d'inscription
vendredi 17 avril 2009
Statut
Membre
Dernière intervention
13 février 2015
2 déc. 2009 à 19:42
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.
ç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
>
oursinus maritimus
Messages postés
48
Date d'inscription
vendredi 17 avril 2009
Statut
Membre
Dernière intervention
13 février 2015
2 déc. 2009 à 23:49
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
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
Messages postés
48
Date d'inscription
vendredi 17 avril 2009
Statut
Membre
Dernière intervention
13 février 2015
>
add57
4 déc. 2009 à 15:00
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.
oursinus maritimus
Messages postés
48
Date d'inscription
vendredi 17 avril 2009
Statut
Membre
Dernière intervention
13 février 2015
4 déc. 2009 à 15:04
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.
<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.
picturart
Messages postés
394
Date d'inscription
lundi 10 novembre 2008
Statut
Membre
Dernière intervention
22 juin 2018
76
27 déc. 2009 à 23:36
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é
bonne continuité
oursinus maritimus
Messages postés
48
Date d'inscription
vendredi 17 avril 2009
Statut
Membre
Dernière intervention
13 février 2015
>
picturart
Messages postés
394
Date d'inscription
lundi 10 novembre 2008
Statut
Membre
Dernière intervention
22 juin 2018
4 févr. 2010 à 16:39
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
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
30 nov. 2009 à 18:35
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
30 nov. 2009 à 18:38
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