Centrer une couche
Résolu
simgob
Messages postés
584
Date d'inscription
Statut
Membre
Dernière intervention
-
simgob Messages postés 584 Date d'inscription Statut Membre Dernière intervention -
simgob Messages postés 584 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
je ne parviens pas à centrer une couche (layer) sur un écran d'une autre taille que le mien (19'). mon code est:
<div id="layer1" style="text-align:center; background-color:rgb(153,153,153); border-width:9; border-color:rgb(166,202,240); border-style:ridge; position:absolute; left:10%; top:5%; z-index:1; width:80%; height:60%; ">
comment comprend-t-on left:10% c'est 10% de quoi ? de la largeur de l'écran ?
si nécessaire l' url du site:
http://www.passe-et-present.com
Merci d'avance et bon we
je ne parviens pas à centrer une couche (layer) sur un écran d'une autre taille que le mien (19'). mon code est:
<div id="layer1" style="text-align:center; background-color:rgb(153,153,153); border-width:9; border-color:rgb(166,202,240); border-style:ridge; position:absolute; left:10%; top:5%; z-index:1; width:80%; height:60%; ">
comment comprend-t-on left:10% c'est 10% de quoi ? de la largeur de l'écran ?
si nécessaire l' url du site:
http://www.passe-et-present.com
Merci d'avance et bon we
A voir également:
- Centrer une couche
- Couche de destination masquée photoshop ✓ - Forum The Gimp
- Fusionner et centrer excel grisé ✓ - Forum Excel
- Impossible d'utiliser l'outil déplacement car la couche de destination est masquée ✓ - Forum Photoshop
- Ou sont les couches - Forum Photoshop
- 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
6 réponses
Bonjour.
Je ne comprends pas ce que tu veux dire par "Layer".
Et quand je vais sur le site, le bloc gris est bien centré.
Pour left:10%; oui c'est bien 10% de la largeur de l'écran.
A propos de centrage :
webmaster adapter un site a toutes les resolutions le centrer
Tu peux remplacer ceci :
Par :
border:9px ridge rgb(166,202,240);
A propos de "height:60%;", est-ce que ca fonctionne ?
css definir une hauteur verticale et relative a un element
Chez moi, le contenu du div dépasse.
Tu peux ajouter des barres de défilement :
overflow:auto;
a plus
Je ne comprends pas ce que tu veux dire par "Layer".
Et quand je vais sur le site, le bloc gris est bien centré.
Pour left:10%; oui c'est bien 10% de la largeur de l'écran.
A propos de centrage :
webmaster adapter un site a toutes les resolutions le centrer
Tu peux remplacer ceci :
border-width:9; border-color:rgb(166,202,240); border-style:ridge;
Par :
border:9px ridge rgb(166,202,240);
A propos de "height:60%;", est-ce que ca fonctionne ?
css definir une hauteur verticale et relative a un element
Chez moi, le contenu du div dépasse.
Tu peux ajouter des barres de défilement :
overflow:auto;
a plus
Mon écran est un 17 pouces je crois.
A mon avis, tu devrais essayer des margin plutôt que position:absolute;
A mon avis, tu devrais essayer des margin plutôt que position:absolute;
Bonjour,
Le centrage avec des % ne se fait pas exactement comme çaº.
Il existe une autre techniqueº (c'est le choix que j'ai fait) qui est plus simple à mettre en œuvre et qui fonctionne.
Il me semble que tu as un problème plus important que le centrage de ton “layer”¹. C'est la déformation de cette couche¹.
Elle est définie en % et donc s'adapte elle aussi aux dimensions de la fenêtre.
Pour résoudre ces 2 problèmes, je te propose les modifications suivantes. Il va falloir que tu agisses dans le code de ta page. FrontPage² doit te le permettre (?)
Remplace
Le “id="layer1"” a été remplacé par “id="englobeur"”¹.
Le style de cet id a été déplacé dans une feuille de styles et un style qui centre tout dans InternetExplorer a été créé. Ça centre.
De plus, pour éviter les déformations, les dimensions ont été précisées
“width:900px;” parce que c'est la largeur minimum pour contenir les choix de mise en page que tu as faits.
Te voilà donc avec une page que les écrans en au moins 900px de large affichent en entier.
Je t'en ai mis un exemple >ici<.
Si tu veux adapter pour des écrans de plus faible résolution, il va te falloir refaire un peu tout. Réduire la taille des images, des cellules de tes <table>…
Je t'en ai mis un début d'exemple >ici<.
Chez moi, ça marche. À vérifier avec IE.
º Un peu de technique ?
¹ “Layer” est un terme qui provient de Netscape (me semble-t-il).
On a plutôt tendance à utiliser le terme de “bloc” ou à la décrire par le nom de sa balise “<div>”.
² J'espère qu'il accepte ma manière de faire.
+ Attention aux dimensions de tes images. Tu nous obliges à charger des octets inutiles.
Par exemple, tu affiches les images de l'animation en Javascript en 353x255 (235 serait plus juste) et “granger5.jpg” fait 1417x945.
Adapte leurs dimensions avant de nous les envoyer (-;
Tes images de la police cursive sont un peu trop pixellisées. Elles mériteraient un format moins destructif. Essaye en .png ou en .gif (?)
Le centrage avec des % ne se fait pas exactement comme çaº.
Il existe une autre techniqueº (c'est le choix que j'ai fait) qui est plus simple à mettre en œuvre et qui fonctionne.
Il me semble que tu as un problème plus important que le centrage de ton “layer”¹. C'est la déformation de cette couche¹.
Elle est définie en % et donc s'adapte elle aussi aux dimensions de la fenêtre.
Pour résoudre ces 2 problèmes, je te propose les modifications suivantes. Il va falloir que tu agisses dans le code de ta page. FrontPage² doit te le permettre (?)
Remplace
</script> </head> <body bgcolor="#666666" text="#333333" link="#333333" vlink="#333333" alink="white" onLoad="changer();"> <div id="layer1" style="text-align:center; background-color:rgb(153,153,153); border-width:9; border-color:rgb(166,202,240); border-style:ridge; position:relative; left:10%; top:5%; z-index:1; width:80%; height:60%; ">par
</script>
<style type="text/css">
body {
text-align:center;
}
#englobeur {
margin : 0 auto;
width:900px;
height:auto;
border:9px ridge rgb(166,202,240);
background-color:rgb(153,153,153);
}
</style>
</head>
<body bgcolor="#666666" text="#333333" link="#333333" vlink="#333333" alink="white" onLoad="changer();">
<div id="englobeur">
Le “id="layer1"” a été remplacé par “id="englobeur"”¹.
Le style de cet id a été déplacé dans une feuille de styles et un style qui centre tout dans InternetExplorer a été créé. Ça centre.
De plus, pour éviter les déformations, les dimensions ont été précisées
width:900px;
height:auto;
“height:auto; pour que la hauteur s'adapte au contenu.
“width:900px;” parce que c'est la largeur minimum pour contenir les choix de mise en page que tu as faits.
Te voilà donc avec une page que les écrans en au moins 900px de large affichent en entier.
Je t'en ai mis un exemple >ici<.
Si tu veux adapter pour des écrans de plus faible résolution, il va te falloir refaire un peu tout. Réduire la taille des images, des cellules de tes <table>…
Je t'en ai mis un début d'exemple >ici<.
Chez moi, ça marche. À vérifier avec IE.
º Un peu de technique ?
¹ “Layer” est un terme qui provient de Netscape (me semble-t-il).
On a plutôt tendance à utiliser le terme de “bloc” ou à la décrire par le nom de sa balise “<div>”.
² J'espère qu'il accepte ma manière de faire.
+ Attention aux dimensions de tes images. Tu nous obliges à charger des octets inutiles.
Par exemple, tu affiches les images de l'animation en Javascript en 353x255 (235 serait plus juste) et “granger5.jpg” fait 1417x945.
Adapte leurs dimensions avant de nous les envoyer (-;
Tes images de la police cursive sont un peu trop pixellisées. Elles mériteraient un format moins destructif. Essaye en .png ou en .gif (?)
Content que ça marche.
Pour ce qui est des images de la cursive, je m'y suis pris autrement.
Je suis très HTML et CSS en ce moment et j'avais comme référence la page d'un site. Alors, j'ai fabriqué une page en HTML* (une sorte d'exercice). Elle contient quelques indications qui pourront t'aider à la réutiliser si tu le souhaites.
Lorsque le résultat m'a semblé correspondre, j'en ai fait une copie d'écran (elles se font en png sur mon Mac) que j'ai ouverte (tu devras certainement l'y Coller) dans un éditeur graphique pour en récupérer les zones dont j'avais besoin.
Et voilà.
Ce n'est pas une méthode que je conseillerais (-;
+ Regarde dans la faq si tu ne trouverais pas un éditeur graphique qui te causerait moins de soucis, comme photofiltre alternative free a photoshop ou infographie logiciels de graphisme .
* Pas sûr qu'elle s'affiche comme je l'ai prévu dans IE.
Vérifié. En effet (ça ne concerne pas la police).
Firefox le fera.
Ou alors, il faut refaire ça dans les cellule d'un tableau alignées verticalement.
Pour ce qui est des images de la cursive, je m'y suis pris autrement.
Je suis très HTML et CSS en ce moment et j'avais comme référence la page d'un site. Alors, j'ai fabriqué une page en HTML* (une sorte d'exercice). Elle contient quelques indications qui pourront t'aider à la réutiliser si tu le souhaites.
Lorsque le résultat m'a semblé correspondre, j'en ai fait une copie d'écran (elles se font en png sur mon Mac) que j'ai ouverte (tu devras certainement l'y Coller) dans un éditeur graphique pour en récupérer les zones dont j'avais besoin.
Et voilà.
Ce n'est pas une méthode que je conseillerais (-;
+ Regarde dans la faq si tu ne trouverais pas un éditeur graphique qui te causerait moins de soucis, comme photofiltre alternative free a photoshop ou infographie logiciels de graphisme .
* Pas sûr qu'elle s'affiche comme je l'ai prévu dans IE.
Vérifié. En effet (ça ne concerne pas la police).
Firefox le fera.
Ou alors, il faut refaire ça dans les cellule d'un tableau alignées verticalement.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ça rend bien.
Bonne idée le “PP”.
As-tu testé dans IE ?
J'ajouterais 2 ou 3 bricoles.
J'aimerais voir 2 ou 3 photos de plus dans le diaporama.
Sur une page web, le soulignement fait immanquablement penser à des liens. Essaye “<p align="center"><em>Chambres d'hôtes Passé Présent</em></p>” ?
Et ces 2 propositions (en rouge).
Bonne idée le “PP”.
As-tu testé dans IE ?
J'ajouterais 2 ou 3 bricoles.
J'aimerais voir 2 ou 3 photos de plus dans le diaporama.
Sur une page web, le soulignement fait immanquablement penser à des liens. Essaye “<p align="center"><em>Chambres d'hôtes Passé Présent</em></p>” ?
Et ces 2 propositions (en rouge).
Bonjour Gihef,
Oui, le PP passe en IE. J'ai trouvé cela dans photofiltre. En fait je fais ce site pour une copine et je suis ses directives. Ce que femme veut ... en plus elle est très mignone donc je suis obligé de ne laisser que deux photos et de souligner (chambres etc ..)
Aie !! la faute hhhhautentique !!! Comment fais-tu pour le petit e du siècle ( VIe ) ?
Merci et bonne journée.
Guy
Oui, le PP passe en IE. J'ai trouvé cela dans photofiltre. En fait je fais ce site pour une copine et je suis ses directives. Ce que femme veut ... en plus elle est très mignone donc je suis obligé de ne laisser que deux photos et de souligner (chambres etc ..)
Aie !! la faute hhhhautentique !!! Comment fais-tu pour le petit e du siècle ( VIe ) ?
Merci et bonne journée.
Guy
merci pour ta réponse.
Layer est simplement la traduction de couche en anglais. Ton écran est-il un 15' ou un 19' comme le mien ? J'ai testé sur un 15' et tout est décalé vers la droite !!